Amazon Q CLI: AI Game Dev (Whack-a-Mole)

Whacking Moles with AI: My Adventure Building a Game with Amazon Q CLI

The moment I saw the "Build Games with Amazon Q CLI" challenge, I was intrigued. The premise? Use Amazon's generative AI-powered command-line assistant, Amazon Q CLI, to help build a game. As a developer always keen to explore new tools, especially those involving AI, I jumped at the opportunity. My game of choice? The timeless classic: Whack-a-Mole!

Why Whack-a-Mole?

I chose Whack-a-Mole for a few reasons:

Classic Appeal: Everyone knows it, and it's instantly fun.
Manageable Scope: The core mechanics are straightforward, making it feasible for a challenge-focused project.
Clear Visuals: It translates well to a web interface.

My vision was a clean, responsive version of the game with a scoring system, a timer, and perhaps a little twist.

The Toolkit: HTML, CSS, JavaScript, and Amazon Q CLI

The game itself would be built with the trusty trio of web development:

HTML (index.html): To structure the game elements – the grid of holes, score display, timer, and buttons.
CSS (style.css): To bring the game to life visually, styling the moles, holes, and overall interface.
JavaScript (script.js): The brains of the operation, handling game logic, mole appearances, scoring, and timing.

And the special ingredient? Amazon Q CLI. I envisioned using it as a coding companion – to brainstorm ideas, generate boilerplate code, suggest solutions to tricky parts, and accelerate the overall development.

The Development Journey: Prompting My Way to a Playable Game

Here’s a glimpse into how Amazon Q CLI could have assisted in building this Whack-a-Mole game:

1. Initial Setup and Brainstorming:

The challenge encourages starting a chat session with Amazon Q CLI. My first interactions might have been to get the ball rolling:

/q suggest ideas for a simple web-based game using HTML, CSS, and JavaScript. (Even though I picked Whack-a-Mole, this could be a starting point for others).
/q provide a basic HTML structure for a Whack-a-Mole game with a 3x3 grid.

This could give a foundational index.html layout to build upon, including divs for the game grid, score, and timer.

2. Crafting the Game Logic with JavaScript:

This is where Q CLI could shine. I approached the JavaScript in logical chunks:

Game State Variables: I needed variables for score, timeLeft, game timers, etc.
- Possible Q Prompt: /q what are the essential JavaScript variables for a Whack-a-Mole game?
Initializing the Game (init()): A function to set up the initial state.
- Possible Q Prompt: /q write a JavaScript function to initialize a Whack-a-Mole game, resetting score and timer.
Starting the Game (startGame()): This function would kick things off.
- My startGame() function resets the score and time, disables the start button, hides the game-over screen, starts the countdown, and begins the mole-popping frenzy.
- Possible Q Prompt: /q generate a JavaScript function to start a game timer that counts down from 30 seconds and calls an endGame function when it reaches 0.
Making Moles Appear (popMole()): The heart of the game! This involved:
- Selecting a random hole (getRandomHole()).
- Deciding a random time for the mole to be visible (getRandomTime()).
- Adding a class to make the mole "pop up."
- A little extra: I added a 10% chance for a "bonus mole" that's worth more points!
- Possible Q Prompt: /q create a JavaScript function that randomly makes a 'mole' element visible in one of several 'hole' elements for a random duration. How can I ensure the same hole isn't picked twice in a row easily?
Whacking a Mole (whack()): Handling the click event on a mole.
- This function checks if the clicked mole is "up", adds to the score (10 for regular, 20 for bonus), and makes the mole "whacked."
- Possible Q Prompt: /q write a JavaScript event handler for a click on a mole. If clicked, it should increase the score and visually change the mole.
Ending the Game (endGame()): Clearing timers and showing the final score.
- Possible Q Prompt: /q how do I properly clear setInterval and setTimeout timers in JavaScript when the game ends?

3. Styling with CSS:

While I primarily focused on JavaScript logic for Q CLI assistance, one could also ask for CSS snippets:

Possible Q Prompt: /q suggest CSS to make a div look like a mole popping out of a hole.
My style.css includes styles for the game grid, the holes, the different states of the moles (.up, .whacked, .bonus-mole), and even a custom cursor that looks like a hammer (added via custom-cursor div and JavaScript for positioning).

4. Adding Special Touches:

Bonus Moles: The bonus-mole class and logic in popMole() and whack() add an extra layer of engagement. This was a fun addition where Q CLI could help refine the probability logic.
Custom Cursor: To enhance the "whacking" feel, I implemented a custom cursor that only appears over the game grid.
- Possible Q Prompt: /q how can I create a custom cursor using an HTML element that follows the mouse, but only within a specific game area?

My Experience with Amazon Q CLI

Integrating Amazon Q CLI (or envisioning its integration for this challenge) highlighted several benefits:

Speed: Getting boilerplate code for functions or HTML structures quickly can save a lot of typing.
Idea Generation: Even if you know what you want to do, Q CLI can suggest different approaches or remind you of best practices.
Learning: For newer developers, or those working with unfamiliar syntax, Q CLI can be a great learning tool by showing how to implement certain features.
Problem Solving: When stuck on a specific logical issue (e.g., "how to prevent the same mole hole twice"), Q CLI can offer potential solutions.

Of course, like any AI tool, the prompts need to be clear, and the generated code often serves as a strong starting point that might require further refinement and integration into the broader project.

Conclusion: Game On!

Building this Whack-a-Mole game was a fantastic experience, and seeing how Amazon Q CLI could assist in the process was truly insightful. It clearly demonstrates the potential of AI-assisted development to streamline workflows and help developers bring their ideas to life more efficiently. This project was a great motivator, and I’m thrilled with how the game turned out – it's simple, fun, and a testament to what can be built with classic web technologies and a little AI guidance.

Want to Build Your Own & Learn More?

Inspired by this project? I've put together a comprehensive DevOps Workshop Walkthrough on GitHub that guides you step-by-step through:

Setting up Amazon Q CLI.
Using Amazon Q CLI to help generate code for your own web game.
Deploying your game for free using Kinsta.
Details on how to participate in the AWS "Build Games with Amazon Q CLI" challenge and potentially score a free T-shirt!

➡️ Dive into the Workshop: https://github.com/sumamazaeem/amazon_q_cli_game_challenge_walkthrough

Check out my Whack-a-Mole game and its code:

Play the Game: https://amazonqcligame.sumamazaeem.com/
View the Whack-a-Mole Code on GitHub: https://github.com/sumamazaeem/amazon_q_cli_game

Why not try building your own game with Amazon Q CLI, perhaps using the workshop as your guide? You might be surprised at what you can create!

Site Terms, Privacy, and more.