How I Achieved to Create A Web Game In Seconds With ChatGPT

A deep dive into building a javascript game without coding

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.

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 we 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 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.

Table of Content

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. Let’s 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 potentials, 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 desire 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 and can be utilized as much as desired.

Upon completing the final modifications, I came 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. A timer feature could also be implemented, 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.

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.

Have questions? Are you feeling intimidated by the increased competition in the market due to ChatGPT’s support for developers? Leave a comment below.


Thanks for reading!

Published by

3 responses to “How I Achieved 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

%d bloggers like this: