Tuesday, 8 April 2025

Throwback to Minesweeper by Google Gemini

Okay, I still can't help myself - here's a fully functional Minesweeper game implementation, coded in less than 2 minutes, no issues one-shot, by Google Gemini. Granted, it's been years since I played this game!

Play here

Code is here

Mobile friendly version here


Just imagine - a game developed by AI in less than 5 minutes - it's amazing. Seed for imagining the future possibilities...

Throwback to Windows Disk Defrag and MSDOS Norton Antivirus by Google Gemini

So I couldn't help myself - getting Gemini to build and bring back some memories of classic apps from the past, this time Microsoft's disk defrag tool. I remember spending hours using this tool, just watching the blocks move was so satisfying!

Norton Antivirus - created one shot, worked first time. Here's the prompt for nortonGPT, source code on github.

I'm going through a phase of nostalgia, thinking about the classic tools and applications I used in the 90s and 2000s. Can you help me create a simulation of the classic MSDOS antivirus program for Norton Antivirus? The simulation must run for 2 minutes - it should show scanning the hard disk (simulated) but referring to actual files on local disk, using the classic progress indicator of a spinning "\-/-/" sequence, and simulating some viruses and quarantining effects. Implement the simulation as a single page web application that can be served on any browser.



Windows Defrag - took 5 iterations - less than 30 minutes to generate. Still can be improved but the idea is to show what can be done (and the fun that can be had) with these new AI coding assistants!

Monday, 7 April 2025

Summarizing the journey of co-creating Pacman game with Gemini AI

I asked Gemini to summarize our interaction journey in building the pacman game. Roughly 6 hours of my time well spent in learning how to use this powerful piece of technology! I can definitely say the tech has come a long way - not much hallucinating, very large input windows, did not run out of memory, did not lose context, did not run out of tokens, session did not expire... and even though I am a paid subscriber, I got the same experience using the free version from Google's AI studio! This is unbelievable!


Our Pac-Man Project: A Development Journey

This post summarizes the collaborative and iterative process of building a classic-style Pac-Man game using HTML, CSS, and JavaScript, culminating in a functional tile-based version and a detailed tutorial explaining its mechanics.

Goal: Create a fully functioning, static Pac-Man game suitable for a webpage or blog.

(Estimated Time: This collaborative project spanned numerous iterations. While AI interaction time differs from human development, the back-and-forth debugging, code generation, and refinement represent an estimated equivalent of 4-6 hours of focused development effort.)

