Keywords: Prompt Engineering, AI Coding Assistant, Generative AI, Web Game Development, HTML Canvas, MediaPipe, JavaScript Game, AI-Powered Development, Flappy Bird Clone, Gemini
Have you ever had an idea for a game but dreaded the thought of starting with a blank file? What if you could direct a coding expert to build it for you, right in front of your eyes? That’s essentially what it’s like to build with a modern AI.
This isn’t a story about an AI replacing a developer. It’s a story of a powerful collaboration. I played the role of director, and my partner, an AI, was the master coder. Our goal: to create a fully functional web game controlled by hand gestures. Our hero: a ridiculously cute, flying axolotl.
This is the story of Flappy Axolotl, built prompt by prompt.
Phase 1: The Spark of an Idea (The First Prompt)
Every great project starts with a single idea. Instead of writing <!DOCTYPE html>, my first step was to write a prompt. The key is to be clear about your goal but broad enough to give the AI creative freedom.
My first prompt:
“Create a ‘Flappy Bird’ style game that runs in a single HTML file. Instead of clicking, it should be controlled by the player’s hand gestures using their webcam and the MediaPipe Hand Landmarker library.”
This initial prompt was the foundation. It told the AI the what (a Flappy Bird game), the where (a single HTML file), and the how (webcam hand control). In minutes, the AI generated the entire boilerplate: the HTML structure, the JavaScript game loop, and the complex code needed to integrate Google’s MediaPipe for hand tracking.
It worked. It wasn’t pretty—the “bird” was a black square, and the “pipes” were green rectangles—but the core mechanics were there. The game was alive!
Phase 2: From Boring Square to Adorable Axolotl
The square had to go. I wanted a character with personality, something unique and fun. I also wanted to avoid the hassle of managing external image files.
My next prompt:
“Instead of a bird, I want the player character to be a cute axolotl. Please draw it directly onto the HTML canvas using JavaScript, so we don’t need external images. Make it pink, with a happy smile, big eyes, and its signature external gills.”
This is where the magic of iteration comes in. The AI didn’t just understand the request; it translated “cute axolotl” into canvas API commands. It drew ellipses for the body, arcs for the smile, and a series of smaller shapes for the iconic gills.
The result was a charming, programmatically drawn hero for our game. We had our Flappy Axolotl!
Phase 3: Fine-Tuning the Gameplay with Gestures
With our hero ready, it was time to refine the game’s logic and controls. A simple “finger up, finger down” mechanic was good, but real interaction requires more nuance.
First, the pause feature felt clunky. The AI had initially used a “Thumbs Up” gesture to both start and pause the game, which was confusing.
My prompt for a better UX:
“The pause logic is confusing. Let’s change the pause/resume gesture to a ‘Peace Sign’ and keep the ‘Thumbs Up’ only for starting the game.”
The AI immediately understood the geometric difference between the two gestures. It modified the hand-tracking code to check the positions of the finger landmarks. In simple terms, it implemented this logic:
- Peace Sign: Are the tips of the index and middle fingers extended up, while the ring and pinky fingers are curled down? If yes, toggle the pause state.
- Thumbs Up: Is the thumb tip pointing up while the other four fingers are curled down? If yes, start the game.
Next, I wanted the game to be more challenging over time.
My prompt for dynamic difficulty:
“Let’s make the game get faster as the player scores points. For every 10 points, increase the pipe’s movement speed and make the pipes appear more frequently.”
This prompt turned a static game into a dynamic challenge, all without me having to manually write the if (score % 10 === 0) logic. The AI handled it perfectly.
Phase 4: The Debugging Dance—AI as My Partner
No development process is complete without bugs. This is where having an AI partner truly shines.
The first bug: The game got faster after every reset. It was unplayable after the second try. I was stumped.
My debugging prompt:
“I found a bug. After I lose all my lives and restart the game, it runs twice as fast. What is the issue in the code?”
The AI’s diagnosis was brilliant. It explained that the old gameLoop was never stopped when the player lost. Restarting the game was creating a new game loop on top of the old one, causing everything to run twice. It provided the exact line to remove to fix the issue.
The second bug: The game looked terrible on my phone. The axolotl was gigantic and the pipes were impossible to dodge.
My responsiveness prompt:
“The game display does not adapt to different screen sizes. It’s unplayable on a cellphone. How can we improve the code to make it responsive?”
The AI explained the core problem: I was using fixed pixel values. It then refactored the entire codebase to use a dynamic scaling factor. It established a base resolution and made every element—the bird’s size, font sizes, pipe widths, even movement speed—relative to the current screen size. It was a professional-level architectural fix prompted by a simple, high-level request.
Phase 5: The Final Polish—An Expert Code Review
With the game working and responsive, it was time for one last check.
My final prompt:
“Please review the entire code thoroughly. Act as an expert code reviewer. Look for any remaining bugs, performance issues, or logic errors that could affect gameplay.”
The AI’s review was humbling. It found issues I had completely missed:
- A Memory Leak: The array of decorative background bubbles was never cleared when the game reset, causing performance to slowly degrade over many sessions.
- A Scoring Flaw: The scoring logic was too generous. A point was awarded the moment the bird’s tail passed the pipe’s entrance. The AI corrected it to award the point only after the bird’s nose had safely passed the pipe’s exit—a much fairer system.
It fixed these issues, added clarifying comments, and presented a final, polished script.
Conclusion: You’re the Director
From a single sentence to a complete, responsive, and fun web game, this entire project was a conversation. Prompt engineering isn’t about finding one “magic” prompt; it’s an iterative process of directing, refining, and collaborating with a powerful tool.
The AI didn’t just write code; it acted as a partner, a debugger, and an expert consultant. It allowed me to focus on the creative vision—the “what”—while it handled the complex implementation—the “how.”
So, what will you build? The tools are more accessible than ever. All you need is an idea.
Try the game yourself or check out the final code here! Or simply scan the QR code:
Leave a Reply