RoboFire: Cloud Clash Game Challenge Submission: Alibaba Cloud Web Game
amionweb

amionweb @amionweb

Joined:
Apr 27, 2024

RoboFire: Cloud Clash Game Challenge Submission: Alibaba Cloud Web Game

Publish Date: Apr 27
35 2

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

What I Built

An exciting arcade-style game where you control a robot shooting down clouds and collecting coins while avoiding dangerous obstacles!

Demo

Live url: https://robo-fire.vercel.app/

RoboFire: Cloud Clash 🤖☁️

An exciting arcade-style game where you control a robot shooting down clouds and collecting coins while avoiding dangerous obstacles!

🎮 Play Now

Play RoboFire: Cloud Clash

✨ Features

  • 🎯 Intuitive controls with keyboard support
  • 🌟 Beautiful visual effects and animations
  • 🎨 Smooth gameplay mechanics
  • 📈 Progressive difficulty system
  • 🏆 High score tracking
  • 🎵 Engaging sound effects
  • 📱 Responsive design

🕹️ How to Play

  1. Use Arrow keys or WASD to move your robot
  2. Press Spacebar to shoot at clouds
  3. Collect falling coins to score points
  4. Avoid obstacles (lightning bolts and asteroids)
  5. Reach level 10 to win!

🚀 Getting Started

# Clone the repository
git clone https://github.com/amionweb/robo-fire

# Navigate to the project directory
cd robofire-cloud-clash

# Install dependencies
npm install

# Start the development server
npm run dev
Enter fullscreen mode Exit fullscreen mode

🛠️ Built With

  • React
  • TypeScript
  • HTML5 Canvas
  • TailwindCSS
  • Vite

🎯 Game Mechanics

  • Clouds: Shoot them to create collectible coins

Image description

Image description


☁️ Alibaba Cloud Services Implementation

For RoboFire: Cloud Clash, I used Alibaba Cloud Object Storage Service (OSS) to host and serve the static game files, and configured a custom domain for a professional, fast-loading experience.

Services Used:

  • Object Storage Service (OSS)

    • Why: OSS provides a highly reliable, scalable, and cost-effective way to store static web assets like HTML, CSS, JavaScript, and images.
    • How Integrated:
    • Built the game locally with npm run build.
    • Uploaded the build folder contents directly to an OSS bucket.
    • Configured the bucket for static website hosting (setting the index document to index.html).
    • Experience: OSS made it extremely easy to deploy updates — I just re-upload the latest build files. The performance was excellent with low latency globally.
  • Domain Management + Custom Domain Binding

    • Why: Custom domains make the game more shareable and professional.
    • How Integrated:
    • Purchased or linked an existing domain via Alibaba Cloud Domains.
    • Mapped the domain to my OSS bucket via a CNAME record.
    • Configured HTTPS using Alibaba Cloud SSL certificates for secure access.
    • Experience: Domain setup was straightforward following Alibaba Cloud's documentation. Enabling HTTPS ensured that game assets loaded securely without browser warnings.

Benefits:

  • Fast content delivery worldwide
  • Very low maintenance and update cost
  • Scalable without worrying about backend servers

Challenges:

  • The initial learning curve with setting correct bucket permissions (public read) for the static website.
  • Slight delay (~10–15 mins) when applying custom domain settings and SSL.

🎯 Game Development Highlights

Simple Yet Addictive Gameplay:

  • I designed RoboFire: Cloud Clash to have a fast gameplay loop — move, shoot, collect, avoid — making it highly engaging even with minimal mechanics.

Progressive Difficulty

  • One of the coolest features is the dynamic level system. As players collect coins, the enemy cloud speed increases, making higher levels genuinely challenging without introducing complex new elements.

Clean Responsive Canvas Integration

  • Using HTML5 Canvas inside a React environment with Vite made rendering super fast and allowed the game to adapt nicely to different screen sizes (desktop, tablet, mobile).

Retro-Futuristic Visuals

  • I’m especially proud of the polished visual design — a clean, modern robot combined with nostalgic arcade-style effects like glowing coins and cloud explosions.

Optimized Performance

  • Despite animations and firing mechanics, the game remains lightweight (~a few MBs), fast-loading, and smooth at 60fps even on lower-end devices.

Comments 2 total

  • Joel Jaison
    Joel JaisonApr 27, 2025

    Good Work

    • amionweb
      amionwebApr 27, 2025

      Thank you if you like my work please like and share

Add comment