Building a Retro Mario Game in the Browser with Amazon Q

 As a fan of classic platformers, I recently set out to recreate a retro Mario-style game using HTML5, CSS, and JavaScript. With the help of Amazon Q, I was able to quickly prototype and refine a playable Mario game that runs entirely in the browser—no frameworks or external libraries required!

Game Features

Classic Platforming: Mario can run, jump, and collect coins across a scrolling level filled with platforms and enemies.

Simple Controls: Use the arrow keys to move and jump, just like the original games.

Enemies and Hazards: Dodge or stomp on Goomba-like enemies, and avoid falling off platforms.

Score and Lives: Collect coins for points, defeat enemies for bonuses, and try to reach the flag before running out of lives.

Win and Game Over Screens: The game displays your final score and lets you restart for another run.

How It Works

The game is built in a single HTML file (mario.html) and uses the <canvas> element for rendering. Here’s a quick overview of the main components:

Mario Character: Mario’s position, velocity, and state are managed in a JavaScript object. Movement and jumping are handled via keyboard events.

Platforms and Level Design: Platforms are defined as an array of objects, each with position and size. Collision detection ensures Mario can land, walk, and jump realistically.

Coins and Enemies: Coins and enemies are also arrays of objects. Collision logic allows Mario to collect coins and defeat enemies by jumping on them.

Camera System: The camera follows Mario as he moves through the level, creating a side-scrolling effect.

UI and Feedback: The score, lives, and instructions are displayed on top of the game. When you win or lose, a modal appears with your final score and a restart button.

Visuals

Mario Sprite: Instead of drawing Mario with canvas shapes, I used animated GIFs for idle and moving states, positioned over the canvas for a more authentic look.

Background and Platforms: The background uses a gradient for the sky and a solid color for the ground, with simple shapes for clouds and platforms to keep the retro vibe.

What I Learned with Amazon Q

Amazon Q made it easy to iterate on the game logic, debug issues, and add features like enemy AI and camera movement. The ability to get instant code suggestions and explanations helped me focus on gameplay and polish.

Click here for Gameplay :

https://media.licdn.com/dms/image/v2/D5622AQEEgnUzxrrQyQ/feedshare-shrink_2048_1536/B56ZeHwTjJGQAo-/0/1750329282742?e=1753315200&v=beta&t=YOztFdDZMO_HocXIxvWh440pKVT_sbtpTexKuIE69U8

#AmazonQCLI