Hi guys,. Did you know that ChatGPD can code? And did you know that you can create games with ChatGPT? Well, I’ve been trying all sorts of things with ChatGPT, and today I had this thought. If ChatGPD can code, why not try to use it to create a video game? Well, in this article, I’m going to find out if ChatGPD can help us create a web-based video game from scratch.
Also, I’m starting with very basic knowledge of coding, and I’ll be relying entirely on ChatGPD to guide me in creating this game. So buckle up, and let’s dive right in. So let me just ask ChadGPD to suggest a simple game that I can build using HTML, CSS, and JavaScript. As you can see, it not only gave us the game idea; it also gave me the outline and its mechanics. And it also asked me whether it should generate the code to build this game. I will ask you to do that, and let’s see what happens. So now we have the code. Now we need a way to test it and see if it actually works. To do that, I’m going to use an online code editor called CodePen. To access it, let’s go to codepen.io. Now here, we need to paste the code that ChatGPT generated into these three sections. So let’s go back to ChatGPT and copy the HTML code and paste it into the HTML section. In the same way, I’m going to copy and paste the CSS and JavaScript code. You can see the game’s UI, and the balls are working fine, but these panels are not moving. We should be able to control the left paddle with our keyboard, and the right paddle should be automatically controlled by the computer. You can describe it as chat gpt or even tell it specifically what you want, and it will generate the code for that. So now, for the for the bra pong game, let’s ask ChatGPT to regenerate the code so that the left paddle is controlled by the up and down arrow keys and the right paddle is controlled by the computer. As you can see, ChatGPT has regenerated JavaScript code. So let’s copy it and replace the old code with it. And as you can see, the parallels are working fine. And the game is working flawlessly. For someone who doesn’t know coding, ChatGPT has made it easy for me to create the game. And seriously, I’m impressed.
Next, let’s see how good ChatGPT is at making puzzles. This time, I’m going to ask you to give me an idea for not one, but three different puzzle games. Let’s go to ChatGPT, ask it some questions, and it gives us 3 unique puzzles with the description and the game mechanics. So I’m going to ask ChatGPT to provide the code for the third game, and just like that, within seconds, our code is ready. So let’s quickly copy and paste the code into a code pen and see how it works. As you can see, the game is ready to play. The task is to arrange the numbers in the correct order. So let’s give it a try. And yeah, it’s quite interesting. Now let’s ramp things up. The games we’ve tried so far were too simple. Let’s try to create something a little more challenging, like Flappy Bird. So let’s ask ChatGPD to build the game. And it gave us the code for the game, so let’s copy and paste the code into CodePen. As you can see, ChatGPD has given us a very basic version of the game, but it’s missing a few features. So let’s ask ChadGPD to add some extra features to make it look better and function properly. So currently, there aren’t any guidelines for when the game should start or end. So I want to specify a few things, like that the game should start after the first click and end if the bird touches the pipes across certain boundaries. And when the game ends, I want a game-over notification on the screen along with the retry button. So let’s go ahead and ask ChadGPD to make all these improvements to the game.
And look at this! This time, it has only provided me with the updated JavaScript code. Since I don’t know anything about coding, I’m not sure where exactly to make these changes. So, I’ll ask ChargeGPD to generate the full code. Now let me quickly copy and paste the code right into CodePen. And, as you can see, the game doesn’t start by itself. You need to make the first click to start the game. And if the bird hits any of these pipes, you’ll see a game-over notification on the screen. Now if we click the retry button, we’ll be back in the game with a fresh start. Now that the game is working properly, let’s see how we can make this game visually stunning. To do that, I’m going to replace the images of the bird, pipes, and canvas background by providing image URLs. Then we will also add a scorecard at the top right corner so that whenever we successfully cross a pipe, the score increases. I’m also going to ask ChadGPT to give the background a stylish gradient makeover. Now, ChatGPT guides us on what we need to do step by step. So first, we need to get the images. So let me just search for the images and download them to my computer. Now, we can’t upload these images directly to ChatGPT. So we need to upload them as links. To get these images as links, I’m going to use an online tool called post-images.org. Just upload the image, and you’ll get the image link.
Once we have all the links, let’s copy and paste them into ChatGPT and specify which link corresponds to which image. and chadgp generates the code with the updated image links, so let’s quickly copy and paste them into code pen, and as soon as we add the CSS code, you’ll see that the background has been changed here, so once you’ve got the entire code in place, you can see that we’ve successfully recreated the look of the flappy bird game, so let’s try it out. I have to say it’s actually pretty amazing, but I want to make some final adjustments to make it look even better, like enhancing the scoreboard and displaying the score on the game over notification and a few other tweaks. So let me just do that and see how it works. And there you have it, guys. After countless chats and a lot of back and forth with chat GPT, here’s the final game output we’ve got. It’s pretty incredible to think that we started with absolutely no coding knowledge, and ChatGPT walked us through each and every step. The possibilities are limitless, and the results are seriously impressive. We’ve just seen how handy ChatGPT can be in making games, even if you’re a newbie like me.
