How I Coded An Entire Game Using ChatGPT

if you don't know by now there's this thing called chat gbt that got released and it's basically an AI that you can talk to to help you get things done it was released a couple months ago by a company called open Ai and ever since people have been using it to help them with school their work you name it and there's a lot of debate online right now over whether this is going to help with any jobs or replace any jobs one of the main jobs of concern right now is programming jobs and so to test it out in a recent video of mine I used it to help me build a full-fledged website and I thought it was impressive however I thought about it a little bit and I realized I was already pretty proficient in web development so in this video I want to see if I could use chat EBT to help me code and deploy a project and something where I have no prior knowledge or experience and since game development is pretty visually appealing I figured let's do a video where I try and code and deploy a browser game to the web from scratch using chat gbt this way I can test how powerful of a tool it will really be when I don't know anything about what I'm trying to build and at the end of the video we're going to deploy employ our web browser game to one of the best web hosting platforms around which is hostinger and hostinger of course happens to be the sponsor of this video and if you go to the link in the description and you use code Nick white at checkout you're going to get 10 off your order I've talked about how web hosting can be a little bit confusing but hostinger has the most intuitive platform around and with the Premium plan you're going to get all the features you need to deploy your website in minutes that includes a free domain as well as an email associated with that domain you'll also be able to create up to 100 websites and you'll have 100 gigabytes of SSD storage so you will be able to play around and deploy whatever you need to whether that's websites or apps or Games Etc it's as easy as signing up with that Premium plan so if you're interested make sure that you go into the description of this video click my link and then when you're at checkout use my code Nick white and you will get an additional 10 off your order and once again later in the video when we deploy our game to the web I will show you how easy this platform is to use I all right so let's get started building our game if you haven't even tried chat gbt yet you really should I will link it in the description but all you got to do is go to openai.com and in the top it's going to say try chat gbt you sign up with an account with open AI using Google it takes like two minutes and then you'll be redirected to the interface for chat gbt the interface looks like this so it'll have some examples capabilities and limitations but you can ignore that all you have to do is type and have a conversation with it using the input text at the bottom of the page so what I recommend is you just talk to chat gbt like it's a person you're talking to and it will respond like it's a person now you guys can use it for free but chat CBT plus did just come out so I got it it's 20 bucks a month you get available even when demand is high faster response speeds and Priority Access to new features so since I'm doing a video right now and I want the faster responses I'm going to use it but yeah like I said I basically just have a conversation with chat gbt and I said hey I want to do this help me so let's start with a greeting hey chat gbt jgbt says hello how can I help you today I want you guys to be able to follow along with this video so we're going to use HTML CSS and JavaScript I told chat gbt I'd like to build a web browser game using HTML CSS and JavaScript can you help me do that Chad gbt says of course I'd be happy to help you first let's talk about what game you want to build do you have a specific idea in mind I really don't have an idea in mind but hopefully chat gbt does so let's test its creativity and ask it for some suggestions so I said I don't currently have any ideas can you help me come up with one that isn't too difficult to build but it's also interesting chagibit says sure how about a simple memory card matching game game consists of a grid of cards with hidden images you flip over two at a time to find the matching pair if the cards match they stay flipped over and the player earns points if the cards don't match then they have to try again the game continues until all pairs have been found I think this is perfect because while it's not too intense I've never coded a game before so I think I'll be able to learn something so does it sound like something you want to build I'm going to say yes that sounds perfect the tragedy BT says awesome here's a high level overview of the steps you'll need to build the game create HTML structure add CSS write the JavaScript and then test so this looks pretty straightforward and now let's start building our project so what I got on my computer right now is a project folder called chat gbt game and we got three files for HTML CSS and JavaScript we got Visual Studio code running too so you can see all these files right here so let's just follow these steps one by one we need to create the HTML structure first now one of the things chat gbt is really good at is generating the exact code snippet you need for your project you just got to make sure you're very clear when you tell it exactly what you need so I said perfect can you help me generate some HTML structure code for my game they give me like the body of the HTML but I actually need the template html2 so I'm going to ask for that as well so here we got certainly here's the temple HTML file I provided with the code from earlier so you can just copy the code snippets on the top right we'll go over to our file paste it boom go over let's open this file in our web browser and look at that this is our game wow this looks amazing it looks like for our cards chat gbt is using images with image 1 JPEG and image 2 JPEG and they explain that we'll actually need to get images for these so I'm just going to go to Google and I typed in card back PNG and I'm just going to take this for the matching card game so now we got card back and then we'll go back over to our browser and obviously these cards are way too big so I'm going to tell Chachi petite cool can we add some CSS to go with the HTML now I'm using separate files for my CSS and JavaScript by the way and just like that we get a ton of styles I'm not even going to look through any of this I'm just going to copy over and paste it into our CSS file we'll go back to chat gbt and they also nicely enough provide us the link to hook it up from our HTML so let's just go over here might be a different file name so we're just going to make sure yeah memory game CSS ours is called app CSS so let's switch that and now when we go back over to our browser this is what the game looks like okay that's kind of cool so since I'm not even reading the code let's just see if chat EBT is going to code this whole game on its own I'm going to say cool looks good can we add some JavaScript to make the game functional so it looks like we get all the JavaScript we need for the game to be functional I don't know what any of it does I'm not even going to read it I just want to paste it all in and see if this whole game is going to get coded without me even trying let's go over to HTML let's go down add our script tag we're going to add app.js instead of memory game JS and let's go back to our browser and test this out so when we click the question mark I guess the front of our card appears which is the back of our card so I guess I mixed up earlier what I was supposed to do I'm supposed to get the front of the cards not the back of the cards I guess the back of the cards in the game right now chatgpt is recommending question marks which makes sense since there's only two cards I asked chbt hey can we have some more cards there's only two right now told me how to add more just copying and pasting more of the same code copy this just had over paste save and now since this is YouTube I think the front of our card should be Pokemon because people like Pokemon so I had a Charizard and Pikachu so those are what we'll be using so now we have four cards and there should be two matches two Pikachus two Charizards so now we go back to the matching game we got Charizard we got Pikachu obviously this looks crazy so I'm gonna ask it to adjust the size of the front of the cards I said awesome the front of the cards are too big when they appear can we add some CSS to fix that I think it mistook it for the question marks so I said sorry I meant the side of the card when it's flipped so like the images I guess that's where the mix-up happened Chachi BT thinks the flipped is the back you know semantics there or whatever so maybe that's not like a big mistake so now we get the CSS to fix the image sizes let's head over let's paste this go back to our game it should be pretty straightforward now the Pikachu's the right size Charizard yeah perfect so all in all so far I don't know anything that's going on in the code I haven't really read through it and we've got this so so that is pretty good hence why Chaturbate is being talked about so much I'm able to build things this quickly without knowing anything about it so obviously right now when we're playing our game it doesn't tell us if we're matching or not there's no score there's nothing I'm going to tell chat gbt cool I can't tell when I'm matching correctly or not when I flip the cards can we add some code to signify that to the user so Chad gbt is saying to add a background color of light green to our CSS just go down here copy paste that and then let's go over and we have this disabled cards function I don't know if this is already in our JavaScript I would imagine it looks like this so we're just going to copy and paste this and then let's go back over to our game the background color wasn't showing so I added border but it's saying that no matter which two cards I pick it's a match which obviously is wrong so I'm going to tell chechi BT cool I added four cards now though and the matching mechanics aren't working it says it's always a match no matter what LGBT says the issue you're encountering is because the matching logic only checks if the first and second cards have the same data framework attribute which we don't have I guess it's going to check if the data framework attribute is present and if the images are the same so like data framework image one for both of these if we click these it's a match or if we click these as a match and then in the JavaScript it's gonna like shuffle them up I guess so I'm just going to copy this into our HTML and then we'll just update with those images once again and now hopefully it should work let's go here we got Pikachu Charizard see there's no green box so it's not a match and then Pikachu Charizard again it's not a match it's not a match so then this is also not a match and then this is a match so we get the green and then we're successful obviously because they don't flip back over and then we go here and here and boom we get another match so honestly I don't know how long it's been maybe 10 to 15 minutes and we already got this built I don't know anything about matching games I don't even really know what's going on in the code that much but see how useful chat gbt is in building anything so to continue the game I'm going to say awesome that worked perfectly can we add a score for the player that starts at zero and then increments each time there's a match so Chad gbt says yes we have our game container in our HTML already so it looks like we just need the score container now so let's head over so you can see we have game container here so let's just go below I think it's saying and then do score container and then down here we have the disable cards and update score functions so let's just go back back over to our JavaScript and then I think we have this disabled cards and there is no update score function yet so that's cool let's go back over to our HTML here boom and then our score is down here that's really ugly but as we can see if we get a single match right here our score is one with the Charizards and then if we get the second match our score is two so of course technically I know how to put the score HTML above the game HTML and then add some basic styles to center it but we're going to just use chat EBT all the way through so I said could we add the score above the game in the center of the page I'd also like the text to be larger and for it to look cooler and stand out so then we get some CSS here let's go over to our CSS let's go to the bottom paste boom let's go back and now our score is down here it looks a little bit better but I did say I wanted it above I don't know if uh oh yeah and then they said just put the score above makes sense let's go back to our HTML let's delete this let's go back above our game container now score container back to our game boom now the score is at the top and if we play the game I'm actually bad at a matching game that's crazy and now score two so this is looking good now I'm gonna say cool just like how we added a light green color for successful matches can we add red if it's a failed match so get mismatch background color red so let's go over to our CSS and add this let's go right here boom then we get some code for the unflip cards let's go over here I don't know if this is gonna just like make them all red by default which is kind of bad now let's go back to the game and if we get an unsuccessful match yeah that looks good so we get red and then if we get a successful match we get green so right now we've only got four cards so I'm gonna get a couple more Pokemon and add some more cards so I just added cards for Squirtle and Bulbasaur so now there should be eight cards total and four matches total that we could have and if we go to our game and refresh it could go so we got now Pikachu and Bulbasaur and so we got two Pikachus there we go score two and then boom maximum score of four now you could obviously see when we refresh that these cards will get shuffled so you can see there's two Squirtles at the end for example so when I refresh there should not be two Squirtles here and Pikachu like for example probably won't be in the first place right so when we refresh see Pikachu's not in the first and obviously there's not going to be two Squirtles at the end so each time we refresh and start a new game the cards get completely shuffled so this is actually kind of like a fully functioning game that we've built in like I don't know how long it's been 15 minutes maybe it's been a little bit more than that 20 minutes maximum now there's a lot of people out there that are saying the chat EBT is all hype but you do have to admit that without knowing anything about the code I did build this basic version of a matching card video game in 20 minutes whereas it would probably have taken me at least an hour if I was Googling and trying to research and put all this code together from scratch myself so that's pretty impressive and that is why people care about it so much another thing we could easily add instead of just score for like how many matches we've got is how many misses we get so I told Chad gbt Perfect The Game's looking great can we also add a counter to see how many times we've missed a match so we get that code it's basically just we have a score and then we'll have misses underneath the score so if we go back to our HTML here we'll just copy and paste this go back and then we'll have some functions so we'll have update Miss and unflip cards we'll go back to our JavaScript I don't even know what's going on uh unflip cards right here we'll just paste over that and hope that it works boom misses is over here obviously there's no styles for it so that's a miss so whenever we miss it gets incremented looks like it's good so far another Miss and then we have two misses now and one score so I don't know what kind of game mechanics there would be for a real matching game maybe we could do like if you have more misses then score at the end then you lose or something like that I don't know so I'm going to say thanks that works can we add some CSS for the misses to make it look a little bit better as well so I'm going to copy this go over to our CSS go down it's probably just going to be the same code as the score then we have score and misses here so yeah this looks exactly the same it's honestly not the best user interface ever obviously guys but also I mean you could spend like forever developing like the perfect game obviously I don't know for 20 minutes I do think it's good so to finish off this basic browser game I asked chat EBT if can we make it so that if we have more matches than misses at the end we say you win and if there's more misses that matches we say you lose so it looks like we got chassis petite giving us our JavaScript here function called check win that we will add into our code at the bottom of the file so let's just put it right here and then let's go back and then we also get an update to our disable cards functions somewhere in here yeah here it is right here and I guess it's going to check when if cards lengths match cards something so let's go back to the game and test this out so let's try and win so we got Squirtle two Squirtles so there we go and then we got Pikachus right here oh I'm killing it so I mean we got this in the bag right and then boom we win right so that's perfect so instead of it saying score I'm just gonna make it say matches I just think that looks a little bit better and then I think this is as far as I want to go with this game I think it gets the point across considering I don't know what's going on the code I've never built a game before right like all this JavaScript code I mean I get the gist of it a little but I really didn't even read it I really don't know what's going on in it that much as you can see I built this really quickly doing just a bunch of copy and paste and it was pretty easy so maybe I'll make improvements to this over time but right now I'm going to host this on the best hosting platform around hostinger I'm going to show you guys how easy it is to deploy this to the web if you guys want to play this game I will link it in the description as well so you guys can go check this out and play it but yeah let's go throw this up and host it and then I'll give you guys my final thoughts on chat EBT and using it if you're interested in deploying an app or a website or a game like this to the web and you want it to be really easy definitely check out a hostinger go into the description click the link link get that Premium plan and then use code Nick white at checkout you get 10 off so hosting is really easy to use right so I have the Premium plan I log in you know you make an account and then at the top it's going to say websites and all you have to do is create a new website I'm going to say create a new website it says name your website by a domain when you get the premium plan it comes with the domain anyway so I'm going to select a domain and let's think we're gonna do so I picked the domain match.pokemon.com which I think is pretty good it says well done you're ready so just go to manage site and then deploying a website on a hostinger is really this easy guys it's like almost effortless you got your domain so I've got everything all set up match.pokemon.com so if we go to this website obviously nothing's up because we haven't put any code up yet but you're just going to go over to file manager and then right here you just drag and drop your whole game so you just drag and drop all those files and then we'll Refresh on the site and it'll be live so this is our entire game chat EBT game these are all the files we just went through and we built with so I'm just going to upload load all these files boom they're all uploaded and now this is the website that wasn't working literally two seconds ago here's our final website I took off cam so we could see it perfectly at matchthatpokemon.com and as we can see the code is working so yeah my browser games officially deployed if you guys want to try it out and play with it a little bit it's going to be linked in the description as well now overall I've made two videos using chat gbt to build projects however in the first one I did web development and I knew what was going on pretty much every step of the way because I have a lot of experience in web development however in this video I built a basic browser game and I've never built a game before and had no idea what was going on in the JavaScript I pretty much blindly copied and pasted a lot of the code throughout this video and while I do think it's important to have some understanding of coding to be able to do what I just did I do think how it's super impressive that with basic coding knowledge you can just construct a prompt and then copy and paste the code and get something up and running like this so will chat gbt be replacing programming jobs as of right now I don't think so however I do think that it's going to automate a lot of busy work and speed up a lot of the mundane tasks that we have to do as programmers so I do think it's an extremely valuable tool and it's just going to keep getting more and more advanced so I highly recommend if you haven't tried it out at least go and check it out because it's free to do so and just takes a couple minutes and who knows maybe it's for some people and not for some people but for me I'm definitely going to integrate it into my workflow so thanks again guys for watching this video I really appreciate it if you want to leave a thumbs up that really helps my channel and definitely hit that subscribe button until next time see you guys later peace

Channel: Nick White

Views: 108,661

Keywords: nick white, chatgpt, web development, gpt, coding, programming, code, technology, software engineering, software development, website, How To Build A Website Using ChatGPT, ai, artificial intelligence, openai

Id: lUokIVmClss

Length: 19min 48sec (1188 seconds)

Published: Mon Feb 20 2023