Article summary
I wanted to see how far I could get programming a game with an AI chatbot, but with an additional constraint: inside my text editor, I could only use two keyboard shortcuts — copy and paste. While I could highlight sections to edit portions of the document, I wanted to never type anything directly into the editor. The goal? To create a functioning game inspired by a well-known classic, while testing the limits of AI code generation.
Setting the Rules
A well-known classic inspired the game I set out to generate. In this game, players take turns dropping colored pieces into a vertical grid, aiming to align four of their pieces in a row (horizontally, vertically, or diagonally) while blocking their opponent. But I wanted to push this concept further. I wanted the board to periodically rotate 45 degrees, causing the pieces to “fall” into new positions. To make things even more interesting, I limited myself to 30 minutes to see how quickly this project could come together.
The Experiment
I began by prompting the AI to build a lightweight website where two players could take turns dropping pieces into a grid. This first iteration focused on the core gameplay mechanics: selecting columns, stacking pieces, and detecting winning combinations. And it worked — the game functioned perfectly fine for the classic gameplay.
To introduce the board rotation mechanic, I added a button to rotate the board 90 degrees. My hope was that, by slowly iterating on the gameplay, I could increase the game’s capabilities. Initially, the pieces would rotate with the board, but they wouldn’t “fall” and were sticking to the sides of the board. I refined my explanation to the AI, describing how pieces should fall due to gravity:
“Pieces are dropped in from the top of the board and fall until they reach the bottom or another piece. When the board rotates, the pieces should turn with the board and recompute their locations based on the new bottom.”
This explanation was enough for the chatbot to grasp the concept and the game now included a functional rotation button. I then adjusted the functionality. Now, the button triggered a rotation automatically, but only on a one-third chance at the end of a player’s turn.
The Challenges
While the gameplay was functional, the lack of animation made the experience feel static and the rotations of the board confusing. I wanted smooth CSS animations to visually represent the board’s rotation. This is where things got tricky.
The AI struggled to generate centered animations because the initial shape of the board was asymmetrical. Several attempts resulted in disorienting or completely broken animations. But, after multiple iterations, I got the chatbot to produce a smooth animation that clearly showed the board’s direction of rotation.
The next step was to implement 45-degree rotations. Unfortunately, this is where progress halted. Despite numerous attempts, the AI could not create meaningful logic for this feature. Most iterations resulted in half-rotations being animated, and then the board snapping back to its original position. I suspect that with more time to craft detailed explanations or by introducing the 45-degree concept earlier, I might have produced better results.
Programming a Game: The Outcome
Despite the limitations, I was impressed by how much I accomplished in just 30 minutes. By the end of the experiment, I had valid HTML, CSS, and JavaScript implementing a unique twist on a beloved classic game. Though the chatbot was great for generating functional code quickly, its limitations became evident in complex tasks like animations and unconventional game logic.