This content originally appeared on DEV Community and was authored by Dhokai Raj
This is a submission for the Alibaba Cloud Challenge: Build a Web Game.*
What I Built
I built Maze Robot Game, a fun and interactive browser-based puzzle game where players guide a robot through a maze to reach its goal. The game is built using React, TypeScript, and Vite, and styled with Tailwind CSS for a clean and responsive design. The goal is to combine logic and pathfinding with a simple, engaging UI that anyone can play in the browser.
Demo
Live Demo: https://maze-robot-game.vercel.app/
rajdhokai
/
maze-robot-game
A React-based interactive game where a robot navigates through a dynamically rendered maze. Built with Vite, Tailwind CSS, and TypeScript for lightning-fast performance and modern styling.
rajdhokai / Maze Robot Game
Maze Robot Game
Maze Robot Game is an interactive browser-based puzzle game where you help a robot navigate through a maze to its goal!
Built using React, Vite, TypeScript, and styled with Tailwind CSS, it’s designed for smooth gameplay and modern UI.
Game Features
Maze Logic & Movement
- The robot moves through a grid-based maze.
- Players control movement with arrow keys.
- Logic prevents wall collisions and ensures valid paths.
- The structure allows for dynamic mazes in the future.
UI & UX
- Responsive and clean layout using Tailwind CSS.
- Smooth transitions and mobile-friendly controls.
- Designed for clarity and accessibility.
Development Tools
- Built with Vite for lightning-fast HMR and builds.
- Code is modular and scalable with TypeScript.
- Uses ESLint and Prettier for clean, consistent code.
- Icon support with Lucide React Icons.
Tech Stack
- React…
Alibaba Cloud Services Implementation
Note: Due to regional restrictions for ECS in India, I opted to use Alibaba Cloud OSS to deploy the game. This allowed full global access and aligns with the challenge’s alternative access suggestions.
Object Storage Service (OSS)
Why I chose it:
OSS is ideal for hosting static sites, especially in regions where ECS isn’t accessible (like India). It’s fast, globally available, and straightforward to use.
How I used it:
- Built the game using
npm run build. - Uploaded the output files directly to an OSS bucket.
- Enabled Static Website Hosting on the bucket.
- Set
index.htmlas the default entry file. - Used an OSS-Accelerate endpoint for improved global performance.
Benefits
Extremely fast and low-latency static asset delivery
No server management or backend configuration required
Easy setup and integration through the Alibaba Cloud Console
Challenges
Regional restriction for some core services (like ECS), but OSS worked perfectly as a workaround.
Slight learning curve around bucket policies and safely enabling public access.
Game Development Highlights
Dynamic Maze Logic: The maze is built with a scalable structure allowing for future upgrades like procedural generation or different difficulty levels.
Grid-Based Movement: The robot moves within a constrained grid, allowing intuitive navigation and potential for future pathfinding algorithms.
Built with Vite: Super-fast development and hot module replacement made the build process smooth and efficient.
Component-Based Structure: The project is organized into clean, reusable components, making it easy to maintain and expand.- Tailwind-Powered Design: Quick UI styling with Tailwind enabled responsive layout and a polished interface with minimal effort.
This content originally appeared on DEV Community and was authored by Dhokai Raj