This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*
Here’s a complete, polished set of answers you can use for your Alibaba Cloud Challenge submission for RoboTap:
🚀 What I Built
RoboTap is a fast-paced reflex game where players must quickly click on randomly appearing robots before they disappear. The game blends fun and challenge with a clean design, tracking scores, levels, and player streaks.
The theme is robot-centric — players interact with bots directly, and the entire game revolves around how fast you can "tap the bot." It’s built for browsers and delivers an engaging experience with responsive UI and interactive feedback, all packed into a lightweight React app.
Demo
Play here: https://chintanonweb.github.io/RoboTap/
OSS url: https://robotap-webgame.store/
🤖 RoboTap
RoboTap is a fast-paced browser game where your goal is simple: click the robots before they vanish! Built with React and TypeScript, it's a sleek and addictive experience that tests your reflexes and focus.
🎮 Game Features
🕹️ Game Mechanics
- Robots appear at random positions on the screen.
- You have 2 seconds to click each robot before it disappears.
- A score counter keeps track of your progress.
-
High scores are saved using
localStorage so you can keep chasing your personal best.
-
Lives system – Miss three robots and it’s game over!
🧑🎨 UI & UX
- Clean, modern design with a dark theme.
-
Smooth animations and satisfying transitions.
- Responsive HUD showing:
- 🧡 Lives remaining
- 🧮 Current score
- 🏆 High score
- Intuitive start screen and game over screen.
-
Visual feedback when clicking or missing a robot.
⚙️ Technical Highlights
- Built using React + TypeScript
- Styled with Tailwind CSS…
☁️ Alibaba Cloud Services Implementation
Alibaba Cloud Services Implementation
** Alibaba Cloud Object Storage Service (OSS)**
Purpose: Hosted the static files of RoboTap (HTML, CSS, JavaScript) for public access.
Why OSS: Offered a straightforward, scalable, and cost-effective solution for deploying a static React + TypeScript game without the need for server management.
-
Integration Steps:
- Built the production version of the game using
npm run build.
- Uploaded the contents of the
build/ directory to an OSS bucket.
- Configured the bucket for static website hosting by setting
index.html as the default homepage and error.html as the 404 page.
- Set the bucket's access control to public read.
- Bound a custom domain to the OSS bucket by adding a CNAME record pointing to the bucket's endpoint.
-
Experience:
-
Benefits: Quick setup, reliable performance, and seamless domain integration.
-
Challenges: Initial understanding of OSS's static hosting configuration required careful review of the documentation.
✨ Game Development Highlights
- 🔥 Streak and Level System: Players level up every 5 points, and the robot appearance time shortens, increasing difficulty — great for replayability.
- 🎵 Sound & Feedback: Integrated
useSound for click and game over sounds; also added glowing UI effects for more immersive gameplay.
- 🧠 Responsive & Adaptive Design: Built with Tailwind CSS to ensure full responsiveness across devices and screen sizes.
- ⚛️ React Hooks Mastery: Managed timing, state updates, animations, and visibility through a clean and optimized hook structure.
- 🪄 Smooth Animations: Used Framer Motion to enhance user experience — from start screen transitions to bot scale-in effects.
