The latest articles on DEV Community by Mohit Menghnani (@menghnani). https://dev.to/menghnani https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3090532%2F9fa72d44-1f8d-42e5-aa4d-0a1abf0891d9.jpg https://dev.to/menghnani en Mohit Menghnani Sun, 27 Apr 2025 06:31:37 +0000 https://dev.to/menghnani/robo-runner-web-game-challenge-submission-alibaba-cloud-web-game-432h https://dev.to/menghnani/robo-runner-web-game-challenge-submission-alibaba-cloud-web-game-432h <p><em>This is a submission for the <a href="https://int.alibabacloud.com/m/1000402443/" rel="noopener noreferrer">Alibaba Cloud</a> Challenge: <a href="https://dev.to/challenges/alibaba">Build a Web Game</a>.</em>*</p> <h2> What I Built </h2> <h1> Robo Dash - Cloud Coin Runner 🤖 </h1> <p>A fast-paced, side-scrolling web game where you control a robot running through a dynamic, ever-changing landscape. Collect cloud coins, avoid obstacles, and see how far you can go!</p> <h2> 🎮 Game Features </h2> <ul> <li> <strong>Dynamic Background</strong>: Beautiful changing scenery</li> <li> <strong>Responsive Controls</strong>: Space bar or tap to jump, double-tap for double jump</li> <li> <strong>Progressive Difficulty</strong>: Speed increases as you level up</li> <li> <strong>Sound Effects</strong>: Immersive audio feedback for all actions</li> <li> <strong>Responsive Design</strong>: Plays perfectly on both desktop and mobile devices</li> </ul> <h2> Demo </h2> <p>Game URL: <a href="https://mmenghnani.github.io/robbo-runner/" rel="noopener noreferrer">https://mmenghnani.github.io/robbo-runner/</a><br> OSS URL: <a href="http://robbo-runner.store/" rel="noopener noreferrer">http://robbo-runner.store/</a><br> </p> <div class="ltag-github-readme-tag"> <div class="readme-overview"> <h2> <img src="https://assets.dev.to/assets/github-logo-5a155e1f9a670af7944dd5e12375bc76ed542ea80224905ecaf878b9157cdefc.svg" alt="GitHub logo"> <a href="https://github.com/mmenghnani" rel="noopener noreferrer"> mmenghnani </a> / <a href="https://github.com/mmenghnani/robbo-runner" rel="noopener noreferrer"> robbo-runner </a> </h2> <h3> </h3> </div> <div class="ltag-github-body"> <div id="readme" class="md"> <div class="markdown-heading"> <h1 class="heading-element">Robo Dash - Cloud Coin Runner 🤖</h1> </div> <p>A fast-paced, side-scrolling web game where you control a robot running through a dynamic, ever-changing landscape. Collect cloud coins, avoid obstacles, and see how far you can go!</p> <div class="markdown-heading"> <h2 class="heading-element">🎮 Game Features</h2> </div> <ul> <li> <strong>Dynamic Background</strong>: Beautiful changing scenery</li> <li> <strong>Responsive Controls</strong>: Space bar or tap to jump, double-tap for double jump</li> <li> <strong>Progressive Difficulty</strong>: Speed increases as you level up</li> <li> <strong>Sound Effects</strong>: Immersive audio feedback for all actions</li> <li> <strong>Responsive Design</strong>: Plays perfectly on both desktop and mobile devices</li> </ul> <div class="markdown-heading"> <h2 class="heading-element">🎯 How to Play</h2> </div> <ol> <li>Press the START button to begin</li> <li>Use SPACE or tap to jump</li> <li>Collect cloud coins to increase your score</li> <li>Avoid obstacles like spikes, electric traps, and falling objects</li> <li>Every 20 coins increases your level and game speed</li> <li>Try to achieve the highest score possible!</li> </ol> <div class="markdown-heading"> <h2 class="heading-element">🛠️ Technical Stack</h2> </div> <ul> <li>React + TypeScript</li> <li>HTML5 Canvas for game rendering</li> <li>Howler.js for audio management</li> <li>Tailwind…</li> </ul> </div> </div> <div class="gh-btn-container"><a class="gh-btn" href="https://github.com/mmenghnani/robbo-runner" rel="noopener noreferrer">View on GitHub</a></div> </div> <br> <img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnljbixvifv0i50096rzh.png" alt=" "> <h2> Alibaba Cloud Services Implementation </h2> <h3> ✅ <strong>Object Storage Service (OSS)</strong> </h3> <ul> <li> <strong>Why I chose it:</strong> OSS is ideal for hosting static sites, especially in regions where ECS isn’t accessible (like India). It’s fast, global, and straightforward to use.</li> <li> <strong>How I used it:</strong> <ul> <li>Uploaded my built React game (<code>npm run build</code>) directly to an OSS bucket. </li> <li>Enabled <strong>static website hosting</strong> on the bucket. </li> <li>Set <code>index.html</code> as the entry point. </li> <li>Used an <strong>OSS-accelerate endpoint</strong> for faster access worldwide. </li> </ul> </li> <li> <strong>Benefits:</strong> <ul> <li>Extremely fast and low-latency static asset delivery </li> <li>No server management or backend setup required </li> <li>Easy integration via Alibaba Cloud Console </li> </ul> </li> <li> <strong>Challenges:</strong> <ul> <li>Regional restriction for some core services (like ECS), but OSS worked perfectly as a workaround </li> <li>Slight learning curve with bucket policies and enabling public access safely</li> </ul> </li> </ul> <h2> Game Development Highlights </h2> <p><strong>Robo Dash</strong> is a lightning-fast, side-scrolling runner where you guide a robot through a colorful, ever-changing world! </p> <p>🏃‍♂️ <strong>Gameplay Highlights:</strong></p> <ul> <li> <strong>One-Tap Controls</strong>: Jump and double-jump with a tap or spacebar</li> <li> <strong>Dynamic Worlds</strong>: Gorgeous animated backgrounds and parallax effects</li> <li> <strong>Cloud Coin Rush</strong>: Collect coins to boost your score and speed</li> <li> <strong>Rising Challenge</strong>: Game gets faster and tougher as you level up</li> <li> <strong>Obstacles Galore</strong>: Dodge spikes, zappers, and falling objects</li> </ul> <p>🎵 <strong>Immersive Experience:</strong></p> <ul> <li>Snappy sound effects powered by Howler.js</li> <li>Responsive design: perfect on mobile <strong>and</strong> desktop</li> <li>Particle effects for extra visual oomph</li> </ul> <p>🛠️ <strong>Built With Love (and Tech):</strong></p> <ul> <li>React + TypeScript</li> <li>HTML5 Canvas for buttery-smooth rendering</li> <li>Tailwind CSS for crisp, responsive UI</li> <li>Howler.js for managing game sounds</li> </ul> <p>🌟 <strong>Coming Soon:</strong></p> <ul> <li>Power-ups and new enemy types</li> <li>Epic background tracks</li> <li>Global leaderboard to show off your high score</li> </ul> alibabachallenge devchallenge gamedev webdev