Ali Roboshoot: A Phaser 3 Arcade Shooter Powered by Alibaba Cloud

This is a submission for the Alibaba Cloud Challenge: Build a Web Game. What I Built Ali Roboshoot is a fast-paced, top-down arcade shooter built with Phaser 3 and Vite. Players take command of an combat red car, battling waves of diverse robot enemies (Scarabs, Hornets, Spiders) using primary weapons and a powerful secondary RPG. The core gameplay involves surviving as long as possible against increasingly difficult waves of enemies. Key features include: 8-Directional Movement & Mouse Aiming: Classic arcade controls. Multiple Enemy Types: Each with unique movement and attack patterns (melee, ranged, strafing). Pickup System: Collect health packs, ammo clips, RPG ammo, and temporary fire rate boosts dropped by enemies. RPG Secondary Weapon: Fires explosive rounds with area-of-effect damage. Objective Capture: Capture flags guarded by special 'Orange Robot' enemies for bonus points. An arrow guides you to the current flag. Time-Based Difficulty Scaling: Enemies become more numerous and spawn faster over time. Online Leaderboard: Submit your initials and score to compete on the Top 5 leaderboard, powered by a serverless backend. Visual Polish: Includes enemy health bars, hit flashes, screen shake, explosions, and a retro pixel art style. Custom Initials: Players can set their own initials for the leaderboard. The goal is simple: survive, destroy robots, capture flags, collect power-ups, and get the highest score! Demo Play the game live: https://aliroboshoot.chronolove.app/ Source Code: https://github.com/bO-05/ali-roboshoot Video Demo (2x speed): Alibaba Cloud Services Implementation I utilized several Alibaba Cloud services to build and deploy Ali Roboshoot, primarily focusing on cost-effectiveness, scalability, and ease of use for a web game architecture. All services were provisioned in the ap-southeast-1 (Singapore) region. Object Storage Service (OSS): Why: OSS is ideal for hosting static assets and the frontend application build. It's cost-effective, highly available, and integrates well with other Alibaba services. How: I used two separate OSS buckets: ali-roboshoot-assets-densodeto: Stores all game assets (spritesheets, sound effects, music). The game client loads these directly. ali-roboshoot-game-densodeto: Hosts the static website build output (HTML, JS, CSS generated by npm run build). This bucket is configured for static website hosting. Integration: I configured a custom domain (aliroboshoot.chronolove.app) to point to the game hosting bucket and enabled HTTPS through the Alibaba Cloud console, which handled the certificate management and integration with my external DNS provider. Deploying updates was streamlined using the ossutil command-line tool to upload the contents of the dist folder. Experience: Setting up static hosting and the custom domain/HTTPS involved navigating the console and DNS settings, which was a learning experience but ultimately successful. ossutil was very convenient for deployment. Function Compute (FC): Why: For the leaderboard backend API, I needed a simple way to handle POST requests (submit score) and GET requests (retrieve top scores). Function Compute offered a serverless approach, meaning I don't manage servers, it scales automatically, and I primarily pay for execution time, which is very cost-effective for this type of low-traffic API. I initially considered ECS but FC felt like a better fit for this simple API need and potential free tier benefits. How: I created a service (ali-bot-shooter-service) and deployed a Node.js 16 function (highscore-api). The function code handles database connections, executes SQL queries to insert or retrieve scores, and formats the JSON response. Integration: An HTTP Trigger was configured for the function, providing a public API endpoint (https://highscore-api-ali-bot-service-iwcbnbmnlw.ap-southeast-1.fcapp.run) that the Phaser game client calls using fetch. Crucially, the function was configured to run within the same VPC as the RDS database, allowing secure access via the database's internal endpoint without exposing the database directly to the public internet. Environment variables within FC were used to securely store database credentials. Experience: FC was relatively straightforward to set up for a simple Node.js API. The key was configuring the VPC and Security Group correctly to allow communication with RDS. ApsaraDB RDS for MySQL: Why: A persistent relational database was needed to store the leaderboard scores. RDS manages the database instance (provisioning, patching, backups), simplifying operations compared to self-hosting a database. MySQL is a familiar and robust choice. How: I provisioned a small ApsaraDB RDS for MySQL 8.0 instance (mysql.n2.medium.1, Basic Edition, PL1 ESSD storage) within a VPC in the Singapore region. I created a dedicated database (alibotshooter_scores) and a specific user (

Apr 25, 2025 - 16:16

Ali Roboshoot: A Phaser 3 Arcade Shooter Powered by Alibaba Cloud

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

What I Built

Ali Roboshoot is a fast-paced, top-down arcade shooter built with Phaser 3 and Vite. Players take command of an combat red car, battling waves of diverse robot enemies (Scarabs, Hornets, Spiders) using primary weapons and a powerful secondary RPG.

The core gameplay involves surviving as long as possible against increasingly difficult waves of enemies. Key features include:

8-Directional Movement & Mouse Aiming: Classic arcade controls.
Multiple Enemy Types: Each with unique movement and attack patterns (melee, ranged, strafing).
Pickup System: Collect health packs, ammo clips, RPG ammo, and temporary fire rate boosts dropped by enemies.
RPG Secondary Weapon: Fires explosive rounds with area-of-effect damage.
Objective Capture: Capture flags guarded by special 'Orange Robot' enemies for bonus points. An arrow guides you to the current flag.
Time-Based Difficulty Scaling: Enemies become more numerous and spawn faster over time.
Online Leaderboard: Submit your initials and score to compete on the Top 5 leaderboard, powered by a serverless backend.
Visual Polish: Includes enemy health bars, hit flashes, screen shake, explosions, and a retro pixel art style.
Custom Initials: Players can set their own initials for the leaderboard.

