I Built a 2D Shooting Game Using AI (Cursor + no-code)

by the end of this video you'll have your own fully playable shooting game we're going to put it online any of your friends can play it it's going to have a full working back end so that you have a leaderboard it's going to be so sick this is going to be the best video I've ever made I want to build a top- down shooting game you are a soldier that starts in the middle and can shoot bullets at zombies that come in from the sides it's blasting oh I am sick and tired of paying for the same Call of Duty game every single year let's make our own top down 2D shooting game we're going to do it with AI zero programming necessary anyone can do this even beginners feel free to follow along with me download cursor down below the link is there free AI tool so lock in and let's get to it so this is cursor

the most powerful AI tool I've ever used you can build apps in here no programming experience necessary you just tell an AI what you want to build make sure to open this up open a folder inside of it I just opened up this Call of Duty folder we're going to build the sickest 2D top down shooting game ever we're going to do this we're going to

open up our composer with command shift I this is where we can talk to our Ai and start building out the code so here's the first prompt I'm putting in I want to build a top down shooting game you are a soldier that starts in the middle and can shoot bullets at zombies that come in from the sides I want to use phaser for this as the tech phaser is a JavaScript library that lets you build out really nice and interesting video games very easily let's start off with the basics and just implement the soldier movement and shooting so we're keeping this basic as a step one I hit enter to submit it starts building out the code for me I don't need to write a single line of code myself it's just doing it all in a second we're going to hit accept and we can test this out so as you can see here the AI is saying all right let's build out this basic setup the code allows me to have a player uh the player can move around and it faces wherever my mouse is and clicking the mouse shoots the gun the player has so let's accept this if after you accept the code you're getting any sort of Errors at all around phaser on the top line make sure to go into the AI and say isn't there a way of doing this where I don't need to install phaser there there's ways to do this which are simpler and more complicated let's make sure we do this the simple way so just enter in this AI prompt here if you get any sort of Errors when you run that first step and if you run into any errors at all you can ask the AI at any time it'll fix it for you all right let's try this out let's run it here's what we're going to do we're going to try out this base game we need to run this on a local server this is super easy just follow along closely so to run this on a local server just type this in npx http-server dp8,000 80 hit run on that it's running if npx doesn't work for you there just hit command K that brings up a little AI box and say npx isn't running for me it'll install whatever you need to get installed to run that going it's not very complicated the AI will get it done for you so we got that running and now that server started we can actually test out the game so just go to the server it says that it started on here you can command click on that we'll pull open the window and look what we got here okay so we got our character in the middle we got the bullets coming out now all we need to do is enter the Assets in now we just got to make it so each thing is an asset we got to put in the bullets and character assets we're going to build this all out with AI though so this will be cool and

just as a preview of what we're going to work on here moving forward I built out this to-do list of everything we're going to do in this video so we built out the basic gameplay I'm going to put that in complete now we're going to create the assets upcoming next we're going to add enemies though add a scoring UI add an increasing difficulty as this goes add weapons and powerups create a database and put this on the internet so a lot of cool things coming up let's create these assets though for the game so I'm going to do this all in

mid Journey if you don't have a mid Journey account that's totally fine I'll include the links to the assets down in the description below so you can download them and put them in mid journey is a great way to build out assets for game if you're building them with Ai No artistic skills required so I put in a couple prompts here to build out the actual assets overhead view 2D 8bit pixel art of a modern Soldier character from a video game I'm going to take one of these characters and I'm going to show you how you can use it as the asset and then for the bullet I'm creating I did a similar thing but with uh a bullet graphic that we're going to take here and put it into the game as well so what I want you to do you have two options you can either build the asset yourself in mid journey and I I'll put this prompt down below too so you can steal and build your own character or you can just download the assets I built here uh from the description below which whichever one you feel like doing so what I'm going to do is let's use this Soldier character I like the way this one looks let's save this image what we're going to have to do here though is remove this background for the game so I'm going to use a tool called Adobe Express which is free here's Adobe Express they have a background remover I'll put the link down below as well we'll upload the photo put that in there and now it should just very quickly remove the background for us boom done download that we have our asset good to go we just need to quickly resize this we want to make this 32x 32 so let's resize this image I just Googled image resizer I'm going into this first one here let's select the image we just made we can make this 32x 42 resize the image download that bad boy boom there it is now what we're going to do in here is we're going to create a new folder in cursor right in the root here we're going to call it assets and then we are going to drag in that file we just resized into asset and now let's rename this player which matches uh what's in here asset SL player so that's in there we got our little soldier there now let's save this and let's pop it open and see what we got and side note before we run this code if you've been with me so far if you've enjoyed this so far make sure to hit like down below make sure to subscribe if you haven't yet all I do is build cool apps and games and then let me know in the reply section what other games and apps You' like me to build everything including this came from the reply section of past videos so let me know what you want to build so we

