00:00Hi guys, I'm Bryan from Website Learners.
00:02Did you know that ChatGPT can code?
00:04And did you know that you can create games with ChatGPT?
00:07Well, I've been trying all sorts of things with ChatGPT
00:10and today I had this thought.
00:12If ChatGPT can code, why not try to use it to create a video game?
00:16Well, in this video, I'm going to find out if ChatGPT can help us
00:19create a web-based video game from scratch.
00:21Also, I'm starting with very basic knowledge in coding
00:25and I'll be relying entirely on ChatGPT to guide me through creating this game.
00:29So buckle up and let's dive right in.
00:35So let me just ask ChatGPT to suggest a simple game
00:38that I can build using HTML, CSS, and JavaScript.
00:42As you can see, it not only gave us the game idea,
00:44it also gave me the outline and its mechanics.
00:47And it also asked me whether it should generate the code to build this game.
00:51I will ask it to do that and let's see what happens.
00:55So now we have the code.
00:57Now we need a way to test it and see if it actually works.
01:00To do that, I'm going to use an online code editor called CodePen.
01:04To access it, let's go to CodePen.io.
01:07Now here, we need to paste the code that ChatGPT generated into these three sections.
01:11So let's go back to ChatGPT and copy the HTML code
01:16and paste it into the HTML section.
01:18In the same way, I'm going to copy and paste the CSS and the JavaScript code.
01:24You can see the game's UI and the balls are working fine.
01:27But these paddles are not moving.
01:28We should be able to control the left paddle with our keyboard
01:31and the right paddle should be automatically controlled by the computer.
01:34You can describe it to ChatGPT or even tell it specifically what you want
01:39and it will generate the code for that.
01:40So now, prop one game, let's ask ChatGPT to regenerate the code so that
01:45the left paddle is controlled by the up and down arrow keys
01:48and the right paddle is controlled by the computer.
01:52As you can see, ChatGPT has regenerated the JavaScript code.
01:55So let's copy it and replace the old code with it.
02:02And as you can see,
02:06the paddles are working fine and the game is working flawlessly.
02:10Now as someone who doesn't know coding,
02:12ChatGPT has made it easy for me to create the game.
02:15And seriously, I'm impressed.
02:18Next, let's see how good ChatGPT is with making puzzles.
02:21This time, I'm going to ask you to give me an idea for not one
02:24but three different puzzle games.
02:27Let's go to ChatGPT, ask it some questions
02:31and it gives us three unique puzzles with the description and the game mechanics.
02:35So I'm going to ask ChatGPT to provide the code for the third game
02:40and just like that, within seconds, our code is ready.
02:43So let's quickly copy and paste the code into CodePen and see how it works.
02:49As you can see, the game is ready to play.
02:52The task is to arrange the numbers in the correct order.
02:54So let's have a try.
02:57And yeah, it's quite interesting.
02:59Now let's ramp things up.
03:00The games we tried so far were too simple.
03:03Let's try to create something a little more challenging like Flappy Bird.
03:06So let's ask ChatGPT to build a game
03:10and it gave us the code for the game.
03:12So let's copy and paste the code into CodePen.
03:17As you can see, ChatGPT has given us a very basic version of the game,
03:21but it's missing a few features.
03:23So let's ask ChatGPT to add some extra features
03:26to make it look better and function properly.
03:29So currently, there aren't any guidelines for when the game should start or end.
03:33So I'm going to specify a few things like the game should start after the first click
03:38and end if the bird touches the pipes or crosses certain boundaries.
03:42and end if the bird touches the pipes or crosses certain boundaries.
03:46And when the game ends, I want a game over notification on the screen
03:50along with a retry button.
03:51So let's go ahead and ask ChatGPT to make all these improvements to the game.
03:56And look at this.
03:58This time, it has only provided me the updated JavaScript code.
04:01Since I don't know anything about coding, I'm not sure where exactly to make these changes.
04:06So I'll ask ChatGPT to generate the full code.
04:08So let me quickly copy and paste the code right into CodePen.
04:19And as you can see, the game doesn't start by itself.
04:21You need to make the first click to start the game.
04:24And if the bird hits any of these pipes,
04:27you'll see a game over notification on the screen.
04:29Now if we click the retry button, we'll be back in the game with a fresh start.
04:34Now that the game is working properly,
04:36next, let's see how we can make this game visually stunning.
04:39To do that, I'm going to replace the images of the bird,
04:42pipes and the camera's background by providing image URLs.
04:46Then we will also add a scorecard at the top right corner
04:48so that whenever we successfully cross a pipe, the score increases.
04:52I'm also going to ask ChatGPT to give the background a stylish braided makeover.
04:56Now ChatGPT guides us on what we need to do step by step.
05:00So first, we need to get the images.
05:02So let me just search for the images.
05:07And download them to my computer.
05:11Now we can't upload these images directly to ChatGPT.
05:14So we need to upload them as links.
05:16To get these images as links, I'm going to use an online tool called postimages.org.
05:20Just upload the image.
05:26And you'll get the image link.
05:27Once we have all the links, let's copy and paste them into ChatGPT.
05:31And specify which link corresponds to which image.
05:35And ChatGPT generates the code with the updated image links.
05:38So let's quickly copy and paste them into CodePen.
05:45And as soon as we add the CSS code, you'll see that the background has been changed here.
05:50So once you've got the entire code in place,
05:52you can see that we've successfully recreated the look of the flappy bird game.
05:56So let's try it out.
05:57I have to say, it's actually pretty amazing.
05:59But I want to make some final adjustments to make it look even better.
06:03Like enhancing the scoreboard and displaying the score on the game over notification.
06:08And a few other tweaks.
06:09So let me just do that and see how it works.
06:27And there you have it guys.
06:33After countless number of chats and a lot of back and forth with ChatGPT,
06:36here's the final game output we've got.
06:39It's pretty incredible to think that we started with absolute no coding knowledge
06:42and ChatGPT walked us through each and every step.
06:45The possibilities are limitless and the results are seriously impressive.
06:49We've just seen how handy ChatGPT can be in making games, even if you're a newbie like me.
06:54Now it's your turn to get creative and make your own games with ChatGPT.
06:57So if you like this video, give it a thumbs up and subscribe for more videos.
07:01Thanks for watching.
07:02I'll see you in the next video.
07:03Until then, take care.
07:05Bye bye.
Comments