How To Code a Space Shooter Game Using ChatGPT
By Corporal Punishmenton 06/24/2024 |
Hey Geeks!
Have you ever wanted to create your own game but thought it was too complicated? Think again! I wanted to play around with the AI hype train and see how easy it would be to make a quick game, and I was super surprised. With a bit of HTML5 and the magic of ChatGPT, writing a game is easier than you might think. You just have to ask the right questions.
I will now share how I built an awesomely cheesy space shooter game without writing a single line of code myself, all with the assistance of AI.
Full disclosure: This is my first time doing a project of this type. Although I suck at it, I do have a background in code, so maybe some concepts of how to structure things together are more intuitive for me than the average Joe. However, I have never read the code or written a single line in this example. So I think anyone reading this now can do something similar or better. I only provided the AI with statements or questions for this project. I also used AI for all the images except the MajorGeeks logo and the Winner screen. (I wanted something animated) For that, I used Canva. I also used some sounds I found on the Inteweb for some panache!
One other tip. If you use ChatGPT for images, it will save the files as WebP images. You will need to convert them to jpg or png. For that, you can use the Online MajorGeeks WebP to Png tool to easily convert.
I chose to do the game in HTML5 because it's super easy to work with and share online; everyone with a PC has the tools, and you don't need a compiler. This means you can do this right now with what you have for free.
OK, so let's jump in......
What's ChatGPT?
For those of you who might not know, ChatGPT is a generative AI tool that you can use to write emails, documents, code—whatever. It's like having a super-smart coding buddy who doesn't get annoyed with too many questions. Developed by OpenAI, ChatGPT can help you write code, debug it, and even brainstorm ideas. You just ask questions or give instructions, and ChatGPT responds with helpful answers and the code snippets. We used ChatGPT here just because it's the top dog these days, but there are a number of engines out there that specialize in code, which would also be a good choice.
What's HTML5?
HTML5 is the latest version of HTML (HyperText Markup Language), the standard language for creating web pages and web applications. It's user-friendly and packed with cool features, making it perfect for building games. Once things are set, you typically have an index.html file to lay out your design and some Javascript underneath to run the code with all your assets (images and sounds). Don't worry about that stuff, though; AI will tell you what to do later.
What You Need to Get Started
Before we dive into the coding fun, here's a quick list of what you'll need:
A text editor: Notepad or Notepad++ are great choices.
A web browser: Edge, Opera GX, Chrome, Firefox, or any modern browser will do.
ChatGPT: Access it via OpenAI's platform or other AI engines that do code, like Gemini or Perplexity. Results will vary depending on the engine.
The Setup
We started by telling ChatGPT what we wanted to do.
"I want to make an HTML5 game that has a spaceship shooting alien ships that randomly fly around each hit is one point."
ChatGPT responded with the basic structure for our game with an HTML file to handle the canvas and audio elements and a JavaScript file for the game logic. This provided the foundation for our game. What's cool is ChatGPT spits out the code with a simple copy button and tells you what to call it. One file is index.html, and one is game.js. Just open Notepad and, paste the respective code into a new document, and save the file with the same name ChatGPT gives you. Put all of it in the same folder, and you are ready. Click the index.html file, and you are off.
You can see here that there is a ton of code (that I didn't have to type) and the first run was just white blocks, so that's no bueno, but it's a start. It worked right out of the gate! Super impressed. This is where the fun begins.
The Fun Part: Trial and Error with ChatGPT
One of the coolest parts of this project was the trial and error-process with ChatGPT. Each step involved asking specific questions, getting suggestions, implementing them, and then tweaking based on the results. You just rewrite the index.html file and game.js file with the new code each time.
When I asked it to do images or sounds, I gave it the names of each image and sound and then put those in the same folder so it was easy to keep track of. But ChatGPT knew exactly how to handle that and gave me new files to update.
I won't bore you with 100 screenshots and 1000s of lines of copied code. I will post all the questions I asked at the bottom and links to the project's first and last parts. But here are some sample questions asked with the results to give you an idea of how it went. After each question, you copy and overwrite your old index.html and game.js files.
Setting Up the Basics:
== Question: "I want to make an HTML5 game that has a spaceship shooting alien ships that randomly fly around each hit is one point."
== Result: ChatGPT provided the initial code structure, including the basic setup for HTML and JavaScript.
Adding Images and Sounds:
== Question: "Let's add an image to the spaceship called mg-logo.gif also add three images for the alien ships called 1.png, 2.png, and 3.png."
== Result: The code was updated to include these images, and placeholders for sound effects were added. Added sound eefects and images to the folder.
Implementing Collision Detection:
== Question: "Add collision detection so if the alien ship hits the spaceship the game deducts 10 points."
== Result: ChatGPT included collision detection logic, but initial implementation deducted 150 points due to a bug.
Debugging and Refining:
== Question: "It still sets the collision deduction to minus 150 instead of ten. Set a check for max collision damage that can only be 10 at maximum."
== Result: ChatGPT helped refine the collision logic to correctly deduct 10 points per collision.
Enhancing Gameplay:
== Question: "Increase the travel speed of the spaceship by 50% and decrease the penalty for an alien getting by the spaceship to -0.5 points."
== Result: The spaceship's speed was increased, and the penalty for aliens passing by was adjusted.
Preventing Bullet Spamming:
== Question: "I would like to limit the ability to spam bullets while strafing how can we do that?"
== Result: ChatGPT added a cooldown period between bullet fires, preventing spamming.
Increasing Challenge:
== Question: "Increase the bullet rate of fire by 50% and set the bullet cooldown time to 220 milliseconds."
== Result: The bullet firing rate was increased, making the game more challenging.
Graphics and Audio
Most of the game graphics were created using AI, which sped up the design process and allowed for quick iterations. The background music and sound effects added an extra layer of immersion to the game. For that, I found some worthy items at https://memesoundeffects.com/ and https://pixabay.com/music/search/space%20music/?genre=ambient
By the time I was done, the HTML file was much larger, and the game.js had gone from 83 lines of code to 235 (which I gladly did not have to type). All the assets were added correctly and notated, and the game was coming along nicely. Super sweet.
The Game!
It would be rather silly to talk about a game and code without letting you play the examples. Here is the 1st iteration that I mentioned above. There is very little to it, but it works.
Cheesy Space Shooter First Try
Here is the actual game that was completed in about two hours, including file-finding time. We could do so much more with it, but it was time to call it quits and move on to somethng else. Is it complete? No. Is it cheesy? Hell yeah! Click to try!
Cheesy Space Shooter Final
How?
Sometimes, it is easier to show than tell. So, if you have read this far and want to see what the process is as opposed to reading (#MeAlso), I made this video while making a Pong game to demonstrate.
Here are all the questions I asked during the process as promised. I am no prompt engineer, and the game was completed with about 10 questions. The rest was tuning, which still kinda sucks. Feel free to try them. The point, remember, is no code was ever written; it was just copied and pasted once Chat responded. I wasn't trying to make the best game ever, but I feel it is in the top 10 in cheesy.
1) I want to make an HTML5 game that has a spaceship shooting alien ships that randomly fly around each hit is one point.
2) Ok, let's add an image to the spaceship it will be called mg-logo.gif also add three images for the alien ships called 1.png, 2.png, and 3.png.
Add collision detection so if the alien ship hits the spaceship the game deducts 10 points.
3) Something is wrong and it doesn't display. Fix it.
4) If alien ship hits spaceship when you deduct 10 points also play the sound boom.mp3 and replace the alien ship image with boom.gif.
4) If an alien ship hits spaceship play the sound boom.mp3 and replace the alien ship image with boom.png when you deduct 10 points for the collision.
5) Something is wrong with the math only 10 points should be deducted on collision of spaceship and alien ship currently 150 points are deducted.
6) It still sets the collision deduction to minus 150 instead of ten. Set a check for max collision damage that can only be 10 at maximum. Also add the sound pew.mp3 each time you hit the space bar to fire from your spaceship.
7)Now if a spaceship shot hits an alien ship play the sound kaboom if the score reaches 50 stop the game and display the image winner.gif and play the sound clap.mp3.
8) Everything is good now when the game loads, first load splash.jpg as a loading screen hold the screen there until the user hits a space bar, then start the game.
5) When bullet hits an alien ship display boom.png when game loads play background music dead-space.mp3.
6) Ok, let's add a timer of 1 minute for alien ship 1 it is one point for alien ship 2 it is two points and alien ship 3 it is 3 points if an alien ship gets past you it is minus 0.5 points if time reaches zero end the game and display image gameover.png and continue to play dead-space.mp3 -- to restart the game hit the space bar.
7) When the game reaches a score of 50 but the time has not run out to zero you win. Display the winner.gif and sound clap.mp3 and end the game. Space bar to restart.
8) Stop the timer and stop the game if the user gets to a score of 50.
9) Something is wrong with the end of the game. I want it to stop if the score hits 50 and display the winner.gif and clap sound. I want it to stop if the time reaches 0 and display the gameover.png image.
10) Instead of space bar to restart the game make it the r key.
11) When a user loses and the game over screen is displayed also play the sound sad.mp3.
12) Increase the travel speed of the spaceship by 50%.
13) Increase the drop rate of alien ship 3 by 65%.
14) Increase the drop rate of the alien ships by 15%.
15) Increase the travel speed of the spaceship by 50% increase the drop rate of alien ships by 65%.
16) I am easily able to beat this game how could I make it more challenging?
17) Increase the penalty of a ship getting past you to 1.18)
Make the bullets red and the penalty for an alien ship to get by as -1.5 points.
18) I would like to limit the ability to spam bullets while strafing how can we do that?
19)Increase the speed that the spaceship can move side to side by 50% and decrease the penalty for an alien getting by the spaceship to -0.5 points.
20) Increase the bullet rate of fire by 50%.
Final Thoughts
Even though I have some coding experience, I have never actually coded in Java, which is really where all the game is done. ChatGPT handled all the coding while I focused on asking the right questions and implementing its suggestions, making the process 100 times more fun and creative. Just looking up how to implement all the functions of adding sound, speed, changes, images, and challenging levels may have taken a week or two of frustration. In this case, I asked ChatGPT to do it, and it did well. Leaving my brain free to work on the fun parts, beta test it, break it, and then offer fixing ideas. Ultimately, this experience showed me that ChatGPT will not put professional coders out of work any time soon. There are nuances from expertise that I don't think AI can match - if ever. But it clearly allows a user like myself to quickly get many of the main ideas out and pass them off for finishing to a professional, which I think will enhance creativity. Also, if you are so inclined, having AI as a coding partner can really speed up your learning curve on a new language or even how to start. I feel way smarter on Java than I did a few days ago.
So, if you've ever wanted to create your own game, give it a try. It's a riot, and I wish I had these tools back in my COBOL days. You might be surprised at what you can accomplish. If you make something, let us know and share it in the forums. I am sure people would love to see what you can create.
Let me know in the comments what you think and how I could increase the level of cheeseiness. Happy AI-assisted coding, Geeks!
comments powered by Disqus
Have you ever wanted to create your own game but thought it was too complicated? Think again! I wanted to play around with the AI hype train and see how easy it would be to make a quick game, and I was super surprised. With a bit of HTML5 and the magic of ChatGPT, writing a game is easier than you might think. You just have to ask the right questions.
I will now share how I built an awesomely cheesy space shooter game without writing a single line of code myself, all with the assistance of AI.
Full disclosure: This is my first time doing a project of this type. Although I suck at it, I do have a background in code, so maybe some concepts of how to structure things together are more intuitive for me than the average Joe. However, I have never read the code or written a single line in this example. So I think anyone reading this now can do something similar or better. I only provided the AI with statements or questions for this project. I also used AI for all the images except the MajorGeeks logo and the Winner screen. (I wanted something animated) For that, I used Canva. I also used some sounds I found on the Inteweb for some panache!
One other tip. If you use ChatGPT for images, it will save the files as WebP images. You will need to convert them to jpg or png. For that, you can use the Online MajorGeeks WebP to Png tool to easily convert.
I chose to do the game in HTML5 because it's super easy to work with and share online; everyone with a PC has the tools, and you don't need a compiler. This means you can do this right now with what you have for free.
OK, so let's jump in......
What's ChatGPT?
For those of you who might not know, ChatGPT is a generative AI tool that you can use to write emails, documents, code—whatever. It's like having a super-smart coding buddy who doesn't get annoyed with too many questions. Developed by OpenAI, ChatGPT can help you write code, debug it, and even brainstorm ideas. You just ask questions or give instructions, and ChatGPT responds with helpful answers and the code snippets. We used ChatGPT here just because it's the top dog these days, but there are a number of engines out there that specialize in code, which would also be a good choice.
What's HTML5?
HTML5 is the latest version of HTML (HyperText Markup Language), the standard language for creating web pages and web applications. It's user-friendly and packed with cool features, making it perfect for building games. Once things are set, you typically have an index.html file to lay out your design and some Javascript underneath to run the code with all your assets (images and sounds). Don't worry about that stuff, though; AI will tell you what to do later.
What You Need to Get Started
Before we dive into the coding fun, here's a quick list of what you'll need:
A text editor: Notepad or Notepad++ are great choices.
A web browser: Edge, Opera GX, Chrome, Firefox, or any modern browser will do.
ChatGPT: Access it via OpenAI's platform or other AI engines that do code, like Gemini or Perplexity. Results will vary depending on the engine.
The Setup
We started by telling ChatGPT what we wanted to do.
"I want to make an HTML5 game that has a spaceship shooting alien ships that randomly fly around each hit is one point."
ChatGPT responded with the basic structure for our game with an HTML file to handle the canvas and audio elements and a JavaScript file for the game logic. This provided the foundation for our game. What's cool is ChatGPT spits out the code with a simple copy button and tells you what to call it. One file is index.html, and one is game.js. Just open Notepad and, paste the respective code into a new document, and save the file with the same name ChatGPT gives you. Put all of it in the same folder, and you are ready. Click the index.html file, and you are off.
You can see here that there is a ton of code (that I didn't have to type) and the first run was just white blocks, so that's no bueno, but it's a start. It worked right out of the gate! Super impressed. This is where the fun begins.
The Fun Part: Trial and Error with ChatGPT
One of the coolest parts of this project was the trial and error-process with ChatGPT. Each step involved asking specific questions, getting suggestions, implementing them, and then tweaking based on the results. You just rewrite the index.html file and game.js file with the new code each time.
When I asked it to do images or sounds, I gave it the names of each image and sound and then put those in the same folder so it was easy to keep track of. But ChatGPT knew exactly how to handle that and gave me new files to update.
I won't bore you with 100 screenshots and 1000s of lines of copied code. I will post all the questions I asked at the bottom and links to the project's first and last parts. But here are some sample questions asked with the results to give you an idea of how it went. After each question, you copy and overwrite your old index.html and game.js files.
Setting Up the Basics:
== Question: "I want to make an HTML5 game that has a spaceship shooting alien ships that randomly fly around each hit is one point."
== Result: ChatGPT provided the initial code structure, including the basic setup for HTML and JavaScript.
Adding Images and Sounds:
== Question: "Let's add an image to the spaceship called mg-logo.gif also add three images for the alien ships called 1.png, 2.png, and 3.png."
== Result: The code was updated to include these images, and placeholders for sound effects were added. Added sound eefects and images to the folder.
Implementing Collision Detection:
== Question: "Add collision detection so if the alien ship hits the spaceship the game deducts 10 points."
== Result: ChatGPT included collision detection logic, but initial implementation deducted 150 points due to a bug.
Debugging and Refining:
== Question: "It still sets the collision deduction to minus 150 instead of ten. Set a check for max collision damage that can only be 10 at maximum."
== Result: ChatGPT helped refine the collision logic to correctly deduct 10 points per collision.
Enhancing Gameplay:
== Question: "Increase the travel speed of the spaceship by 50% and decrease the penalty for an alien getting by the spaceship to -0.5 points."
== Result: The spaceship's speed was increased, and the penalty for aliens passing by was adjusted.
Preventing Bullet Spamming:
== Question: "I would like to limit the ability to spam bullets while strafing how can we do that?"
== Result: ChatGPT added a cooldown period between bullet fires, preventing spamming.
Increasing Challenge:
== Question: "Increase the bullet rate of fire by 50% and set the bullet cooldown time to 220 milliseconds."
== Result: The bullet firing rate was increased, making the game more challenging.
Graphics and Audio
Most of the game graphics were created using AI, which sped up the design process and allowed for quick iterations. The background music and sound effects added an extra layer of immersion to the game. For that, I found some worthy items at https://memesoundeffects.com/ and https://pixabay.com/music/search/space%20music/?genre=ambient
By the time I was done, the HTML file was much larger, and the game.js had gone from 83 lines of code to 235 (which I gladly did not have to type). All the assets were added correctly and notated, and the game was coming along nicely. Super sweet.
The Game!
It would be rather silly to talk about a game and code without letting you play the examples. Here is the 1st iteration that I mentioned above. There is very little to it, but it works.
Cheesy Space Shooter First Try
Here is the actual game that was completed in about two hours, including file-finding time. We could do so much more with it, but it was time to call it quits and move on to somethng else. Is it complete? No. Is it cheesy? Hell yeah! Click to try!
Cheesy Space Shooter Final
How?
Sometimes, it is easier to show than tell. So, if you have read this far and want to see what the process is as opposed to reading (#MeAlso), I made this video while making a Pong game to demonstrate.
Here are all the questions I asked during the process as promised. I am no prompt engineer, and the game was completed with about 10 questions. The rest was tuning, which still kinda sucks. Feel free to try them. The point, remember, is no code was ever written; it was just copied and pasted once Chat responded. I wasn't trying to make the best game ever, but I feel it is in the top 10 in cheesy.
1) I want to make an HTML5 game that has a spaceship shooting alien ships that randomly fly around each hit is one point.
2) Ok, let's add an image to the spaceship it will be called mg-logo.gif also add three images for the alien ships called 1.png, 2.png, and 3.png.
Add collision detection so if the alien ship hits the spaceship the game deducts 10 points.
3) Something is wrong and it doesn't display. Fix it.
4) If alien ship hits spaceship when you deduct 10 points also play the sound boom.mp3 and replace the alien ship image with boom.gif.
4) If an alien ship hits spaceship play the sound boom.mp3 and replace the alien ship image with boom.png when you deduct 10 points for the collision.
5) Something is wrong with the math only 10 points should be deducted on collision of spaceship and alien ship currently 150 points are deducted.
6) It still sets the collision deduction to minus 150 instead of ten. Set a check for max collision damage that can only be 10 at maximum. Also add the sound pew.mp3 each time you hit the space bar to fire from your spaceship.
7)Now if a spaceship shot hits an alien ship play the sound kaboom if the score reaches 50 stop the game and display the image winner.gif and play the sound clap.mp3.
8) Everything is good now when the game loads, first load splash.jpg as a loading screen hold the screen there until the user hits a space bar, then start the game.
5) When bullet hits an alien ship display boom.png when game loads play background music dead-space.mp3.
6) Ok, let's add a timer of 1 minute for alien ship 1 it is one point for alien ship 2 it is two points and alien ship 3 it is 3 points if an alien ship gets past you it is minus 0.5 points if time reaches zero end the game and display image gameover.png and continue to play dead-space.mp3 -- to restart the game hit the space bar.
7) When the game reaches a score of 50 but the time has not run out to zero you win. Display the winner.gif and sound clap.mp3 and end the game. Space bar to restart.
8) Stop the timer and stop the game if the user gets to a score of 50.
9) Something is wrong with the end of the game. I want it to stop if the score hits 50 and display the winner.gif and clap sound. I want it to stop if the time reaches 0 and display the gameover.png image.
10) Instead of space bar to restart the game make it the r key.
11) When a user loses and the game over screen is displayed also play the sound sad.mp3.
12) Increase the travel speed of the spaceship by 50%.
13) Increase the drop rate of alien ship 3 by 65%.
14) Increase the drop rate of the alien ships by 15%.
15) Increase the travel speed of the spaceship by 50% increase the drop rate of alien ships by 65%.
16) I am easily able to beat this game how could I make it more challenging?
17) Increase the penalty of a ship getting past you to 1.18)
Make the bullets red and the penalty for an alien ship to get by as -1.5 points.
18) I would like to limit the ability to spam bullets while strafing how can we do that?
19)Increase the speed that the spaceship can move side to side by 50% and decrease the penalty for an alien getting by the spaceship to -0.5 points.
20) Increase the bullet rate of fire by 50%.
Final Thoughts
Even though I have some coding experience, I have never actually coded in Java, which is really where all the game is done. ChatGPT handled all the coding while I focused on asking the right questions and implementing its suggestions, making the process 100 times more fun and creative. Just looking up how to implement all the functions of adding sound, speed, changes, images, and challenging levels may have taken a week or two of frustration. In this case, I asked ChatGPT to do it, and it did well. Leaving my brain free to work on the fun parts, beta test it, break it, and then offer fixing ideas. Ultimately, this experience showed me that ChatGPT will not put professional coders out of work any time soon. There are nuances from expertise that I don't think AI can match - if ever. But it clearly allows a user like myself to quickly get many of the main ideas out and pass them off for finishing to a professional, which I think will enhance creativity. Also, if you are so inclined, having AI as a coding partner can really speed up your learning curve on a new language or even how to start. I feel way smarter on Java than I did a few days ago.
So, if you've ever wanted to create your own game, give it a try. It's a riot, and I wish I had these tools back in my COBOL days. You might be surprised at what you can accomplish. If you make something, let us know and share it in the forums. I am sure people would love to see what you can create.
Let me know in the comments what you think and how I could increase the level of cheeseiness. Happy AI-assisted coding, Geeks!
comments powered by Disqus