go here I'm going to refresh it we got our soldier who's shooting the bullets which we're going to put in a second but at least we got our soldier who aims wherever our mouse goes that's sick and when you click it shoots so we got the base of a game here we're getting closer we're building some cool things so now let's put in those bullets so we can see the bullets going around so I'm going to do the same thing I just did with the soldier I'm going to take one of these bullets I like the way this bullet looks let's take this we'll save that again The Prompt down below if you want it let's go back into our background remover put in that new bullet it's so cool with the free things you can do on the internet you just find a background remover you put it in it just works the internet's getting so good now let's download that all right we got that background removed and then let's go back into our image resizer select our bullet put that in slightly smaller make it 15x 20 let's resize that image we will throw this into our assets we'll rename this bullet. png all right so let's see how our new asset looks I'll pull over the game soldiers looking good let's shoot there's the bullets I like it the one thing is we want to make the bullets so it fires straight when we shoot so let's quickly fix that let's put in I want to make it so the Bullet faces straight when I shoot make it face forward depending on where I'm aiming again any edits you want to make any changes you just go into the AI and tell them plain English exactly what you want and it updates the code just like this for you so it calculates the angle between the player and the pointer and sets the bullets rotation to that angle so let's do that pull this back open just as a side note too when you refresh this make sure you do command shift R it refreshes it and clears the cache so nothing sticks over from your last build so now I shoot and now you can see it's facing the same way no matter what now we just need to rotate it 90° so that it's facing forward so let's do that go into the AI please rotate the bullet 90° I hit enter sure let's rotate it updates the code I hit accept pull it back over command shift R we fire and it's going straight look we got our soldier I can move around the arrows and the bullet always fires straight I love that all right so we created the assets that is done now

let's add in some enemies let's make a zombie let's make it so we have to kill zombies and bring those in here we go we're back in mid Journey now let's create a prompt to create a zombie again if you don't have a mid Journey subscription I'll just put the assets below so you can download them and put them into your own game overhead view 2D 8bit pixel art of a let's make this a zombie for a video game okay so we got some zombies holding guns I kind of like this the way these look we'll make it so that the zombies shoot bullets at you too so you got to dodge bullets as you're going around this could get intense I like that so let's pull out I like the way this zombie looks so I created a couple versions of the zombie I think I want a glowing red one I kind of like the way this one looks yeah I like this one I like this glowing red one let's download this is what we're going to use save image let's remove the background again with Adobe Express so we can get this in our game that looks good oh that's a good looking zombie let's download that we got the zombie ready to go let's now go in here and get some enemies in the game so I told her I want to make it so zombie enemies enter the game as time progresses more zombies enter the screen from random parts of the border the zombies randomly fire bullets at you so we're getting a whole bunch of zombies that start coming in the screen now that will be firing at us as time goes on it gets harder and harder and the zombies are shooting bullets at us too that we need to dodge all right so it's adding several new features zombies Spawn from random sides of the screen at a regular interval the spawn rate and speed is on zombies increase over time the zombies move toward the player zombies shoot bullets at the player at regular intervals okay let's accept that we got that we saved it let's see we need a zombie PNG now let's pull in our new zombie to our assets we'll rename it zombie. png looking good there we'll pull in our game let's hit command shift R to refresh and clear the cash oh we got a zombie coming at us can I hit it okay so there's no hit detection we'll do that next but we got zombies coming on the screen we got zombies is firing at us okay this is awesome this is look and it increases over time maybe what we want to do next before we add hit detection is just so we can see things a bit clearer let's give this a background I want to so maybe we give this like a militaristic 8bit retro background I think that'd be a good idea so we added our enemies now let's add a cool

