🎮 Robot Recognition Game: Deploying the game to the web with Alibaba Cloud has never been easier

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

What I Built

I developed a fun and engaging robot-themed game where players are shown images of different robots along with their names. The challenge is for users to memorize the robots and their corresponding names. Once they've had enough time, they must correctly identify the robot by name to progress to the next level. The game tests both memory and recognition skills in a playful and interactive way.

Demo

• Live page: http://game.robotrecognition.xyz
• Replacement page (for backup purposes only): https://robot-recognition-web-game.vercel.app
• Github repository: https://github.com/longphanquangminh/robot-recognition-web-game

🎯 The opening screen of the game application:

🎯 The robot name memorization stage at the level:

🎯 The step to choose the correct character name that matches the provided image:

🎯 Game Over – Better Luck Next Time:

🎯 Leaderboard – Showcasing Players with Top Memory Skills:

Alibaba Cloud Services Implementation

Elastic Compute Service (ECS)

My Robot Recognition Game is hosted on Alibaba Cloud's ECS, providing several key benefits:

• Performance : ECS instances deliver consistent, low-latency performance crucial for my memory-based game mechanics
• Scalability : Easy vertical and horizontal scaling capabilities to handle increased user load
• Cost-Effective : Pay-as-you-go pricing model ideal for my game's hosting needs
• Reliability : High availability with 99.975% SLA ensuring stable game access

Integration

1. Deploy directly via Alibaba Cloud ECS Console
2. Use static build from Vite (npm run build)
3. Manage instance through Alibaba Cloud dashboard

Benefits

1. Simplified deployment process
2. Excellent uptime metrics
3. Global accessibility with low latency
4. Cost-effective hosting solution

Challenges & Solutions

• Initial setup learning curve
• Resolved through comprehensive documentation
• Fine-tuned server configurations for optimal performance

Object Storage Service (OSS)

My Robot Recognition Game leverages Alibaba Cloud's Object Storage Service (OSS) for storing and serving image assets, providing several key benefits:

• Performance: OSS ensures fast and reliable access to robot images, critical for seamless game rendering during memorization and guessing stages
• Scalability: Automatically scales to handle growing numbers of image assets as the game expands with new levels or robot types
• Cost-Effective: Pay-as-you-go pricing model aligns with the game’s asset storage needs, minimizing costs for static content.
• Global Accessibility: OSS’s distributed architecture enables low-latency image delivery to players worldwide

Integration

1. Configured an OSS bucket via the Alibaba Cloud OSS Console to store robot image files
2. Uploaded image assets (e.g., PNG files for robots) using the OSS web interface or SDK, ensuring proper naming conventions for easy retrieval
3. Integrated OSS URLs into the game’s frontend (built with Vite) to dynamically load images during gameplay
4. Set appropriate access permissions (public read-only) to allow secure image access without exposing sensitive data.

Benefits

1. Simplified asset management with a centralized storage solution
2. High reliability and uptime for image assets, ensuring consistent gameplay
3. Reduced load on the hosting server by offloading static content to OSS
4. Low-latency image loading for players across different regions

Challenges & Solutions

1. Initial learning curve in configuring OSS bucket settings and permissions
2. Resolved by leveraging Alibaba Cloud’s detailed OSS documentation and tutorials
3. Optimized image file sizes before uploading to OSS to balance quality and loading speed
4. Implemented error handling in the frontend to gracefully manage any temporary OSS access issues

Content Delivery Network (CDN)

Alibaba Cloud’s CDN powers the delivery of images for my Robot Recognition Game, ensuring players get fast, seamless access to visuals no matter where they are. It’s been a game-changer for keeping load times snappy and the experience smooth.

Integration

1. Purchase: Activate the CDN service through Alibaba Cloud’s CDN Console with a few clicks to get started.
2. Configure: Add the game’s domain to the CDN, set up caching rules for images (like PNGs and JPEGs), and link it to my ECS instance or Object Storage Service (OSS) as the origin server.
3. Use: Test the accelerated domain to confirm images load quickly from nearby edge nodes, then roll it out for players.

Benefits

1. Dead-simple setup with a clean console to manage everything.
2. Images load crazy fast thanks to over 3,200 global edge nodes.
3. Saves bandwidth costs by caching images closer to players.
4. Built-in protections like HTTPS and DDoS defense keep things secure.

Domain Name Service (DNS)

Alibaba Cloud’s DNS service keeps the domain for my Robot Recognition Game running smoothly, ensuring players can access it without hiccups. It’s been a solid choice for managing domain resolution with minimal fuss.

Integration

1. Purchase: Head to Alibaba Cloud’s Domain Name Registration page, search for a domain name, and pick an available one that fits the game
2. Configure: Set up DNS records (like A or CNAME) in the DNS management panel to link it to my ECS instance
3. Use: Activate the domain, test it to confirm it’s resolving correctly, and watch it route traffic to the game

Benefits

1. Super straightforward to manage everything in one clean dashboard
2. Fast resolution times keep the game accessible no matter where players are
3. Built-in security perks, like DDoS protection, add peace of mind
4. Pricing is clear and doesn’t break the bank 💰

Game Development Highlights

📌 Advanced State Management: Implemented a robust state machine pattern using TypeScript enums (Idle, Preview, Guess, GameOver) for clear game flow control.

📌 Dynamic Difficulty Scaling: Created an engaging progression system that:

• Starts with ~3 robots at level 1 (based on the number of robots in defined data)
• Incrementally adds more robots
• Implements Fisher-Yates shuffle for true randomization

📌 Progressive UI/UX: Custom progress bar component providing:

• Visual countdown feedback
• Smooth animations
• Responsive design

📌 Persistent Leaderboard System: Implemented local storage-based leaderboard featuring:

• Persistent score tracking
• Automatic sorting
• Clean data structure

📌 Smart Scoring Algorithm: Designed an engaging scoring system with:

• Level-based point multiplication
• Automatic difficulty progression
• Balanced reward structure

These technical implementations create an engaging, challenging, and fair gaming experience while maintaining clean, maintainable code architecture.