(Approximate Timeline & Key Stages)

  1. Initial Request & Pixel-Based Attempt:

    • Prompt: User requested a "fully functioning classic style pacman game that can be served in a static webpage...".

    • Action: I generated the first version (pacman_game_v1) using HTML Canvas and JavaScript, aiming for pixel-based movement for smoothness.

    • Outcome: User reported issues: "not working, not interactive, there is no gameplay".

  2. Debugging the Pixel-Based Version:

    • Prompt: User reported Pac-Man stuck in walls, ghosts making one move and stopping, game stalling after first key press (with screenshots).

    • Action: Multiple attempts were made to refine the initialization, game loop activation, movement logic (movePacman), and especially the collision detection (canMove) in the pixel-based version. Collision detection with pixel-perfect movement proved very tricky to get right remotely.

    • Outcome: Persistent issues with characters getting stuck indicated the pixel-based approach was too fragile to debug effectively in this environment.

  3. Strategy Shift: Tile-Based Logic:

    • Prompt: User suggested alternatives (WASM), I proposed simplifying to a tile-based system first. User agreed: "ok, let's give javascript one more try!".

    • Action: Created a new version (pacman_game_tile_based) from scratch, focusing on grid coordinates, discrete tile-to-tile movement, and simplified collision checks (isPassable).

  4. Debugging the Tile-Based Version - Core Mechanics:

    • Issue: User reported a "black screen with some text", worse than before.

    • Action: Identified and fixed an initialization error where the maze was drawn before its data (dynamicMaze) was ready.

    • Issue: User reported Pac-Man still stuck (with screenshot).

    • Action: Refined movePacman logic for input buffering.

    • Issue: User reported Pac-Man still stuck, drawn inside a wall (with screenshot). User asked about starting coordinates relative to wall.

    • Action: Realized Pac-Man's initial gridY was set to 17, which was a wall tile in mazeLayout1. Corrected start gridY to 16.

    • Issue: User confirmed Pac-Man moved but reported the tunnels weren't working visually – looked like solid walls blocked entry (with screenshots).

    • Action: Verified mazeLayout data did have paths (5) leading to the tunnel. Changed drawMaze to explicitly draw paths black, then pink for clarity upon user request.

    • Issue: User insisted entry was still blocked by a wall before the edge, providing specific coordinates and maze analysis ("No, you are in error...").

    • Action: Acknowledged user was correct – I had missed blocking walls (1) in the mazeLayout data itself preventing access to the tunnel path tiles. Corrected the mazeLayout data for levels 1, 2, and 3. Removed pink path drawing.

    • Issue: User reported unresponsive keys ("My last gripe...").

    • Action: Refined input buffering logic in movePacman to only clear the buffer after a turn was successfully applied, making it remember intended turns.

  5. Debugging Tile-Based Version - Ghost & Game Logic:

    • Issue: User reported only one ghost leaving the pen, others stuck; eaten ghosts not respawning correctly.

    • Action: Identified that the initial maze layout blocked upward movement for some ghosts in the pen. Corrected mazeLayout above the pen. Implemented staggered ghost exit logic using gameSteps and canLeavePen flags. Modified respawn logic to allow immediate exit attempts. (This included fixing the flawed Level 3 maze pen).

    • Issue: User reported ghosts getting stuck again after Pac-Man loses a life.

    • Action: Realized the gameSteps counter wasn't being reset on life loss, causing all ghosts to get permission to leave simultaneously. Added gameSteps = 0; to resetPositionsAfterLifeLost.

    • Outcome: User confirmed basic mechanics seemed functional ("excellent. I think we are getting close...").

  6. Adding Features:

    • Prompt: User asked for missing key features.

    • Action: Identified Bonus Fruit. Implemented fruit logic (appearance based on dotsEaten, timer, collection, drawing).

    • Issue: User reported fruit appearing inside a wall.

    • Action: Corrected the FRUIT_SPAWN_TILE coordinates.

    • Outcome: User confirmed fruit worked. User asked for multiple levels and music.

    • Action: Added multiple levels (storing layouts, modifying game flow). Deferred music request.

    • Issue: User identified flawed Level 3 ghost pen design trapping ghosts ("haha, I'm really having fun...").

    • Action: Corrected mazeLayout3 pen entry walls.

    • Issue: User reported subsequent version was broken ("Nothing is loading").

    • Action: Reverted code back to the last known good state requested by the user (the version incorporating the fix for resetting ghost timers on life loss).

  7. Documentation:

    • Prompt: User requested documentation in the form of a blog post/tutorial for students.

    • Action: Generated the Markdown tutorial (pacman_tutorial_blog_post).

    • Prompt: User requested conversion to publishable HTML.

    • Action: Converted the Markdown to a single HTML file with embedded CSS (pacman_tutorial_html).

    • Prompt: User requested FAQs be added to the tutorial.

    • Action: Added FAQ section to the Markdown tutorial artifact.

  8. Final Summary Request:

    • Prompt: User requested this summary, including timeline and prompts.

    • Action: Generating the initial summary.

    • Prompt: User requested adding estimated time.

    • Action: Added time estimate to the summary.

    • Prompt: User requested adding LLM statistics.

    • Action: Adding this section now.

Notes on the AI Collaboration & Model:

This project was developed collaboratively with an AI assistant based on Google's Gemini models. Here are a few points regarding the AI's capabilities relevant to this project:

  • Context Window: Models like the one used here often have large context windows (the amount of previous conversation and code they can "remember" and consider). This capability, ranging from tens of thousands to potentially over a million tokens (pieces of words), was crucial for maintaining consistency and iterating on the code across multiple turns and complex debugging steps. However, the exact amount of context used in this specific session isn't tracked.

  • Code Generation: The AI generated substantial amounts of HTML, CSS, and JavaScript code. The final baseline game artifact (pacman_game_tile_based) contains roughly 750-800 lines of code (including HTML structure, CSS rules, and JavaScript logic). This doesn't count the code generated in earlier, discarded versions or the separate documentation artifacts.

  • Iterative Refinement: The process heavily relied on the AI's ability to understand bug reports (often accompanied by screenshots analyzed via multimodal capabilities), analyze existing code, identify potential errors, propose fixes, and generate updated code versions incorporating those fixes.

Challenges & Learnings:

  • Debugging complex interactions (collision, state timing) without direct execution environment access is challenging and requires careful logic tracing and clear user feedback.

  • Visual feedback (screenshots, explicit drawing changes like the pink tunnel) is crucial but can sometimes be misinterpreted if the underlying data or logic is flawed (as seen with the tunnel entry walls).

  • Clear communication and persistence from the user were essential in identifying subtle bugs (like the maze layout errors and start position).

  • Iterative refinement is key – starting simple (tile-based) often leads to a working solution faster than tackling complex approaches (pixel-based) immediately. Fixing one bug can sometimes reveal or cause another!

Final Artifacts:

  • Game Code: pacman_game_tile_based (specifically, the version titled "Pac-Man Game (Tile-Based - Life Loss Restart Fix)" which was established as the baseline before documentation).

  • Tutorial: pacman_tutorial_html (HTML blog post format explaining the game code).

This covers the main points of our collaboration on this project! It was a great example of iterative development and debugging facilitated by AI.