background as our too I like to track when I'm building out apps I track everything through a Trello board I just like the Cann band board style makes it easy to track things and come up with ideas so let's add a cool background then we're going to start adding the scoring UI increase the difficulty and add weapon types I think that's going to be a cool one so let's add a cool background all right so we're going to do this an overhead view 2D 8bit pixel art retro style military field we'll make this our background let's see how this looks and as that generates you can look here the zombies are piling on top of me a clearly we don't have hit detection yet we're going to be adding that in a second but more and more zombies are coming in as this goes ooh I like this looks like this looks like a good place to kill some zombies huh I like this one let's save this image let's come in here so I'm going to tell the AI I want to use a background make it so I can up so I can put in a background. png in and it's used as the background let's accept that pull in our new background we just generated put that in there we'll rename this background. png let's refresh this huh ooh where am I okay I like this so I did a couple things I updated a couple things here I made our soldier blue so it stands out a little bit more and I made the bullets red so they stand out a little bit more in the background too so things pop a little bit it's a little bit easier to see what's going on here I updated the assets the most up-to-date assets are down below you can just download them and use them if you want uh I just wanted to make things pop a little bit more so let's see what we got here we added our background what do we got next

let's uh add hit detection so that we die if bullets hit us and the zombies disappear and die if we hit them add that there let's get into it I'm going to pop open back the AI all right so we need hit detection in the game if a bullet hits me make it so the Game Stops and it says game over if one of my bullets hits a zombie the zombie disappears let's pop that let's send it to the AI let's get the AI working for us build us some code AI here we go it's adding a little bit of hit detection bullet disappears when it hits a zombie when it hits the player uh added a game over flag for when we get hit let's accept it let's go back here command shift are to force the reload all right here we go let's fire at the zombies boom hit the zombie disappeared now let's see what happens when we get hit game over it seems let me just check this real quick does it seem like the hit detection is a little off like it's like a big window let's do this when does it hit me yeah it's not exactly on me so let's change the hit detection let's go back in here so we're debugging this a little bit anytime we see something that's a little off we can go back into the AI and describe what's going on so what I'm doing here is it seems like the hit area around the main character in the zombie is a little too big shrink the hit Area a little bit so the Bullet has to get closer to the center of the characters hit enter it's going to change the hit detection a little bit it's going to make things a little bit more precise all right where's the zombie let's go boom okay that looks good yeah that looks good it has it hits the zombie precisely I like that now let's see what it does for me yeah it looks like it hits me right on there let's go I like that so we had hit detection now let's add a score let's

make it so there's a score on the screen in the top right that goes up as we hit things pop open the AI again all right so let's add a score to the top right every time you kill a zombie it goes up by one let's add a little score so we can keep track of how well we're doing here accept that let's pull it open let's refresh here all right we got the score in the top right let's see if it goes up as I kill zombies score one Perfect Two I like it three okay looks like it's working glorious missed there okay we're looking good here I like it okay pull it back over scoring UI done all right so a few things we're going to do next I want

