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”.
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
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>
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
It began writing code and explaining each part and the purpose of its use.
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.
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.
Note how it includes documentation for each piece of code it writes. It is impressive.
It has moved on to Part 4. I continue to copy and paste the code as necessary.
At this point, ChatGPT has stopped. I notice that there is a missing section of code and request that it continue from 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.
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.
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
Therefore, I decided to provide ChatGPT with feedback that the game is not fully finished. I mentioned to it that bombs should fall down.
It quickly receives and processes my feedback, making some adjustments to the code.
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:
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.
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.
Once more, I fulfilled my task by copying and pasting the code into the index.js file. Afterward, I test it again.
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
After implementing this code into my project, I ended up with this.
I noticed that the so-called chickens do not disappear when hit. Therefore, I request that this be corrected.
I believe that it is improved now.
After verifying that the game is functioning properly, I spend time with ChatGPT improving the appearance of the game.
I test the application and continuously provide feedback to it.
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.
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!
Leave a Reply