🔧 Robot Invaders Game

🕛 Zeit seit Veröffentlichung: 85 Tage, 2 Stunden 32 Minuten
📆 Veröffentlicht am: 26.04.2025 um 14:50 Uhr
Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*

What I Built

My project is called "Robo Invaders", a robot-themed web shooter game built using HTML, CSS, and JavaScript. In the game, players control a robot that defends its base by shooting waves of enemy robots. The gameplay includes different types of enemy robots, animated movements, score tracking, player health, and boss battles for added challenge.The game is designed to deliver a fun, polished experience with smooth controls and exciting robot-themed action.

Demo

Repo Link
click here to Play

[This is the default url when depoyed on Alibaba it will download the files into your system .. You can also play the game directly from your system](https://roboinvadersgamestatic.oss-eu-west-1.aliyuncs.com/index.html

Alibaba Cloud Services Implementation

Function Compute
Why I chose it: I needed a lightweight, scalable backend service to handle HTTP requests from my game without setting up or maintaining servers.

How I integrated it: I used Function Compute to create an Express.js server that receives high scores from the game and stores them in ApsaraDB (MongoDB). It listens for both POST and GET requests to manage scores dynamically during gameplay.

Experience: The integration was smooth once I set up the right function permissions and environment. The ability to quickly deploy updates without worrying about infrastructure was a big advantage. A small challenge was understanding how to configure the public endpoint access correctly for communication with the database.

ApsaraDB for MongoDB

Why I chose it: I needed a reliable, scalable database to store player high scores and game statistics. ApsaraDB for MongoDB offered a fully managed, high-availability solution that matched my game’s needs.

How I integrated it: I connected the Function Compute server to ApsaraDB using a MongoDB connection string. Every time a player finishes a game, their score is sent to the server, which checks if it’s a new high score and saves it if necessary.

Experience: Setting up the database and IP whitelist was straightforward, and the replica set provided built-in reliability. The challenge was ensuring the connection string was correctly formatted (escaping special characters like @ in the password) and managing IP whitelisting securely without exposing public access.

Object Storage Service (OSS)

Why I chose it: I needed a reliable place to host and serve my static web game assets, including HTML, CSS, JavaScript, and images.

How I integrated it: I uploaded the entire game folder to an OSS bucket and configured it as a static website, enabling direct access through a public URL.

Experience: OSS made hosting super easy, and performance was excellent. Setting proper CORS rules to allow communication between the front end and backend services took a bit of testing, but documentation helped a lot.

Game Development Highlights

Interesting Aspects & Features I'm Proud Of:

One of the most exciting parts of building my robot-themed game was designing the dynamic high score system. Every time a player finished a game, their score would instantly update on the leaderboard if it was a new high, and a fun "New High Score!" popup animation would celebrate their achievement. 🎉

I'm also proud of how I structured the game to feel responsive and lightweight. I optimized the game to load quickly from Object Storage Service (OSS) and ensured smooth communication with ApsaraDB and Function Compute for saving player data — creating a seamless experience without noticeable lag.

Additionally, even though it was a browser-based game, I added animations, enemy behavior variety, and a boss level to keep the gameplay engaging and progressively challenging. Getting all the moving parts (front end + backend + database) to sync up in a cloud environment like Alibaba Cloud was a huge achievement for me.

...