ChatGPT can answer coding questions. The code sniplets it provide often works, saving you time of looking through the webpages. But can it code a whole game? In this post, you will learn how to use ChatGPT to make a fully functional snake game.
- What is a snake game?
- Creating a snake game
- Additional changes
- Some interesting reads
What is a snake game?
Snake is a classical computer action game. The player controls a snake that grows longer as it eats food, while avoiding obstacles and its own tail. You know what it is when you see it.
How to use ChatGPT to create this game? Let’s find out.
Creating a snake game
Step 1: Generating the code with ChatGPT
The instruction is tested with the free version of ChatGPT that uses GPT 3.5.
Start a new chat in ChatGPT. Put in the prompt:
Respond with the prompt “continue” to let it finish.
Step 2: Putting the code together
Create a new Repl
Click the +Create Repl button to create a new Repl.
Select the HTML, CCS, JS template.
You should see a coding editor like the one below. There should have three files listed on the File Explorer on the left panel.
index.html is already opened in the editor.
Copy and Paste the HTML code
Now copy the HTML code from ChatGPT and replace the whole content of
index.html with the HTML code from ChatGPT.
Below is a screenshot of mine. Your code can be slightly different because ChatGPT generates a different code each time.
Next, click on the file
script.js on the left panel.
snake.js in my case. Yours could be different.
If you don’t want to deal with this hassle, start a new chat and repeat all over again until you get ChatGPT to tell you the whole code in one response.
Step 3: Running the game
Finally, it’s the moment of the truth. Press the Run button to run the code.
You should see the snake game starts to run if ChatGPT’s code is correct.
But wait, you will find that although the game runs, you cannot control the snake!
Don’t panic. It’s because you are viewing the HTML page through the webview inside Repl.
Click on the right most button to open the page on a new tab.
Now you will see the game is fully playable! Below is the gameplay.
You can play this ChatGPT-made snake game here. Use arrow keys to control the snake.
Sometimes ChatGPT’s code may contain errors. You will find out when running it. It will either not run at all with an error message, or the game will not behave correctly.
If you encounter an error on a certain line, you can say
The code contains error on the line "[paste code of that line here]"
ChatGPT will provide a corrected version.
You may have noticed there’s no score displayed in the game. You can ask ChatGPT to modify the code and add scores by using the following follow-up response.
Modify the code so that it keeps score.
What's the html code?
For me, the code works the first try but the border wall is missing. So I asked
It works but the canvas has no border.
And ChatGPT provided me the HTML with the border wall.
You may encounter a different error. Modify the prompt above to describe the issue.
Here’s the final snake game with score added.
Here are my thoughts after using ChatGPT to create a snake game.
- ChatGPT is capable of generating correct codes for a simple game.
- It can make mistakes. You can ask it to correct or start over.
- The game can miss critical features. Likewise, you can ask it to add the features.
- Although it can generate code, you would still need some programming experience (or a good guide like this one…) to piece things together and run the code.
Some interesting reads
- Make a snake with GPT-4 – a Twitter thread on using GPT-4 (a more advanced version) to make a snake game.
- Another demo for snake game written by ChatGPT in another language.