This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*
What I Built
RoboVerr is an action-packed 2D platformer web game featuring a robot protagonist navigating through challenging environments. The game combines modern web technologies with classic platformer mechanics, offering an immersive gaming experience directly in the browser. Players control a robot character who can run, jump, and shoot while avoiding and killing enemies.
The game features fluid animations, collision detection, shooting mechanics, user authentication, profile customization, a scoring system that persists user data, and a leaderboard system to track high scores. The game is fully responsive, supporting both keyboard controls for desktop users and touch controls for mobile gameplay.
Demo
Live Game: Play_Now
Github Repository: RoboVerr
Desktop Picture
Mobile Picture
Alibaba Cloud Services Implementation
Elastic Compute Service (ECS)
I deployed the RoboVerr game on Alibaba Cloud's ECS instances, which provided reliable and scalable computing power for the game server.
Why I chose it: I am familiar with using Ubuntu to serve my website. I love the flexibility that the Ubuntu instance on ECS offers, as it enables me to create and manage my server as I wish. For example, I can set up an Nginx server and point it to an external website, allowing me to host anything I want, including service workers. Additionally, ECS provides the perfect balance of performance and cost-effectiveness, with the ability to scale up during peak gaming hours.
Integration: I created the server and bound it to an SSH_KEY. I use this SSH_KEY to log in to my Ubuntu system. After logging in, I cloned the website repository onto the EC2 server. I then installed and configured Nginx, testing its functionality by accessing it using the instance's public IP address.
Next, I navigated to the game directory, installed the necessary Node.js packages, and set up my .env file to connect to the AsparaDB MySQL RDS. After running and testing the game, I confirmed that it was working properly.
Once I had verified it is working, I configured my Nginx server in /etc/nginx/sites-available/default using proxy_pass to direct traffic to localhost:3000, allowing it to serve my application under the server name ECS_PUBLIC_IP_ADDRESS. After restarting Nginx, I confirmed that the server was successfully serving my game.
I then created a system service (located at /etc/systemd/system/robover.service) to ensure my game runs continuously. I reloaded the system daemon and verified that everything was functioning perfectly.
Next, I went to one of my domain names on Namecheap and added an A record that pointed to ECS_PUBLIC_IP_ADDRESS, directing it to a subdomain (roboverr). I set my server name to the subdomain (roboverr.quantumweb.me). I installed Certbot on my server and configured it to enable SSL, allowing my game to be served from 'https://roboverr.quantumweb.me/'.
Finally, I configured my repository to utilize GitHub Actions for automated deployment to the server whenever I push changes to the main branch.
Experience: I really appreciate how fast the SSH connection is; it doesn't lag like some other cloud servers I’ve used in the past. The service was as easy to use as other cloud options. However, I expected that the ECS would be linked to a subdomain name, similar to how AZURE does it. 😅
ApsaraDB for MYSQL(RDS)
I used ApsaraDB for MYSQL to store user data, game scores, and implement the leaderboard system.
Why I chose it: MySQL provides excellent performance for read-heavy applications, such as game leaderboards, and has a lightweight footprint that is ideal for web games. Although I initially intended to use PostgreSQL, I encountered an error stating that I was not eligible for the free tier campaign. I found out I needed to submit some information to qualify, but I was hesitant to do that since I was close to the deadline. Unsure of when my request would be approved, I decided to switch to MySQL instead.
Integration: The database layer of the game, configured in config/database.js, connects to ApsaraDB for MySQL. This setup handles user registration, authentication, game statistics, and leaderboard rankings. The schema for player data is defined in the models/User.js file.
After purchasing ApsaraDB for MySQL, I created a privileged user account, established a public endpoint, and added both my domain's public and private IP addresses to the whitelist. I then used this account and the public endpoint details to connect to the database from my game server.
Experience: The database is cool and easy to set up. I especially like the Database Management Service, where I can log into the database, view it, and run commands. It reminds me of WAMP Server's phpMyAdmin for MySQL databases, but it seems even cooler and modern.
Game Development Highlights
First of all, I created this with love 💓 for game and logic. This is a Vanilla JavaScript Game using HTML Canvas and advanced Browser inbuilt JavaScript API. Making it a Progressive Web Application that can be installed on any device like a native game application, responsive and adaptive for all screen sizes and device types, either keyboard or screen touch.
Responsive Controls System
One of the features I'm most proud of is the dual control system that automatically adapts to the user's device. The game seamlessly switches between keyboard controls (using controller/keyBoard.js) and touch controls (using controller/touchpad.js) based on the detected device type, providing an optimized experience across platforms.
Physics Engine
I developed a lightweight custom physics engine (physics/collider.js) that handles collision detection between the player, platforms, and enemies. This creates realistic movement and interactions while maintaining smooth performance even on lower-end mobile devices.
Progressive Web App Implementation
RoboVerr is implemented as a Progressive Web App with service worker support (service-worker.js), enabling offline play capabilities and "add to home screen" functionality on mobile devices. This significantly enhances user experience by allowing gameplay without an active internet connection once assets are cached.
Sprite Animation Framework
I built a custom sprite animation framework (utils/spriteAnimation.js) that handles complex character animations with minimal overhead. The system efficiently manages sprite sheets and transitions between animation states (running, jumping, shooting) based on player actions and game events, ensuring smooth visual feedback with optimal performance.
Memory Management System
To ensure smooth gameplay even on resource-constrained devices, I implemented a memory management system (utils/memory.js) that intelligently loads and unloads game assets based on the current game state and predicted future needs. This approach significantly reduces memory usage and prevents performance degradation during extended gameplay sessions.
Modular Architecture
The game's architecture follows a modular design pattern with clear separation of concerns. Each game element (player, enemies, platforms) is encapsulated in its own class with standardized interfaces, making the codebase maintainable and extensible. This approach allowed me to rapidly prototype new features and will facilitate future expansion with additional levels, enemies, and power-ups.
Adaptive Difficulty System
The game features a dynamic difficulty adjustment system that subtly modifies game parameters based on the player's performance. Elements like enemy spawn rates and shooting speed are automatically tuned to keep the challenge level engaging without frustrating players, creating a personalized experience that adapts to different skill levels.
Character Design and Artwork
One of my favorite parts of developing RoboVerr was designing the main robot character and creating all its spritesheets from scratch. I spent considerable time refining the robot's appearance to ensure it had personality while maintaining a clean, recognizable silhouette that works well in fast-paced platforming. Creating the animation frames for running, jumping, and shooting actions was both challenging and incredibly rewarding. The character's distinctive look emerged through multiple iterations, and seeing my hand-drawn frames come to life in the game was one of the most satisfying aspects of this project.
The game has many interesting features that I coded from scratch. One aspect I love about the game logic is the separation of concerns, which makes it easy to update and integrate new features without overwhelming the developer with how the code works.
