ChatGPT

OpenAI's Revolutionary Language Model.

How to Create A Web Game In Seconds With ChatGPT?

A deep dive into building a web game without coding thanks to ChatGPT

When ChatGPT came out at the end of 2022, It caused a huge surprise for millions of people around the world due to its capabilities.  I experienced the rise of it firsthand: I have personally seen the reactions of people using it and have had numerous interactions with GPT. For some people, It may even sound surreal to build a game with ChatGPT without writing code, but it is possible now.

In case you have never heard it before, ChatGPT is a super powerful AI tool created by OpenAI, a company founded in San Francisco in late 2015 by Sam Altman, Elon Musk, and others. We highly recommend taking a look at ChatGPT 101 post if you are a newbie.

In this post, we are going to build a javascript game without writing a single piece of code. How could this happen? We are going to get some help from ChatGPT! If you think that some jobs may not be necessary for the future after completing reading this post, it is completely understandable.

In Part 2 of this series, I demonstrate how to publish the game created with ChatGPT on the internet so that anyone can access and play it. This way, you can share your AI-coded game with your friends and have a great time.

Finally, It is better to have some working knowledge of Javascript for sure. However, even if you are not familiar with it or are a complete beginner, you should still be able to follow along with most of this post. And this is what ChatGPT is great at.

How to Build A Web Game With ChatGPT

It is going to be a pretty simple game where a robot moves and drops bombs into the creatures below it. If the creatures touch the bombs they will disappear. I believe that this example will give you hints about things that you can create with this super-powerful AI.


Contents

This is the first part of a two-part series. The following topics will be covered in this post:

  • 1. Project Overview/Structure: An overview of the project at a high level.
  • 2. Interaction with ChatGPT: We will describe our desired game to ChatGPT and implement the code it generates.
  • 3. Testing the code: We will test our game, make adjustments, and improve its appearance.

As mentioned previously, we covered publishing this game on the internet in Part 2.

1. Project Overview/Structure

I used the VSCode editor, but you can use any editor you prefer. I also recommend installing the Live Server extension on VSCode to easily test the application.

To run this application, we only need the index.html and index.js files. This is what my project structure looks like:

example-chatgpt-game/

index.html

index.js

I created a new folder called “example-chatgpt-game”, opened it in VSCode, and inside the folder, I created two new files called “index.html” and “index.js”.

creating default structure for chatgpt game in the vscode to build a game with chatgpt

Now, we need a default HTML structure inside the index.html file. We could obtain this from ChatGPT, but to make things easier I just added it using a code snippet

adding default structure in the index.html file using code snipper

To make a connection to the index.js file, we need to add the following piece into the index.html file right under the closing body tag (</body>)

<script src="index.js"></script>
adding index.js connection in the index.html file

2. Interaction with ChatGPT

We will now establish a connection with ChatGPT and request the desired code. First login to ChatGPT.

For anyone interested, I have included the first prompt I used below.

write me a javascript game when the robot moves and drop bombs, don’t use HTML, give me game code in parts

asking chatgpt to write a javascript game

It began writing code and explaining each part and the purpose of its use.

chatgpt first response for javascript game

I simply copied and pasted the code into the previously created index.js file. All that is required is to copy and paste the code.

pasting code into the index.js file to build a game with chatgpt

By asking ChatGPT to provide the code in small chunks, I am able to easily copy and paste it into the correct file. This makes my job easier.

chatgpt writing code for movement controls in the game

Note how it includes documentation for each piece of code it writes. It is impressive.

chatgpt continuing to write code for the game

It has moved on to Part 4. I continue to copy and paste the code as necessary.

chatgpt writing a javascript game, part 4

At this point, ChatGPT has stopped. I notice that there is a missing section of code and request that it continue from Part 5.

chatgpt writing a javascript game, part 5

It seems that ChatGPT has completed its task. Before proceeding to view the result, ensure that all the provided code has been copied into the index.js file.

chatgpt writing a javascript game, part 5(continued)

3. Testing the code

To test the code that has been written so far, I plan to use the VSCode Live extension. This extension allows the application to be run on a local server. Once the extension is installed, you can right-click the index.html file and select “Open With Live Server” to launch it. It makes our life easier.

testing the game using vscode live server extension

