How to make a snake game with ChatGPT

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?

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:

Make a snake game in javascript.

You will see ChatGPT respond with some HTML code and javascript code. (Interestingly, it will decline to offer a code if you said “Generate” instead of “Make” in the request.)

Sometimes, you would see ChatGPT’s response ends with the javascript code. This suggests the code is incomplete, as ChatGPT likes to say something to explain the code to wrap up the response.

Respond with the prompt “continue” to let it finish.

Continue.

Step 2: Putting the code together

Use the online coding platform Replit to run the code. Visit this link and sign up for an account if you don’t have one.

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
• script.js
• style.css

The file 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.

Take note on the name of the javascript file ChatGPT generated in the HMTL code. It is on line 13 above and reads snake.js.

Copy and paste the javascript code

Next, click on the file script.js on the left panel.

Rename the javascript file to the name that ChatGPT used. It is snake.js in my case. Yours could be different.

Copy the javascript code from ChatGPT. Paste the code to the empty javascript file. If ChatGPT’s javascript code is split into two responses, make sure you snitch them back together correct. The split can happen in the middle of a line. So great care needs to be taken to put them back together in one piece.

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.

Additional changes

Correcting mistakes

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.

Adding scores

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.

ChatGPT will give you a new javascript code with score added. It may “forget” to give you the corresponding HTML code. So ask

What's the html code?

Now, copy and paste the javascript and HTML code to Repl to test the new 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.

Conclusion

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.