to add different weapons to the game so you can pick up weapons that give you like machine guns and shotguns I think that'll be cool let's do that next then I think we're going to increase the difficulty so the game goes a little bit quicker maybe we move the characters faster or the bullets faster we'll do that then and then the final Parts we're going to do is add a database so that we can keep track of a leaderboard so anyone who plays can enter in their information and they go on the leaderboard we'll put the final version down below so we can have an entire leaderboard for everyone watching this video which I think would be cool and then we're going to deploy it to the Internet so you guys can play it through the link below let's do that so let's add weapon types I think what we'll probably have to do first is create an asset for the guns we want to do so let's pull open mid Journey again let's go to create all right so midre I'm going to create kind of a machine gun we can use in the game so a lot of bullets can come out so we have multiple weapons overhead view 2D pixel art for an AK-47 again I'll put all these prompts down below so you can just steal them or I'll just put the asset down below so you can steal that too ooh I like this look at this I like this glowing yellow AK-47 let's download that save that image let's remove the background that so we can get it in the game we go back to Adobe let's hope the background remover oh I kept the yellow let's go download that let's resize this we'll make this big I want to make this AK-47 big make it 45 let's go resize all right now let's add it to the game okay we're going to add this new weapon to the game I want there to be a second weapon type called a machine gun that randomly drops every 20 seconds when it's picked up bullets rapidly fire out of the soldier for 5 seconds whatever weapon The Soldier's holding should also display in the top left in a much bigger picture let's send that it's creating the code for us to enter this new weapon type that we just created I think that's going to be sick creating a machine gun timer okay let's do this make sure add the machine gun and the p and the pistol okay cuz we're starting off with the pistol we need to create a pistol as well so let's accept that let's first drop in the machine gun to here we'll rename that machine gun. png and then we also need a pistol overhead view of a pistol for a video game glowing blue around it let's get that I like this one a little Desert Eagle action let's save that mid journey is good isn't it these are pretty good pictures just coming up with we'll remove the background there you go download it go into our image resizer resize that put that in our assets name it P pistol. PNG all right look we got the pistol starting off in the top left that's a good sign now let's see if we can get the AK-47 to show up on the screen randomly let's see what we can do here I think he said every 15 seconds all right there's the machine gun let's get it let's get it we got this oh I died the moment I hit it no all right do that again all right there's the machine gun let's go come on survive here we go oh yeah look at that unlimited bullets there we go oh that's so sick all right the G the machine gun's working well I love that all right let's die here let's keep building do we add a shotgun too just add a shotgun for the fun of it so we have three weapon types I think that'd be good let's add a shotgun so let's create the shotgun ooh I like the way this shotgun looks I'm liking let's use this one okay we moove the background download that let's resize it make it 120 pixels and we'll put it into our game and now let's add the shotgun through the AI I want to add a shotgun weap it should blast out a blast of bullets like a shotgun does every second it should drop randomly every 10 to 20 seconds it only lasts 5 Seconds when you pick it up let's add that all right modifying the code to add the shotgun in there I like this we got a whole arsenal weapons now in our game this is getting good this is getting I can't wait to see the final result let's name it shotgun. PNG let's test this out I'm excited for this all right so let's see if we can get our shotgun to drop here fighting off these zombies There's a shotgun pick it up oh it's blasting it's blasting oh look at that that's sick that's so sick there's our machine gun let's pick up the machine gun okay we're rapidly shooting out there shotgun let's see okay it replaces when you pick it up I like that okay that's sick that's so cool I love it all right let's see where we're at we added weapon types now we got to have a leaderboard so I can see which one of you guys are the best are the best let's do