When I perform that action, my application opens in the browser and I see a red square that can be moved in any direction using the arrow keys on the keyboard. I can hear your voice stating that this doesn’t look like a game. I understand but don’t lose hope yet as it has a lot of potential, as you’ll soon see

a gif of viewing the game written so far in the browser


Therefore, I decided to provide ChatGPT with feedback that the game is not fully finished. I mentioned to it that bombs should fall down.

asking chatgpt to add a functionality in the game

It quickly receives and processes my feedback, making some adjustments to the code.

chatgpt making adjustments on the code as desired

Okay, that makes sense. However, I sense a problem with the code, known as a “code smell”, which refers to poor or misguided programming that becomes difficult to understand as it grows in size. Therefore, I provide the following additional feedback:

asking chatgpt for a code improvement

After a while, it stops surprising you with its capabilities. What I want you to consider is that it is able to make these types of adjustments or code improvements if you desire. Experienced developers will understand my excitement about this

As mentioned, it made the change promptly and I followed suit by copying the provided code and pasting it into the index.js file as necessary.

I will now test it again.

A gif showing the added functionality of the game

Alright, it now appears to be functioning properly. However, there are still some missing elements in the game. It would be more interesting if there were creatures that I could hit. Therefore, I request ChatGPT to add some chickens to the game.

asking chatgpt for adding chickens in the game
chatgpt's response of adding chicken in the game
chatgpt's response of adding chicken in the game part2
chatgpt's response of adding chicken in the game part3


Once more, I fulfilled my task by copying and pasting the code into the index.js file. Afterward, I test it again.

a gif showing the game in the browser with added chickens

I would like for the game to have more visual appeal. Therefore, I request that the AI make the chickens have randomly assigned colors and varying speeds

asking chatgpt for improving visual appearance of the game
chatgpt response for improving visual appearance of the game
chatgpt response for improving visual appearance of the game part2

After implementing this code into my project, I ended up with this.

a gif showing the game in the browser with added chickens varying speeds and colors


I noticed that the so-called chickens do not disappear when hit. Therefore, I request that this be corrected.

asking chatgpt for making chickens in the game to disappear when they hit
chatgpt response for making chickens in the game to disappear when they hit
chatgpt response for making chickens in the game to disappear when they hit part2

I believe that it is improved now.

a gif of showing the written game in the browser


After verifying that the game is functioning properly, I spend time with ChatGPT improving the appearance of the game.

asking chatgpt to improve visual appearances of the characters in the game
asking chatgpt to improve visual appearances of the characters in the game part2
a gif showing the game with improved  visual appearance


I test the application and continuously provide feedback to it.

asking chatgpt for making adjustments on the visual appearances
asking chatgpt for making adjustments on the visual appearances part2

You are aware that directing ChatGPT for coding is highly effective. You can utilize this method as much as desired.

Upon completing the final modifications, I ended up with the following game.

a gif of showing final version of the game


This game has ample room for growth and evolution. One possibility is to introduce a scoring system that tallies the number of chickens struck. You can also implement a timer feature, allowing players to race against the clock to complete the game. Alternatively, you could consider adding rival players to the mix for a more competitive experience. I am leaving that up to you. Simply communicate your ideas to ChatGPT and take the necessary steps to bring them to fruition.

Conclusion

Congratulations! You have successfully created a browser game with the help of ChatGPT, even if you have no programming experience.

While this is a simple example, it illustrates the potential for growth and improvement. The possibilities are endless as long as you have the support of AI.

Note that ChatGPT is not only limited to building web games. There are a lot of ways that ChatGPT can help you.

This technology can enhance your code and add new features based on your preferences, and can even provide explanations for each aspect of the code if desired. I believe that even senior developers would take advantage of this technology

In Part 2 of this series, we discussed how to publish this game on the internet for free. Do not forget to take a look at that.

Thanks for reading!

Published by

3 responses to “How to Create A Web Game In Seconds With ChatGPT?”

  1. I am following your content with interest. Congratulations for your work.

  2. I would love to see if you can code up a mobile phone app with chatgpt

  3. Adauto C. Santos Avatar

    It would be interesting to test ChatGPT game building mobile phone app to address risk management in schools.

Leave a Reply