Building an entire game from one ChatGPT Prompt
Lessons learned from trying to build a full game from a single ChatGPT prompt.
Recently I’ve been experimenting with creating small, discreet apps using ChatGPT. My most recent app was a stopwatch / timer app which can be customized to support different desk exercise routines I can perform while in a long Zoom/Teams/Google meetings and capitalize on this time to combat the brutal combination of aging and sitting.
For example, I could configure the timer to do 4,5,7 breathing or 4,4,4,4 breathing, or different exercises for back, neck, or any atrophying part of the body.
After searching around, I couldn’t find the timer with the functionality I needed so whipped up a ChatGPT prompt to create a simple web app I could run in my browser. After some tweaks I got the prompt to a point where it was listening properly and ‘Hey, Presto’ I now have an perfect timer app for me. I’ve been using it and it is helping me be healthier!
Timer App DONE! DONE! I wanted to set myself my next ChatGPT Prompt Challenge. To create a fully functional game from a single prompt.
The idea for the game came from a conversation with my nine year old son who told me he and a couple of his buddies had re-invented Tic Tac Toe, with Tic Tac toe Two.
The problem they had solved was fixing the two main problems with Tic Tact Toe:
- Problem 1: The first mover always has the advantage.
- Problem 2: Most games end up in a draw.
Now, I still don’t know if my son and his buddies are genius games designers in the making, or whether this idea was heavily inspired by an existing variation of Tic Tac Toe (there are many) but I thought it was awesome.
For the record: I’ve tried to find a variation of Tic Tac Toe like this on the web but not managed yet, so I’ve settled into the idea that I will be able to retire early while I leach off the profits from my son and his mates’ future success in the games industry.
Below is my experience trying to create a single prompt to create this game and some lessons learned along the way.
You can try out Tic Tac toe Two here.
Building Tic Tac toe Two, or TTT
Before I dive into creating TTT (the abbreviation is important), here is a brief overview of the game.
How TTT Works
In TTT the goal of the game is to form a row of 3 ‘T’s. Just like Tic Tac Toe, but with ‘T’s. The first player who does this wins.
Players can add the vertical part or the horizontal part of the ‘T’ in an empty square, or complete the ‘T’ by adding the missing part.
Players’ can’t complete the ‘T’ from the immediate last turn of the previous player, or this will always favor the first player to win.
Step 1: Writing the Prompt.
I had a lot of attempts at this to get it to a point where I thought I couldn’t improve the instructions any more. I left out some key rules and logic in the early attempts so updated the prompt accordingly. Again, my goal was to do this entirely via prompt engineering, so no hand coding stuff in the game.
Here is the final prompt.
Please create the following game for me. First I want you to read the instructions carefully. Once you have read them, wait for me to ask for either the HTML, CSS or JavaScript. When you provide the HTML, CSS or JavaScript provide the fully implemented code. Please provide the code only, and nothing else more such as descriptions about the code.
Game Title:
Tic Tac Toe Two
Game Theme:
variation of the popular Tic Tac Toe Two
Game Objective:
A two player game where players compete against each other to get a row (vertical, horizontal or diagonal) of fully-formed / completed ‘T’s
Game UI:
The game look-and-feel should be clean and bold.
The UI should be responsive and support mobile, desktop and tablet devices.
[Game Title] this title of the game in large, bold text.
[Game Summary] A short description of the game which displays the text in [Game Summary Text]
[Game Instructions] Instructions for the game which displays the text in [ Game Instructions Text ]
[Board]: A 3x3 tic tac toe board
[Player Label]. A Label displaying which player’s turn it is.
[Start Game Button]. A button to start or restart the game.
[Game Summary Text] Tic Tac Toe Two fixes two problems with the original Tic Tac Toe.Problem 1: The first mover always has the advantage. Problem 2: Most games end up in a draw.
[Game Instructions Text] Two players compete to form a row of three 'T's.Click 'Start Game' to begin.Click an empty cell to place a vertical or horizontal part of the 'T'. Click a partially completed cell to complete the 'T'. You can't complete a 'T' from the previous player's last turn. First player to get a vertical, horizontal or diagonal line of three 'T's wins.
GamePlay Logic:
[Player One] Starts First. [Player One] can add a vertical line (the vertical part of the ‘T’) or a horizontal line (the horizontal line of the ‘T’) in one of the [Board Squares]. If the square is empty, a prompt will appear asking if the player wants to add a vertical line or a horizontal line.
[Player Two]’s turn is next. [Player Two] can either complete a partially completed [Board Square] by clicking into it. If the [Board Squares] has a horizontal line, a vertical line will be added to complete the ‘T’. If the [Board Square] has a vertical line, a horizontal line will be added to complete the ‘T’ If the square is empty, a prompt will appear asking if the player wants to add a vertical line or a horizontal line.
[Player One] and [Player Two] continue adding new horizontal or vertical lines in empty grid squares, or completing ‘T’ in partially completed grid squares.
The player who first completes a row, either vertical, horizontal or diagonal wins.
There are two rules that need to be adhered to.
Rule 1. A square with a completed 'T' can’t be clicked again
Rule 2. A player cannot complete a T from the last turn. A player can complete a T from a turn before the last turn.
Game UI behaviour
When the game first loads, the [Board] is cleared, inactive meaning the players can’t click on any squares. [Player Label ] reads “Press Start to Begin”
When the [Start Game Button] is pressed, a new round begins. The [Game Board] has green borders and a light green background.
When it is player ones turn, [Player Label] shows ‘Player 1’ in red and the horizontal or vertical line added to the board is red.
When it is player twos turn, [Player Label] shows ‘Player 2’ in Blue and the horizontal or vertical line added to the board is blue.
When a player wins, [Player Label] shows which player has won.
When a [Board Square] is completed, the completed ‘T’ is green.
Technology: Web app with HTML, CSS and Javascript created in separate files.Step 2: Bug Squashing
Despite a beautifully crafted prompt, the game had issues. Sometimes Generative AI tools are like excited Labradors that miss the finer detail and run around in circles barking for a biscuit.
Here are some of the bugs I had to squash with follow up prompts.
UI Issues
The first issue was the grid was not displaying correctly. I had to try and describe what the issue was, but it worked and ChatGPT sorted the issue out. Note: I remembered later on that I could upload images of the UI issues, rather than describing them.
please fix the grid. the display has issues where the dark green border of the grid isn't wrapping around the squares on the right hand sideBehavior and Logic Issues
Some of my behavior and game logic prompts weren’t being followed correctly. Here is a few of my prompt fixes which will give you an idea of what the issues were. The result was either snippets of code or full HTML, JS or CSS which I had to cut and paste back into the game code.
Me
please fix the following issue: a player can click into a square before the game has started. this shouldnt be allowed. the game is started once the start game button is pressed.
Me
please fix the following issue. the start game button isn't doing anything
Me
please fix the following issue: when a player clicks into a partially completed cell the 'T' is not being completed. Remember to ensure this rule is followed: Rule 2. A player cannot complete a T from the last turn. A player can complete a T from a turn before the last turn.
Me
please fix this which hasn't been implemented in the game. when a player clicks into an empty board square, a prompt will appear asking if the player wants to add a vertical line or a horizontal line.
Final Tweaks
The game was starting to take shape, but added a few minor polishes in the UI.
Me
please fix so [Player Label] Is black when the game first loads, and changes color according to which players turn it isI did get into a prompt battle with ChatGPT to fix the formatting of the instructions. This is when I realized that I could upload pictures to describe what was wrong using the latest ChatGPT capabilities.
Final Thoughts
Some reflections on the process of creating a full game in ChatGPT (or other LLM of your choice).
Code-first vs Prompt-First.
There is a point where you need to diverge from your prompt to modifying code directly, in which case you move from a prompt-first to a code-first development paradigm. When this should happen is a judgement call relating to what which is the most efficient and effective approach. For simple apps like this, staying Prompt-first works to get a POC out the door.
Prompt engineering.
So far, I’ve been learning prompt engineering through lots of trial and error, and reading the odd article. I know I can become better at prompt engineering if I studied the science and art of it more and would likely have avoided the initial prompt interpretation errors with better prompting.
User Generated Apps
LLMs have revolutionized software development and made the craft accessible to anyone who can write in their native, natural language. This unlocks a new world of User Generated Apps where end users with no development skill can create their own apps to service their own needs. This is an exciting trend to watch: Code to Low Code to No Code to ChatGPT Make This Thing.