The goal is simple: survive, destroy robots, capture flags, collect power-ups, and get the highest score!

Demo

Play the game live: https://aliroboshoot.chronolove.app/
Source Code: https://github.com/bO-05/ali-roboshoot
Video Demo (2x speed):

Alibaba Cloud Services Implementation

I utilized several Alibaba Cloud services to build and deploy Ali Roboshoot, primarily focusing on cost-effectiveness, scalability, and ease of use for a web game architecture. All services were provisioned in the ap-southeast-1 (Singapore) region.

Object Storage Service (OSS):
- Why: OSS is ideal for hosting static assets and the frontend application build. It's cost-effective, highly available, and integrates well with other Alibaba services.
- How: I used two separate OSS buckets:
  - ali-roboshoot-assets-densodeto: Stores all game assets (spritesheets, sound effects, music). The game client loads these directly.
  - ali-roboshoot-game-densodeto: Hosts the static website build output (HTML, JS, CSS generated by npm run build). This bucket is configured for static website hosting.
- Integration: I configured a custom domain (aliroboshoot.chronolove.app) to point to the game hosting bucket and enabled HTTPS through the Alibaba Cloud console, which handled the certificate management and integration with my external DNS provider. Deploying updates was streamlined using the ossutil command-line tool to upload the contents of the dist folder.
- Experience: Setting up static hosting and the custom domain/HTTPS involved navigating the console and DNS settings, which was a learning experience but ultimately successful. ossutil was very convenient for deployment.
Function Compute (FC):
- Why: For the leaderboard backend API, I needed a simple way to handle POST requests (submit score) and GET requests (retrieve top scores). Function Compute offered a serverless approach, meaning I don't manage servers, it scales automatically, and I primarily pay for execution time, which is very cost-effective for this type of low-traffic API. I initially considered ECS but FC felt like a better fit for this simple API need and potential free tier benefits.
- How: I created a service (ali-bot-shooter-service) and deployed a Node.js 16 function (highscore-api). The function code handles database connections, executes SQL queries to insert or retrieve scores, and formats the JSON response.
- Integration: An HTTP Trigger was configured for the function, providing a public API endpoint (https://highscore-api-ali-bot-service-iwcbnbmnlw.ap-southeast-1.fcapp.run) that the Phaser game client calls using fetch. Crucially, the function was configured to run within the same VPC as the RDS database, allowing secure access via the database's internal endpoint without exposing the database directly to the public internet. Environment variables within FC were used to securely store database credentials.
- Experience: FC was relatively straightforward to set up for a simple Node.js API. The key was configuring the VPC and Security Group correctly to allow communication with RDS.
ApsaraDB RDS for MySQL:
- Why: A persistent relational database was needed to store the leaderboard scores. RDS manages the database instance (provisioning, patching, backups), simplifying operations compared to self-hosting a database. MySQL is a familiar and robust choice.
- How: I provisioned a small ApsaraDB RDS for MySQL 8.0 instance (mysql.n2.medium.1, Basic Edition, PL1 ESSD storage) within a VPC in the Singapore region. I created a dedicated database (alibotshooter_scores) and a specific user (alibot_user) with limited privileges for the Function Compute API to use. The database schema consists of a single high_scores table (id, player_initials, score, created_at).
- Integration: The Function Compute service connects to RDS using the internal endpoint (rm-gs5eh9n6m74822e3u.mysql.singapore.rds.aliyuncs.com) over the standard MySQL port (3306) within the secure VPC network. RDS Whitelist rules were configured initially for local development access via MySQL client and later potentially adjusted for the FC Security Group if needed (though VPC internal access often bypasses explicit IP whitelisting).
- Experience: Provisioning RDS was straightforward through the console. Connecting from Function Compute via the internal VPC endpoint worked well once the network configurations were correctly set up.

Game Development Highlights

First Game Project: As my first significant web game project, this was a huge learning experience, particularly with the Phaser 3 framework, game state management, and asset loading. Never knew spritesheet is such a fun assets to work with.
Cloud Deployment: Integrating and deploying the frontend (OSS + Custom Domain/HTTPS) and backend (Function Compute + RDS + VPC) on Alibaba Cloud was a practical introduction to cloud architecture for web applications.
Feature Creep (Positive!): The project grew from a basic shooter to include more complex systems like the RPG weapon, objective flags with guardian AI, and various pickups, which made development more challenging but also more rewarding.
Community Assets: Leveraging freely available graphical and audio assets (properly credited in the README) was essential for a solo developer to achieve a polished look and feel within the hackathon timeframe.
Repository Reset: An early development mistake involved committing sensitive info to a private repo. This necessitated recreating the public repository and carefully migrating the cleaned codebase, reinforcing the importance of Git security practices.

Acknowledgements

Frameworks:
- Vite
- Phaser 3
Graphic Assets:
- Matt Walkden
- Edu Silv Art
- OpenAI Sora
Sound Effects and Music - All from Pixabay:
- freesound_community
- Driken Stan
- DjLofi

The above contributors/ platforms/ frameworks made this project possible. Thank you!

Developed by B G Adam (async_dime)