which one of you are the best let's do this I want to create a database we're going using superbase it stores your score on the leaderboard so for those who don't know superas is a very popular database a lot of people use for their online apps I'm going to use it for this to store all of the high scores I'll walk through in a second how to set it up as well don't worry this will be very simple all right I want to create a leaderboard in a database I want to use superbase when a game ends it should pop open a screen that says you on the leader board then ask for three initials and your email address all right we're going to get this set up this will be simple just follow me here step by step let's modify the game to include a leaderboard using superbase we'll need to add a new screen for the entering initials and email and then send that data to superbase here's how we can modify game. js make sure you have superbase set up in your project add this to index so it's going to add the code for us for the database let's accept this first thing we need to do is set up a superbase project uh so this is going to be superb. com I'll show it to you right now here you go superb. com you sign up you start a new project uh and then from there it's going to give you a bunch of information this is really simple just set that up it's going give you URL as well as a API key you put both of those things into the top of your file game. js file I just did that in the background and then you're good to go so then it's going to set up the leaderboard for us it's going to show the final leaderboard all right it has us creating a new table in superbase you just click new table it wants us to name it leaderboard and then we'll make the column initials which is text email which is also text and SC four which we make a numeric all right so those are saved we hit save here at the bottom boom added those new columns to leaderboard looks like that's good to go all right so that's set up let's test this out let's see if this works so let's open up our game again okay let's try this out see if it works we kill a guy to get a score hit that okay we got our leaderboard you're on the leaderboard enter your initials ATF put in my email address submit okay I wonder that submit let's take a look at our game here okay look there we go okay admitted it submitted it a couple times I ran a couple tests here it looks like it worked we just got to clean up the screen a bit a little bit let's little bit okay so I'm doing this I'm making it so it says to show the top 10 names on the leaderboard once sorted by top score after a user hit submit so we can see what the top scores are when we hit submit let's accept that let's pull this back open again make sure you hit command shift R to hard refresh your browser when you do this so clears the cache let's do this let's kill a guy let's get killed let's see ATF let's submit see what we get okay that's fine it's not showing us the leaderboard let's debug this is good let's debug it all right so let's debug this I told the AI just died I'm not seeing the top 10 leaderboard after I click submit I still see my initials and email after the background's blacked out all right let's do that hopefully you can fix it for us I see the issue the problem is that the leaderboard isn't being displayed immediately after submission let's modify okay so now it's going to display it right after we hit submit all right I figured out what was going on here it's in the policies so you got to go to your authentication in super base go to policies create policy we'll call this policy name retrieving scores we'll call this enable read access for all users so do this you want to do this twice do it for select and then do it for insert uh put true in there and enable this for all users and save policy at the bottom here we go ATF put in my email submit oh boom there's the leaderboard wow okay we still got a couple issues we got the input still show up does reset game yeah reset game resets it we got to get these inputs off the screen here we go all right so I said everything works now except when I hit submit the initials and email inputs remain on the screen we just got to get rid of that they need to be removed when the leaderboard is displayed we might be the last step here we might be getting close here we go let's accept all come back again command shift r kill a zombie to get a score and then let's get killed thereit boom there's the leaderboard let's restart does this work boom and it works we did it I think we did it all right let's see if we can get on top of the leaderboard again what did we get five that you get us let's see submit okay it works we did it

now let's get this online so anyone can play it so I can put the link in the description so you guys can play all right I'm going to use repet to get this online go to rep. com sign up for repet this going to be the easiest best way to get this online sign up here so I'm going to ask it how we can host all this on R we do everything for the AI we don't need any technical knowledge the AI just does everything for us go to repet and sign in create a new repet all right let's do this let's create a new repet choose HTML CSS JavaScript boom give the name we'll call this Alex Finn zombie killer let's create this all right set up your files in the repli file explorer you should see index. html replace the content index. html with your HTML file all right index. html copy paste then we rename script. js. game. js all right come in here rename this game. js delete style. CSS all right now we take game. jss and put the code in there Boom come back in here game. jss paste that's in there simple simple so we create a new folder assets now let's move our files over let's bring all our assets into here copy all these drag them in to assets boom they're all in assets now let's add a favicon to the rout I'll rename this faon do Ico all right that's good to go once you have the code all inside of repet and all the Assets in the assets folder and your favicon in there which can just be any image you just rename it to favicon. ico you go up to the top you hit deploy there should be a deploy button right here then there's a static choice you click that then you hit deploy and then your game goes live on the internet and then you can hit this link and then boom your game is live then you can copy

this link send it to all your friends can play get blown away by how amazing you are and how amazing the game you built is and everyone's proud of you and everyone thinks you're a genius and your parents like holy crap it's worth it it was worth giving birth to my child I can't believe they're so smart we just went over a lot what did we built a game we built the back end we put it live on the Internet it's fully playable anyone can do it I'm going to do this the link to my game here is down below in the descript description go play the game one week from now whoever is at the top of the leaderboard whoever is number one on the leaderboard I'm venmoing you $100 cuz your email will be in there whoever is at the top of leaderboard go play the game it's down below if you enjoyed the game video make sure you hit like on this subscribe and let me know in the replies what other apps or games you want me to build everything I build is from the reply section go down in the reply section let me know what apps games I'll build anything it'll be fun how fun was this I think this is the most fun video we have made yet I love you guys I appreciate you following along I hope you enjoyed this if you have any recommendations for me to let me know in the reply section anything you want me to do better fix whatever it is every I'm open all feedback love you guys see you in the next video