Tower Defense Game Tutorial with JavaScript & HTML Canvas

welcome everyone this is another chris course with your host chris and today we're going to be [Music] coding very first tower defense game we'll start by creating a map using a map editor called tiled then we'll import that map into the browser and begin creating enemies which follow a path we'll learn how to place buildings in a grid-like format and shoot projectiles at enemies and then we'll completely transform everything by adding in sprites and also adding in a game over ui for more premium game dev tutorials be sure to check out chriscourses.com otherwise let's get right on into it so let's go ahead and get started with map creation in order to create a map we're going to need to download the game assets in which we can draw different tiled pieces onto a map so where would i actually go to get these game assets well if you go to your browser and head over to itch.io we're going to come across this website and this website allows you to download tons and tons of assets for your game usually completely free of charge so if i head over here on the left hand sidebar to game assets and i head on up to a price of free you're going to see that these are all the free game assets that we can use directly within our game and the cool thing is a lot of these are for commercial use and as you can see there are just tons and tons of them for us to choose from so it can get a little overwhelming finding which one do we want to choose for our specific tower defense game so i went ahead and did this behind the scenes actually selected three and then compiled them all into my own specific file which we're going to use directly for this tutorial but to give you a little bit of background for which ones i chose they're going to be called first the free rpg desert tile set this is by the artistcraftpix.net i believe that is a whole company and these are all the assets they're allowing us to use directly within our game so with this asset pack we're going to be using it mainly for the dirt the paths and then all the little objects we might be throwing in between such as cacti plateaus etc so this is one asset pack we're going to use another one we're going to use is going to be for our enemies this is the free 2d org spray sheets also by craftpix.net and it gives us a few orcs in which we can use within our game we're really only going to use orc one and we're only going to use one animation which is provided to us it's going to be the walk animation so that our orc can walk from point a to point b but this is still a great and completely free asset pack packing which we can use for our game the other asset pack we're going to use is called free stone tower defense game art who is it by no other than craftpix.net a lot of free great game assets from them so here we're going to be using these towers as the actual towers in which we use to shoot projectiles at our enemies as they walk across the screen for this specific tutorial we're only going to be using this tower right here we really only want to focus on the basics because there's really so much that just goes into a tower defense game in the first place but if you ever want to use any of these other towers or at least learn how to use them i will be doing premium tutorials on this over at chriscourses.com but this is just another really great asset pack in which we can use for our game so let's say that i wanted to download these asset packs directly from these pages i would just hit download now and it's going to ask for some sort of donation and i do recommend donating to these authors because they put a lot of work into these assets you don't have to though if you don't want to donate you can just hit no thanks just take me to the downloads and then hit the download button right here to begin your download so i already have this downloaded and i don't really recommend downloading this unless you want to use those additional assets which are not provided directly within this tutorial but for this tutorial specifically i created my own tile set which is basically a combination of these three asset packs to make our lives a little bit easier when we go about creating our map and developing this in the first place so if we want to go ahead and get that combined tile set there will be a link in the description of this video for downloading that it's going to be a google drive link and over here you'll see that there is a tileset.png file we want to right click this and then hit download and then find a place to save this in so i'm just going to go ahead and save this directly with my downloads folder i think that's fine i'll call it tileset.png it's going to go ahead and download that file so let's go ahead and take a look at it you'll see within my finder we have tileset.png if i open this this is what the tileset consists of it's just a simple png that contains a combination of assets from those three asset packs i just mentioned pretty much everything up here this is all from the desert asset pack this is obviously the orc asset pack and this is the tower asset pack this is everything we need combined into one specific file but why is everything combined into one specific file well everything right here is organized in a very specific manner everything is arranged into tiles of 64 by 64 pixels this right here represents one tile this right here represents one tile and then over here with these bigger objects that consist of many of these 64 by 64 tiles so this one rock right here consists of four of these tiles basically everything within this file right here was sized correctly so that it fits this grid-like format with all these different tiles and what this is going to allow us to do is select one of these specific tiles stamp it onto our map and then continue onwards with one of the other tiles that we have available to us a tile set is basically just an image we can chop up into perfect segments and then use those segments to rapidly create a map for our game so this is really going to be the only file we use for our map we can begin using it now but first let's head on over to to do and check off game assets and downloads so the very first thing we're going to use this tile set for is creating a path but what program do we even use to create a path in the first place well the program we're going to use is called tiled so if i wanted to find this program i would head on over to the website mapeditor.org and when you go here you're going to be redirected to the tiled home page you'll see right here this background image is what tiled looks like basically we're going to be given this grid-like area in which we can stamp on tiles to create a really detailed map like we can see in the background right there so to download tiled we'll hit download on itch.io it's going to redirect us over here we want to scroll on down hit download now you don't need to donate anything here we can just hit no thanks take them to the downloads and then we want to install for the specific operating system we're using so me specifically i'm using mac os i'm going to go ahead and hit download right here and then save that in my downloads folder so i do already have the save and installed just make sure you install it on your own and then double click to open it when you've double clicked to open it it should open up on this screen right here given you've never used tiled before so i don't have any open files at the moment but i do want to create a new file by hitting new map so we're going to be creating a new map at what size well i want this to be a fixed map size because i know this isn't going to be some sort of infinite scroller game it's going to be a simple fixed tower defense now the width and the height right here represent how many rows and how many columns of tiles we want to include within our map basically how large should the drawing space be for our tile set and i know i want this to be 20 by 12 tiles large and i want our tile size to be 64 by 64 pixels because when creating that tileset that dot png image i made sure that each tile within that image was 64 by 64 pixels so we make sure our tile size over here has 64 by 64 and we're using a width and a height of 20 by 12 it's going to give us a map dimension of 1280 by 768 pixels and that is going to fit most computer screen sizes on desktop so this will be just a desktop game but if you were to do some sort of mobile game well basically you'd make sure your width is smaller than your height etc but we're not going to do that right here we're simply going to focus on desktop to make sure that we have a dimension of 1280 by 768 so once we have these correct we want to hit ok and this is what our game map looks like so we have this whole grid in which we can begin drawing on to create our map but we do need that tileset imported before we can begin drawing so to import that tile set i'm going to hit this button right here new tile set and then i want to go ahead and locate a source this is going to be the source of the file so i hit browse we know that we just downloaded tileset.png so i'm within my downloads folder i'll hit tileset.png hit open and then what else do i have to do here i can call this a different name than what we have i think tileset is totally fine and then i want to make sure that our tile width and tile height is 64x64 because that is what the tileset was actually created at now all i have to do is hit save as and determine where i want to save this so i'm just going to save this directly within downloads i'll go ahead and call this tileset as well because this is going to be a different file type it's not going to be png but rather.tsx so it'll still allow me to save it without overwriting everything if i hit save now you'll see this tile size opened so as i mentioned this file is perfectly segmented into tiles that are 64 by 64 pixels which when we import into tiled at that exact ratio it allows us to select each of these individual objects which in return will allow us to draw them directly on the tiles within our game map so if i want to begin using this within our game map i'd head on over to this tab right here this is going to be our game map currently it's called untitled.tmx so i want to begin drawing on this you'll see our tile set is now open on the right over here i can simply click a tile and then hover over a map over here and click and drag and you'll see we're now drawing tiles out onto our game map and this works for pretty much any segment that we have within our tile set let's say i want to draw a rock onto our map i'd select that rock and then i can click in different locations to draw that on i can drag doesn't really matter where whatever i want my map to look like i can make that happen directly within tiled or really quickly using this tile set technique now let's say i wanted to draw on a larger object like this rock well what i need to do is not just draw a corner i would want to go ahead and select the whole thing by clicking and dragging over the full image this is going to allow me to select the whole thing and now this takes up a 2 by 2 square in which i can just click and draw on that rock and this is going to work for any of our assets because they are all perfectly laid out in the correct format to fill in the 64 by 64 sized squares so how do we actually begin creating a path for our game while this nonsense right here we'd probably need to get rid of it so there are two ways in which you can delete tiles that are already drawn on the screen we can go ahead and click this eraser tool right here that's going to allow us to click and drag and delete anything within the layer we currently have selected on top right or if we want to be quicker we can select this rectangle tool right here click and drag from the top left hand corner all the way to the very end and then just hit delete it's basically like a little marquee selection tool which allows us to delete anything that we select so with everything deleted what would i want to use to begin actually drawing some sort of dirt path well i think this middle segment right here is going to be great for our entire background so let me go ahead and begin drawing that on if i want to begin drawing on this little piece right here i need to make sure that i have our brush slash stamp tool selected so go ahead and grab that and now i can begin drawing on this by clicking and filling up our whole entire map now this is really annoying and kind of tedious to have to do so there are ways in which we can speed this up using tiled and the quickest way to do this is by using the paint bucket tool right here so if i click on the bucket fill tool it's going to allow me to select areas which have not been filled in so you'll see right here that blue area on the outskirts is completely being populated now i can click and that is completely filled in now if this blue overlay is annoying you it's because we still have that rectangle selected from using the rectangle tool we can deselect everything with command shift a and now everything looks back to normal but we can still use the paint bucket tool if i hover over the empty areas it's going to fill in and then once i click that fill in takes effect for every empty area which we have so this is going to be the background for our game so we can create that really cool map that we want what would we draw next well we'd want to start using these path options we have over here to create something in which artworks can walk across so to begin drawing a path what i could do is select this middle path piece right here and then select our brush tool the stamp tool and begin drawing on wherever i want our path we could definitely do this but i will say this is called destructive editing why because we are drawing on top of the same layer in which we had our dirt path on so this might not look apparent right now since we're using two different path pieces but if i were to use something that has a little bit of transparency for the background such as rock right here watch what happens when i begin drawing on a specific location let's say i want to draw right here i click and now that tile piece is completely destroyed and replaced with this raw tile piece instead so i want to make sure that background piece is always going to be there i want to make sure that i'm separating these into different layers so i'm going to hit command z to undo those actions and right here i'm going to double click and call this dirt because this is going to be our dirt background right here i want to right click now go over to new new tile layer to create a new layer this is going to allow me to draw on top of that dirt layer without deleting whatever was there previously so if i click now you'll see this is drawn on top of it rather than deleting it great that is exactly what we want this is also going to be very helpful later on because we can turn layers on and off to see what things look like without our buildings works etc so tile layer 2 right here i'm going to double click and rename this our padding and to create a path i'm going to select this middle tile piece right here make sure that i have padding selected and then i can begin drawing on our path so how would we go about drawing a path that actually makes sense for a tower defense game well we could draw from left to right to create that path but that is a little boring maybe for an intro level or something like that that's okay but i do like a lot of curves within tower defense because it allows us to utilize buildings that have different properties associated with them different ranges gives us a full motion in which our enemies can walk as well so i'm going to start from the left hand side here i'm going to go out to the right a bit and then i'm going to start heading on upwards once i head upwards a bit i think it makes sense for me to go to the right once i'm around here let's start going down you can draw this however you'd like i just think this makes sense for my game i'll start heading to the left start heading down again let's go to the right now and then i want to go back up and head off the map completely so this is going to be the complete path in which our orc follows going to the right up right down left down right all the way until it reaches to the very end it's unique it's not just left to right i like where this is going but this doesn't actually look that great at the moment why because we haven't actually finished our path to finish our paths we want to use these edge pieces right here available to us within our tile set so let's go ahead and use this top edge piece right here if i select that and hover over the row right above the path we just drew in and begin drawing you're going to see that this is a perfect connection with the piece beneath it and the piece above it it creates a really realistic look that makes our game look professional so basically to complete our path anywhere where we need to put a top piece so anything that is on the very top i'd want to hover one tile above it click and then drag all the way to the right side of that top section and i'm going to do that for every section in which we can put a top piece in so all the way here on the bottom and here on the right hand side that is going to fill in the top pieces for our path so now let's go ahead and do the same thing for the bottom pieces but before i do i want to challenge you to pause the video and try drawing in these bottom pieces yourself take a moment and see how you do once you think you have that in a good spot let's go ahead and do it together so on these bottom pieces right here i'll click and drag i know this bottom section right here is empty so i'll click and drag that bottom section in down here we also have bottom sections so i'll click and drag all the way to the right and then click and drag across to the right up here as well we do have bottom sections right here so i can go ahead and fill in one two and that is looking pretty good let's do the same thing for left and right hand sides of our path i'll click the left section right here draw in the left-hand side of this section draw on the left-hand side of this section right here and it's okay if this doesn't look perfect at the moment we're going to fix it and then we have one more left section we'll fill that in and finally we just need to take care of the right hand side so we'll select the right piece and then start drawing in wherever there should be a right piece so wherever there's an empty column on the right side of our current path we'll draw that on in and i think we're going to be good to go with this all that remains is going to be the corner pieces so right now we're trying to draw on side pieces where there should be a corner but thankfully the set does include corner pieces so let's fill in any location in which there's going to be a bottom right corner i can select this piece right here and i know a bottom right corner should go right here on the bottom right side of our path i'll click in and that fixes that issue that looks great for a corner piece on the path this should also have a bottom right corner and i think those might be the only bottom right hand corner pieces actually looks like i missed some side pieces right here that's totally okay i'll add in this bottom right hand corner piece there and i think that should be good to go while we're at it let's go ahead and finish in the sides right here that i missed and we'll continue onwards with the corner pieces let's do any bottom left-hand corner pieces i'll select this i know right here this is a bottom left corner i'll click to fill that in and that is going to be the only bottom left-hand corner piece i can see within our map let's do the same for the top right hand corner that should go right here that is going to be the only one then we have a couple of top left hand corners so that's going to go right here on the top left hand side of our map right here near the middle and then right here near the top right so we took care of all of our outer corners but why do things still look off it's because we haven't taken care of all of our inner corners so inner corners are going to be where path pieces connect if i were to use a corner piece right here it would just look completely off we need to use an inner corner piece instead which is going to be these four tiles on the right hand side of the one we are just using so let's start off with this inner corner piece right here if we use this for this one piece in which we just tried filling in you're going to see that creates a perfect path for us and that looks a lot better is there any other location in which we go from a top tile piece to a left tile piece yes there is it's going to be down here you'll see we go from top to a left which means the connection right here is going to use the one we currently have selected we fold that in and things look good to go so right here we have a right side tile piece connecting to a bottom side tile piece if this is the case we want to make sure that we're using this tile right here this is going to be our connector from right to top so for our inner corner i can go ahead and select that click and now that looks really good same thing for right here on the right hand side let's fill that in and we are almost done filling out our map to finish this off we need some sort of piece that connects a bottom piece to a right piece and that is going to be the one directly next to the one we are using let's go ahead and select this one it's going to be the top to the right connector put it right there are there any other locations in which a top piece connects to the right it doesn't look like it so i think we're good to go there but we're not done just yet we also need a piece in which the right connects to the bottom it's going to be this top left inner corner piece so i'll select that click and all we need to do here is fill in that little gap so i can grab the side piece right here click in that empty spot and that fills it in so really the only remaining spot is going to be right here but we can't really use these inner corner pieces connect anything because we don't have a connecting side piece in which this would actually mesh in well together what we would need to do is create an extra row right here of space so we could get in one right side piece to create something that looks like this section right here but with the indent on the left hand side so we need to make sure that we extend this by one row but we just drew all this out it would be really annoying to have to do this all over again to make sure that we get this right so how could we go about expediting this process well if we select the rectangle tool make sure that we have our pathing selected what we can do is select the area in which we want to move down it's going to be everything from right here to the right hand side making sure that i have all that path selected with all of it selected i can hit command x it's going to delete it all but copy it to the clipboard now i can hit command v and paste in that entire section in the exact location i want so i just want to move it down by one i'm going to go down by one click and now i have that extra area in which i can make sure that our corner pieces work so first let's take care of the side pieces i know i have a missing side piece right here i'll fill that in now i also have a missing middle piece i'll fill that in as well and i also need a side piece right here i'll put that in but now i just need to make sure that this top side connects to the left side for an inner corner to do that i'm going to use the bottom right hand inner corner click in that location and now that connects perfectly i want to do the same thing for this bottom section right here so i'll grab this top right hand inner corner piece click and now that is looking really really good now i just need to fill in this row right here and to do that i can select the rectangle tool select the row above it hit command c hit command v to paste and now i have all that selected i can just click to fill in that entire row so i think this is looking really good for the start of a path but what would i take into consideration here to make sure that our game is the best as possible well where can our tower actually fit within our map right here if i scroll on down within our tile set to the very bottom left hand corner you're going to see that we have our tower as a tile in which you can place with our map so i'm going to click and drag so i can select the whole thing and you'll see this is where our tower can be placed so it takes up two columns worth of space but when we pull this into our game it's actually only going to take up one row so you'll see our tower has no problem fitting over here in this section has no problem fitting over here we do not want to draw our tower onto the map that is where our orcs are going to be running across our game would not make sense if that's the case we're only going to allow ourselves to draw the tower within the dirt area but if i wanted to be able to draw towers right here i simply would not be able to do it because our tower is overlapping with our path if that's the case i would want to make sure that i design our map right here so this little dirt area has two columns worth of space so i could actually place a tower in between this section of the path and this section of the path on the right so if we want to move this whole little section over to the right we can use our rectangle tool select that entire section hit command x hit command v and now where do i want to place this well i want one additional column on the left over there so i'm going to make sure that column is included click and now really all i need to do is fill in that empty column so i'll also select our rectangle tool and then select one column of padding hit command c hit command v and fill that in and if we want to test things out we can scroll back down to the bottom left select our tower and now we know that we can actually draw this in between the paths and i think this is going to look really really good for when we actually implement it within our game so this is going to be the absolute step one is creating a path directly and tiled in which our orcs can walk across and as you can see it looks really good because we have a good tile set and we used good tiling techniques with all the different corners so with this we can head back to to do and check off create a path next we're going to cover map details i wanted to cover this to show you guys how to layer objects on top of each other to create a map that looks really good really realistic while keeping our game ui in the back of our mind so let's head on over to tiled and when i'm talking about game details i'm just referring to these objects that don't really have too much of an impact on our game things such as rocks things such as cacti these little rocks signs foliage whatever it might be we use these to decorate our map and really we can select one place it anywhere we would like and it doesn't really matter this is mostly up for artistic intent but there are a few techniques we can use to layer these objects on top of each other to make our game look even better than it would otherwise so i'm going to go ahead and right click over here to create a new path and i'm actually going to control z everything before i do that get rid of those signs right click over here hit new tile layer and these are going to be details one because we're going to have multiple detail layers to make sure that we can overlay these objects on top of each other when needed so let's start really simple let's say we want to draw this cactus somewhere on our map i'm going to draw in the top left hand corner let's say maybe we want the skull right beneath it but let's say maybe there is a large cactus beneath the skull i'm going to select this large cactus by clicking and dragging downwards and now you'll see if i want to place it right beneath the skull that looks pretty cool it's overlaid on top of the skull but if i click the skull is gone completely why is that well it is because we are using the same details layer that the skull was on so if we're taking up this little space right here where the skull is it's just going to delete completely and we're no longer going to see it so whenever we want to layer objects on top of each other we need to make sure that we have multiple detail layers within our game map so i'll right click over here to create a new one this is going to be details 2. so now that i have details 2 here it should not overwrite the skull so when i click now we have that overlaid on top of skull and it looks more realistic because now we have a foreground object and a background object interacting with each other this is the exact view we would see in something like real life now sometimes you will have multiple objects layered on top of each other let's say this cactus has another one right beneath it if i click well that cactus is now gone so what we need to do is simply right click go to new new tile layer and then i'm going to create another one called details three so now that's going to allow me with details three selected to draw on top of that cactus we just created and you can create as many detail layers as you'd like it doesn't really matter but just however many you need to start layering things on top of each other that's the way you want to go now these objects can act as barriers to where you cannot draw buildings for your tower defense right now our path is acting as a barrier as in we cannot draw buildings on this path or at least that's how we're going to code the game these objects are going to act as the same way it does not make sense to be able to just completely remove an object and draw a building on top of it so these detailed objects act as a game function basically to either make our game easier or harder depending on where we place them so let's say at the very beginning we don't want any buildings to be placed right here on the bottom left hand corner to make our game a little bit harder for this specific map we're creating i'm going to go ahead and select this rock right here because it's quite large and then over here i say i don't want any buildings right here all i have to do is click and now we're going to say that this one location building can no longer be drawn maybe i want the same thing for the two tiles beneath it in this case i would have to use something smaller like these rocks up here so i can either select one or two of these at the same time put them on over and just drop them and now i can no longer draw there as well now something else i want to take into consideration is our game user interface so within our game we're going to have things such as resources which allow us to actually draw buildings on our map and we are also going to have hearts these hearts represent how many lives do we have left before our game is over and typically those go in the top right hand corner of a game or the top left hand corner for this game i'm going to put them in the top right hand corner and if that's the case i want to make sure that nothing can be drawn in this top right hand corner because it's going to be reserved for those resource and heart values that i want to put in the game so in this top right hand corner let's go ahead and create something that looks a little more realistic than what we have going on right now so something cool you can do is you can select something like one of these big rocks i'll go ahead and do that and let's say i don't really want to include the whole rock but i only want it partially in the scene to add this cool effect where we know this is a rock but is outside of our scene to do that i'm just going to move a little bit of it off the stage and then i'm going to click and just like that only a partial part of this whole tile image is showing which is exactly what i wanted so let's keep moving onwards i also want this little lake in there because i think it has some nice contrast with the rest of our map and i kind of want it near this little alcove of that rock we just placed so i'm going to move over to the left by one click and now the pond is in our game looking great but i do want a little bit of layering as well i think near the pond it makes sense to add cacti because that way they have water to grow so i'm going to go ahead and select this one we have not used yet and i want this layered on top of a rock and right next to the pond so if i were to click right now you'll see that the rock disappears we go ahead and fix this in a few ways one we could right click and create a new layer but i think that it's a little tedious and it might muddle up our layers a little bit we don't want too many as long as we don't need them so what i'm going to do is select this little rectangle tool right here to select it with the dotted line and then cover the section of the rock and hit command x to cut it out of its place so i know this is going to be in the background 100 percent and if it's in the background i want to go over to details one and once i'm within details one i can hit command v and then click wherever i want it back in our game so i'll click and now when we go to something like details two or details three we select that cactus it's going to allow us to draw on top of that rock and i think right next to the oasis i'll add in this small little cactus as well just to give it a little bit of visual variety and i really like how this is looking so this is going to be reserved for a user interface up here and really the rest of the map regarding details is up to you you can select anything you have here to say hey i don't want the user to be able to draw buildings in this particular location i think for me i'll draw a sign right here to indicate that this is the direction i want to the enemies to go and then i can just sprinkle in a few objects in locations i don't want towers to be drawn so i'll add a little rock right here this is going to completely prevent towers from being drawn in this top row where all these rocks are let's say i want to add a little bit more visual interest down here on the bottom right hand corner go ahead and select something like let's say this rock right here place it there and i can also do things such as start to layering objects in the bottom right hand corner so i know i want a background object behind this rock i can select details one grab something like another rock place it right there you'll see that's now in the background it could also grab something like the skull place it there as well whatever you would like to make your game more interesting is pretty much up to you as an artist to determine where you want to place these objects and still make your game either harder or easier to prevent towers from being drawn so this puts my map in a really good spot i'm really happy with how this is looking if you'd like to see how this looks without the grid you can hit command g or control g for you windows users to hide that grid and get a full view of your whole map i'm going to turn the grid back on and i know i want to save this so i'll hit command s control s for you windows users i'm going to save this directly within my downloads folder and i'm going to call this tower defense it's going to save as a tmx file so i'll save it directly in there now i have that saved as you can see in the top left hand corner so this is pretty much all we need to do to get our game started using this map we just created our enemies are going to start from the left over here and follow this whole trail to the very end we just need to program it now so let's head back to to do's and check off map details now we're going to move on to our tower defense basics we're going to actually program this game based off that map we just created the first thing we need to focus on is going to be project setup this means creating our new files and then importing and rendering our map into the game so let's go ahead and do that now what i'm going to do is open up a new window in sublime text so i know this is a little bare bones for this tutorial but this is indeed sublime text that i have opened as you can see right here and with this new file open in sublime text i'm going to go to file save where do i want to save this new file i'm creating so this is going to be an index.html file to what's going to host our canvas element so we can actually begin drawing our game onto it and begin playing so i just need to determine where do i want to host this file so in particular for me i like storing all my games within a web folder i created a while back so i'm going to go inside of there and you'll see this is just a basic folder with all my games i want to actually create a new folder for our game this is going to be our main project folder so i'll hit new folder and save this as tower dash defense so now all i need to do is determine what i want to save this file as within the tower defense folder we just created i want to save this as index.html that is going to be the base file in which we start adding canvas elements to so i'll go ahead and call it that and now if i hit save that file has been created if i show you the interface right here you'll see index.html is saved so this is going to be our main html file if i want to begin creating our game i can create a simple canvas element so i'll go ahead and do that now by adding in a simple opening and closing canvas tag so if i save this now i can go ahead and open this up within a browser to start viewing it to open this up within a browser all we need to do is head on over to finder and then find out where we just saved this file so like i said i like saving things within a web directory we call this tower defense and there is index.html so you can double click this to open it i'm going to go ahead and open it with a different browser and this is what our game looks like right now it's just a white screen but the thing is our canvas element is definitely there how do i know well i can right click inspect our element that's going to open up chrome dev tools and now you'll see our canvas element is definitely within the game we just can't see it because it is transparent nothing is being drawn on top of it but this is step number one is just getting a canvas element rendered out in an index.html file next let's make sure that we can see our canvas because right now it's a little annoying to have to just use devtools to see what size our canvas is relative to the rest of our browser window so to style up our canvas we're going to head back on over to index.html and what we can do here is we can add in some style tags at the very top of our file i'll go ahead and add those in and within these style tags i can begin writing css so i know for our game i want everything within my browser window to have a black background to do this we can select our body tag which basically encapsulates everything within our browser window we can start writing css within this body tag so i'm going to select a background dash color style and set this equal to black by doing this with a simple save heading back on over to our browser and refreshing you're going to see now our background is black so you can see over here on the right hand side of this elements tab we have a body tag it takes up the whole width and height of the screen we just set that to have a background color of black we can click this you can see down here we have a background color of black being applied directly from index.html on line three but we still can't see our canvas simply because we need to give this a color as well typically i like giving canvas's color by actually drawing color into the canvas itself and in order to do that we need to make sure that we connect our javascript to our html file so we can start writing javascript in one of two ways the easiest is going to be by creating a script tag at the bottom of our file so go ahead and add that in and within the script tag i can start writing javascript that selects this canvas and then draws it in with a white background so what javascript do i want to start creating well i know i want to select this canvas and put it within javascript lan is how i like to think of it so in order to do that i'm going to create a constant called canvas and this is going to store the element that we have right here to grab this i can get it with document dot query selector query selector will allow me to grab any element within my html and i know i just want the simple canvas element so with a string as an argument i'll go ahead and grab that canvas element and then i can console log out canvas to make sure that i'm actually grabbing it so if i save this head on over here refresh and then open up my console you'll see we are indeed logging out our canvas element that code is all working correctly which is great but now i need a way to access all of our canvas methods so methods that will allow us to draw shapes images whatever it might be we want to go ahead and be able to access that api to do that i'm going to create another const and i'm just going to call this c c in this case stands for context but context is just really long in this case and this is one of the few instances in which i recommend using a small variable name rather than a long one simply because we are going to be using this variable so so much that it just gets really annoying to have the type context over and over again or something like ctx i just like calling the c and this is one of the few instances in which i'll actually use something that's shorter rather than more descriptive so i'm going to call this constant c and i know i want to get our canvas context that is basically the canvas api to get that i can call this canvas element we just grabbed within javascript and then on top of that call get context and i just want to say what context do i want to grab there are a few options we can put here 2d webgl i know i don't want this to be a 3d webgl project i just want to focus on a 2d game so within this i'll add a string and say that our context is going to be a 2d context so we can console log this out to make sure that c is grabbed correctly i save that refresh and this is everything that we can use within canvas to start drawing shapes out onto our screen so what shape do i want to draw on the canvas element that's currently right here well i want a rectangle that fills up the full width and height of this canvas element just so i can separate it from our background to do that let's delete our console log call our context of c and then call a fill wrecked function on top of this so phil rect takes four arguments it's going to be an x position a y position a width and then a height so where do we want to place this rectangle well for the x position i want this drawn on the very top left hand corner of our canvas if i hover over canvas right here we know the top left hand corner is going to be somewhere up here in the top left hand side of our screen so to draw up there our x coordinate is going to be zero our y coordinate is also going to be zero and then i want this to take up the full canvas width and height and we can get that using that canvas element that we stored within this canvas const so for our width i'm going to reference this canvas const and then just get a simple width property i can do the same thing for height by grabbing our canvas height as the fourth argument this is going to draw a rectangle that is the full width and height of our canvas so i'm going to save this with command s head back over to our browser we're not going to see any difference just yet even with that code why because by default when we call fill rect without any fill style it's going to be drawing it in as black so right now our black rectangle is blending in with our black background this is a very simple fix right above c dot fill rect i'm going to call c dot fill style and then i can set this equal to a string whether it be a color a hex code an rgba value whatever we set fill style to fillrect is going to take that into account and then draw the rectangle out in that color so our fill style i'm going to set that equal to a string of white that just says draw a rectangle out with a white color i'm going to save that refresh and finally there is our canvas separated from our background so this is the only location in which we can draw our game out right now but we know with entire our game map was supposed to be 1280 by 768 pixels so let's go ahead and change our canvas width and height right here to make sure that it takes up those full dimensions that we created within tiled to do this we're going to go over to our javascript and right beneath where we're declaring constants i'm going to grab our canvas and say that i want to set its width equal to the size of 1280. this is just going to be a static value which is totally fine for our game and i also want to grab our canvas height and set that equal to 768 so i'll save it as that head back over here and now that takes up the full width and height of 1280 by 768 so i'll actually have to move this to the side so we can see the whole thing and there it is this is going to contain our full game map but before we get to importing our map over here our code is starting to get longer and longer within our javascript if this is starting to get too confusing for you it kind of makes sense to put this in a separate file so that way you have some sort of separation between your html your css and your javascript i pretty much always like keeping my css with my html that is just a personal preference especially because i like using tail and css which kind of encourages that workflow but for our javascript in this one instance i do think it makes sense to put it into a different file so we can keep this main file a little cleaner and focused on just html elements so i want to go ahead and put this javascript code within another file i'm going to go out to file new file this is going to represent our new javascript file so all i need to do here is go back to file and then hit save and you'll see we're already placed within our tower defense folder which is great so i can go ahead and call this index.js this is going to be our main javascript file that loads our game and activates everything that we need to get it going but i'm not going to save this directly within this folder because i will be preparing for the future i know our game is going to have more javascript files and if that is the case i think it makes sense to prepare a little bit in advance by creating a new folder called js so within this js folder all my javascript files are going to go inside of here i'm going to make sure that i have that selected and then call this index.js and hit save so i scroll up you'll see i just created index.js but with the way we have things open spline text right now it's kind of annoying to have to jump between index.js and index.html if this is the case i want to go over to file and then open and i want to go back to our tower defense folder now instead of selecting a direct file like index.html or index.js i'm just going to make sure that i have the folder selected right here if only the folder is selected and i hit open within sublime text yes it's going to open something that looks like an untitled folder but that's totally okay all i need to do is go to view and then sidebar and then show sidebar you're going to see that it has our project open in the side right here so i can easily jump between files whether it be index.html or index.js so it just makes our workflow a lot easier in this case i'm going to delete this other tab right here for the time being and just stay within our project tab instead so as i was mentioning we need to get this javascript over to index.js to do that all we need to do is grab all of our javascript hit the command x to cut it out of place and now we can get rid of the script tag as well we no longer need that i'm going to save index.html head back to index.js and then paste all that javascript code in so if i were to save this and make sure that i have index.html saved as well head back to our game save and refresh you're going to see that our canva is no longer showing this just means that our javascript is not being read why is that well we need to make sure within index.html that we pull in our javascript otherwise it's just not going to work when we load up index.html so to pull in our javascript we want to create a script tag but this is going to look a little different than script tag we created earlier because we're going to be passing a source attribute into this this just specifies what is the location of the code that we want to load as javascript the location is going to be js we're going to go inside of this js folder and then slash index.js to load this file right here so if we save that refresh now our canvas is back simply because we're loading all of our code correctly by pulling it in through the script tag so now that we have our game loaded up let's go ahead and get our map rendered out into this area that we have for our canvas so the first thing we need to do is head back to tiled and export our map right here to export our map we're simply going to go up to file and then export as image i'll click that the small pop-up will show i'm going to hit browse to say where do i want to save this image and i know i want to save this directly within our game folder so head on over to web go inside tower defense and then since i know this is going to be an image i'm going to create a new folder called img for image and then save this directly within there i'm not going to call this tower defense but rather game map and i want to make sure that i save this as a png so i'll add the extension directly by saying this is a dot png and i'll just simply hit save and all of our settings look good by default i only want to include the visible layers that we actually have on our map i don't care about the current zoom level because i know our map is 1280 by 768 pixels we don't want to include our tile grid we don't need object names we don't need to include a background color so all these defaults look great now i'm going to hit export and now if i look within finder within our img folder we now have a game map and this is just a simple png of that map we just created within tiled and see exact dimensions that we want at 1280 by 768 pixels so now that this is within our game specifically within our image folder we can begin importing it directly into index.js so to import this we need to call a c dot draw image function so this is a canvas context function and it takes a few arguments the first is going to be a simple html image so you might think that we could just reference a string right here go inside to our image folder then reference game map.png and that might work but we do need two additional arguments so the second argument is going to be what is the location in which we want to draw this image out i want to draw out at an x location of zero and then our third argument is going to be the y location i know i want that drawn out as zero as well so we're starting from the top left-hand corner of our canvas and like i said you might think this works let's go ahead and save refresh and then i'm going to click this to go over to our console tab you're going to see that we have the issue of failed to execute draw image on canvas rendering context 2d and that is simply because this type right here we cannot pass through a string as this first argument it needs to be some sort of html image element so to create that html image element what we could do is create a const of image and set this equal to a new image so this image object comes with javascript by default and basically it's going to allow us to create an html element but specifically an image element we can use within c.draw image right here but we're not done just yet you might be thinking to create this image with this actual image that we have within our image folder now we can just copy the string and plop it within this image instantiator unfortunately that is not the case this will not work even though it makes sense so instead what we have to do is call our image const and then grab its source attribute and set it equal to the source which actually references our game map over here but once we do this with this image object this represents an html image we can go ahead and replace within c dot draw image this string paste an image instead we save that and refresh and yes our console error is gone but our image is still not being drawn why is that well right now we're trying to draw out our image before i actually loaded within our javascript so if our image loads after we actually called this method right here it's just not going to show at all on the screen as a result with this image object what we can do is right beneath image call image dot on load this is another method that says what do we want to do once this image has fully loaded within our javascript what we want to call an arrow function so whatever is within this arrow function is going to call as soon as our image loads this is a perfect location to say that whenever image loads we want to call c dot draw image this is going to make sure that our order of events is running correctly if we put c.draw image inside of image.onload save and then refresh now our image is going to be rendered on the screen correctly because the order of operations is correct and you do want to make sure that you're calling.onload before sending.src simply because we want to make sure that all this code is ready to go just in case our actual image right here loads really quickly we want to make sure that this code is available to us before that but now with our game map rendered out this is going to allow us to check off project setup and now we can move on to path binding so now we're going to focus on path finding which is essentially how do we get our enemies from point a all the way to something like point b well there are a couple ways we can do this one of them being we can use collision detection or we can go ahead and use waypoints so what is the difference between these two and what are their pros and cons so when i'm talking about collision detection i think it makes sense to look at our tiled map over here our enemies are going to be coming in from the left hand side of our path and as they come from the left hand side eventually what might happen is they might hit something like a collision block a closing block is just an entity that is there to say when an enemy hits this we want them to either stop or react to this collision in some sort of way in this case they would react to this collision by moving upwards until they hit another collision block up here then we would say once they hit this we want them to go to the right hit a collision block here and a collision block here and we'd keep placing these collision blocks in places in which we want our enemy to turn a specific direction now we could do things this way but in my opinion this is a little inefficient and it's a lot more complicated than using something such as waypoint because the thing is when an enemy hits one of these collision blocks while we have to determine which way does the enemy go are they going to be going up or are they going to be going down once they hit this collision block and then we need to make sure the collision block is placed in the perfect spot up here to say are they going to go to the right are they going to go to the left so it's just a little complicated in this case to use collision blocks to determine which way our enemy should go it's going to be more taxing on our computer because we're going to have a lot of collision blocks in place to make sure that we're always monitoring for collision between our different enemies and these individual collision blocks so the other method that we can use are going to be waypoints basically these are just points along our path that we draw in so let's say we draw one right here we would draw one up here right here we're going to draw these all along our path and basically these are just points in which we want our enemies to travel to as they hit one point they're going to go on to the next until they reach the very end off of our map so enemies come in from over here they hit this point they reach it they go on to the next point once they hit this we'll go to the next point in the array and we'll keep on going through all these points until we hit the end now this is much more efficient because we're not monitoring for collision detection between multiple blocks we're basically just performing calculations between our enemies in the next waypoint in line and if you know a little bit about algorithms basically the collision block algorithm would be something like o n squared while the waypoint algorithm would be something like o n so we're going to be using this version right here because it is more efficient than the collision block algorithm so how do we even get started with this waypoint travel effect well the very first thing we need to do is draw these waypoints onto our grid and then export them as data that we can import into our game so how would we draw these waypoints out using tiled while we can begin drawing points onto our map by right clicking over here within our layers we're going to create a new object layer it doesn't really matter where it is in relation to the other layers but we will have object layer 1 right here and then we want to select this little triangular tool that highlights once you have object layer 1 selected so what does this even do well if i start clicking on our map you're going to see that it draws line segments based on wherever i click and we can either connect the line segments by going back to the start or we can just hit enter to make a whole line segment that is selectable and that we can move around eventually so this is how we're going to be drawing out our waypoints is by using this line segment right here and then we're going to export this data and import it into our game now there are a few gotchas regarding tiled and how to create these waypoints let's go ahead and delete this by hitting delete and i'm going to make sure i have this tool selected once more and what i'm going to do here is i'm going to start from the very top left hand corner of our map you always want to make sure you do this when drawing waypoints for a tower defense game when using tiled because if i were to draw starting from down here and just go along our whole path with these waypoints and i get to the very end and hit enter yes this is totally great this is a good pathing for enemies to travel along but the issue with tiled is you can see over here in the left-hand sidebar they add offset based on where you started your actual lines so they added an offset of negative 38 on the x-axis and an offset of 476 on the y-axis and based on these offsets if we were to import this data into our game every single point would be off by these values over here so we don't want to do that we just want to make sure that we're drawing starting from the very top left-hand corner it's going to make sure that our offset is zero and that we don't have any discrepancies in regards to where our points are placed they're always going to be in the exact correct location so get rid of this by hitting delete we're going to make sure that triangle tool is selected up here start from the top left hand corner so we don't get any offset and then we're going to go to the very first position in which we want our enemies to spawn i think a good position is right here because let's say we put a bigger enemy into our game we want to make sure that we have enough distance between our enemy and our actual path to make sure that they're not spawning in a place where we can see them before they start moving so i'm going to go ahead and place our enemy spawn point right here and then i'm just going to keep drawing as straight as i can with this line to the next waypoint position so once the enemy hits right here i want them to start going up so i'll click and then i'll start traveling up in a straight line i'll try to make these as straight as possible just all around our path until we reach the very end we want to make sure we're only clicking once because we don't want too many waypoints right here we're trying to make this as efficient as possible and finally once i get to this very last location i'm going to stretch all the way off our map to make sure that our enemies actually travel off the map that way we can remove them from our game later on and this is going to be representative of the pathing our enemy is going to take now we will have a point in the top left hand corner because that's where we started from to take into account that offset but we will be removing that when we export the data i'll show you how to do that very shortly but to complete this path we're going to go ahead and hit enter and now we have this path ready to go and is stored within object layer 1. we can either hide this layer or bring it back and we're always going to see this path in place and you'll notice our x and y offset are both zero that is totally great that is exactly what we want and this is going to allow us to export this path and then import it into our game so let's save this with a command s we'll head up to file and then export as so where do we want to save this i'm just going to save this directly within downloads because it's more of a temporary file where we're going to grab the data from so when i'm in downloads i'll hit save towerdefense.js that is totally fine i already have a version there i'll just hit replace and now we can go ahead and view that within our finder so over in finder now we have towerdefense.js let's double click it to open it up so this is the data file that tiled exported for us it contains all the data related to our different tile layers and also that object layer we just created so if i start scrolling down you're going to see this data right here is all related to the layer with the name of dirt i can keep on scrolling down here's our padding layer keep on going down and we want to keep on scrolling until we actually find object layer 1 because that is what contained our poly line and if we scroll down this polyline json is associated with all the points we just drew out on our map so we started off at 0 0 exactly what we wanted and then we moved down to a position of negative 124 by 475 for y and each point right here is the exact location in which we want an enemy to travel so this contains all the data we need to get our enemy moving across our map and as a result we want to go ahead and select this whole array right here i'm going to go all the way down to the very end of the array i'm going to right click hit copy and we don't really need this file anymore at least not yet so this array i just copied i want to go ahead and paste it into our game to make sure that it's available for later use when we start coding our enemies pathing so we'll head back to our project code over here and now we just want to store these waypoints within their own file so i'm going to do that directly within this js folder i'm going to go to file new file and paste these on in and by default i'm just going to hit command s to save it make sure that i'm saving that within js you'll see that is indeed within tower defense js what do i want to call this well i think it makes sense to call this our waypoints because it contains all the data associated with our waypoints i'll go ahead and hit save and now all those waypoints are saved within this js file now i do want to save these to their own const so i can begin using them within index.js or some sort of other javascript file so on the very first line i'll get rid of the semicolon declare a const and say i want this cost to be called waypoints it sets this equal to the array that contains all the waypoint data and if we ever want to use this within another javascript file we need to go to index.html and make sure that it's being pulled in before the file we want to use so this is a little more of an old-school way to pull in javascript files but it's still usable nevertheless is we just copy a script tag paste it above or below and then right before the file we want to use the script in we'll go ahead and change this file of index.js name to waypoints.js instead so if we save this now we can use all the waypoints.js data directly within index.js this is still a totally valid way of doing things we're not using npm we're not using imports this is a lot easier to set up actually compared to all that stuff and there's a lot more discrepancies and problems that can go on when using those module imports and exports there are many good reasons to use them but in this case it is a lot easier to set up by just duplicating the script tag so back in our game let's create an enemy that starts moving to the right along our path that'll be the very first thing before we start integrating these waypoints so to create an enemy we'll head on over to index.js now how would i begin creating an enemy on our map well in our case we're going to be using orc sprites but we're not going to get the sprites until later on we want to make this as basic as possible before we start implementing the details so our enemy to start is just going to be a basic red square how would i draw a square on the screen using canvas well the same way we actually filled in our canvas with that rectangle earlier making sure we differentiated it from the black background by filling it in with the white rectangle so to create a red square which represents our enemy we'll use c dot philrect and say where do we want to draw this well i want our enemy drawn somewhere over here so we can kind of predict on the x-axis this is about 100 to 200 pixels over from the left so for our first argument we'll say we want to use c dot fill rect on an x value of 200 our y value is going to be something a little greater let's say it's around 400 pixels down here so we'll say y is 400 then what is the width and height of this rectangle well i want this to be a square so our width is going to be 100 and the height is going to be 100 as well so if we were to save this and refresh we're not going to see anything just yet why is that well really c dot fill rect is actually being called before c dot draw image because image.onload takes a little bit of time to process because we have a lot of data within our gamemap.png file so we're calling c dot fill rect immediately and image.onload is called after therefore c.draw image is drawing that image on top of a rectangle right here so to fix this we need to make sure that we're drawing a rectangle c.filerect inside of our onload function after we call image so go ahead and paste that in refresh over here and there is a rectangle now i do want our enemies to be red to start this is an easy fix right before c dot fill rect we can declare a c dot fill style and set that equal to red and that's just going to change the color of the rectangle so perfect there is our first enemy now to start it doesn't really matter whether or not it's off our screen but we do want our enemy to start moving to the right so we get animation in place how do we begin animating our enemies so that starts moving across our map well in this case we need some sort of animation loop and to create an animation loop we need a function in which i'm going to call animate you can call this whatever you like but since it's going to be responsible for animating our game makes sense to call it animate so to begin an animation loop we're going to call a function called request animation frame and this is a method directly available within the window object but since window is available to us at all times within our code we don't actually need a prefixes with window dot we can just simply call request animation frame like so now this takes an argument what function do we want to call over and over and over again whenever we call animate in the first place well it's going to be the function animate so basically we're creating a recursive loop here when we call animate we're going to call this function request animation frame which in return calls the function animate so basically when we call animate again we're going back to the beginning and then we're calling all this code one more time and it just creates an infinite loop until we tell it to stop and to test that this is working i always like console logging out any text inside of this basically should be logged out over and over and over again as long as this request animation frame is running and now all we need to do is call animate to actually run this animation loop so let's save all this refresh over here right click and then inspect element and then i'm going to open up my console and there we go our animation loop is definitely running now that we know that's running how do we begin moving our enemy to the right well we want to call c dot phil wrecked for every frame of our animation loop otherwise this is always going to be statically drawn it's always going to be placed in the exact same spot so i'll grab these two lines right here which detail out how we're drawing our enemy in the first place cut those out and paste them within our animation loop so now that this is being called for every frame what we can do is change the x-coordinate over time the x-coordinate right now is set to 200 if we begin increasing this over time our enemy theoretically should start being moved over to the right so instead of using a static value of 200 right here let's change this out with a let called x we need to make sure that we actually declare this line in the first place right above our animate function i'll declare let x equal to 200 and then for each frame we run animate we're going to take x and add one onto it by using x plus plus x plus plus is just equal to x plus equal one basically for each frame we're going to be adding one under the value of x and then it'll be available to us the next time we call c dot fill rect so we'll use the x plus version we'll save this and then refresh over here in the browser you're going to see now our enemy is starting to move to the right but we're kind of creating some sort of snail trail right here we don't actually see the full form of our enemy why is this happening well yes we are calling c dot phil wrecked in a new position for each frame but we're never actually clearing our whole game canvas to give ourselves a clean slate to draw phil rect on top of to clear up our game canvas we can either use c dot clear rect and that'll go ahead and solve what we're doing but we don't want to just clear everything we actually want to use c.draw image to redraw our background image and then draw a rectangle on top of it so instead of calling c dot draw image right here within image.onload we're going to be calling that each frame we call animate and eventually that image is going to load so it's okay to call it in here we don't really have to wait for that on load to begin animate or anything if we really wanted to be safe and wait for our background image to load before we call animate then we could go ahead and keep image.onload and say within the arrow function we want to call animate let's go ahead and do that just to show you how that works we'll save all this code refresh and now you can see our enemy keeps that form without that trail so great that's exactly what we want but we really want this enemy to start following some sort of path rather than just going off the screen to the right now it's important to note if we have multiple enemies on here our code right here of c dot phil rect is not going to work to create more enemies right now we would have to duplicate this code paste it down below and then change the value of x to make sure that our two rectangles are separated out from each other this would be a lot easier with object oriented programming because with that we can tell each object each enemy in this case to have their own individual x and own individual y properties we could also tell them to have their own individual color own individual width and height with object oriented programming we have a lot more flexibility than just duplicating code within our animate loop so that's exactly what we're going to do is we're going to replace our current enemies where we're using c dot fill style and c dot fill rect with an actual object where we call something like enemy dot update instead so to begin transferring this over to object notation right above our animate loop we can create a class called enemy with a capital e because class name conventions are always uppercase to start we'll create some opening and closing curly brackets and then we want to call a constructor function so basically whenever we create an enemy we're going to call this function which sets all the properties associated with those individual enemies that we're creating so what properties would an enemy have well if we look within c dot fill rect we know that they have a position and position is representative of an x value and a y value so within our constructor i'm going to create a position property to say that each enemy we create will have their own individual position equal to an object with an x i'm going to assign this to 0 to start and then a y which will also assign a 0 to start what other properties does an enemy have well in this case right now we have a width as indicated by the third argument within c dot fill rect so this dot width will be equal to 100 to start we also have a height indicated by the fourth argument right here so this dot height will be equal to 100 as well now all we need to do is define how an enemy looks so to do this i'm going to create a new method called draw this is arbitrarily named you can name this whatever we want but since this is representative of drawing out our enemy it makes sense to call it draw in this case so what code we have to call to actually draw out our enemy well these two lines right here c dot fill style and c dot fill wrecked i'll grab those two lines paste them into draw and we're almost done with creating our beginning enemy so instead of using this default x in which we created up above or animate now we can use the individual property associated with the enemy which we're about to create so we'll get rid of this x and say whenever we create a new rectangle we want to create it at this dot position dot x basically we're going to be referencing this value right here that we set whenever we create a new enemy we can do the same thing for y say instead of referencing a static value 400 we want to reference the y value of dot position dot y and then we'll also replace our width and height with the properties we just signed up above within our constructor so instead of 100 for width we'll say this is going to be this dot width and then instead of a static value of 100 here we'll say this is equal to this dot height so now to get the same effect where an enemy would be moving to the right all we need to do is update this.position.x for each frame we run through our animation loop so what i'm going to do is add in one more method and it's going to be called update so whenever i call update i like to call the draw function which separates all of our drawing code from the actual updating and logic associated with our enemy and then i know each time i call update i want to move this.position.x by one value so for each time we call update we'll add one on the current value of this.position.x so to transfer our code completely over to the enemy class we can get rid of let x equal to 200 get rid of all this code down here as well right above our function of animate i'm going to create a const called enemy set this equal to a new enemy from our class up here we don't need to pass through any arguments just yet we will eventually but now that we have this enemy created and stored within this enemy const we can take enemy with an animate call enemy.update so enemy.update is going to call this code right here which in return is going to call this.draw which calls this code up here let's go ahead and save this to make sure our code is still working similar to how it was prior like command s go back to our game and refresh and yes our enemy is definitely moving to the right but using that object notation instead but we do want our enemy placed down here so this is an easy fix we just need to make sure that our position for our enemy is not a static value of zero zero by default as a result within our constructor i'm going to pass through one argument it's going to be an object and within this object i'm going to declare a property of position so now we can pass through a position property and once this position property is available to us i want to use position to set this.position equal to the position we're passing through as an argument now if we want some sort of default value associated with position even if we don't pass anything through we can set position equal to an object with an x equals zero and a y equal to zero and this also gives us a little bit of insight in regards to what position is in this case we know we want it to be an object that has an x and a y because that's how we're using it down below within our draw method so with the ability to assign a new position to each enemy we create down here when we actually create a new enemy i'm going to pass through an object which takes a position property and now i know that this position is equal to an object with an x and a y value so i want x equal to 200 y equal to 400 and that should place it down below where it was prior and there it is we just replicated our code by using object syntax instead this is going to allow us to create multiple enemies really easily and update them rather than just one so what i could do is i could create a new enemy by duplicating this line say this is enemy 2 and then down with an animate call enemy 2 dot update and then say that our enemy 2 is going to have a position of 0 for x to start that should separate them enough refresh and now we have two enemies in place but using some really clean code because we don't have to duplicate everything create new variables and so forth we're just using the properties that we already declared within our enemy class now with our enemy class created we can begin moving its position on the x and y axis based on our waypoint data so hypothetically let's say that this is going to be our enemy and let's just say we want our enemy to move to this point over here how would we go about setting the x and y values of our enemy to start moving upwards in a top right motion essentially we're going to need to find the x and the y velocities of our enemy and to find these exact x and y velocities we need to use a little bit of trigonometry so let's start by drawing a right triangle from our enemy to the destination point right here i'm going to draw that out real quickly the very first thing we want to find is the angle created by this right triangle between our enemy and the destination point because we need this angle to find the exact x and y velocity we need to start pushing our enemy up towards that direction in the top right so before we continue with this algorithm let's go ahead and get to that angle to get that angle within our code i'm going to create a const called angle and this is going to be equal to math.atan2 which takes two arguments the first argument is going to be the y distance between two points and the second argument is going to be the x distance between two points so what a y distance and x distance represent right here well if we go back to our right triangle our y distance is going to be the space between these two points on the y axis so it's going to be the distance of this line over here while our x distance is going to be the distance on the x-axis between the two so it's going to be this line over here how long is this line and how long is this line created in the right triangle well with two points we can get this like so we're going to be using variables like we are down below we need to create cons right above called y distance this is going to be equal to this dot position dot y so the y position of the enemy we're currently using for this formula but now we need a second point to reference what is that point going to be well it's going to be one of the points available to us within waypoints.js so we look within waypoints.js we have a const called waypoints equal to an array full of different x and y values now we know within index.html we pull this in with the script tag referencing waypoints.js so since it's available to us within index.js we can grab our very first waypoint by declaring a cons called waypoint and set it equal to our waypoints array which is available to us within waypoints.js as you can see right here we want to get the very first value so we'll get that with an index of zero so the waypoint we're referencing is going to be zero zero for x and y just that one object basically this whole thing right here so now that we have our waypoint get the y distance between this current enemy and the waypoint we're referencing we can go ahead and get our waypoint dot y because we don't have a position property associated waypoint you'll see inside of here we just have an x or y so we're grabbing white point dot y and we're subtracting this dot position dot y so basically what we did was we grabbed this y position up here and from it we subtracted this y position down here it's going to give us the distance right here in which we need to complete this formula to get the angle associated with our right triangle the next thing we need to do is get the x distance so to get our x distance we'll create a const called x distance this will be equal to the way point we're selecting but on the x-axis from this we want to go ahead and subtract this.position dot x and that will give us the x distance now we can plug y distance and x distance into math a 10 2. it's very important you use y distance first that's just the way the equation was set up in order to get the correct angle between those two points so basically with an angle we're storing the value of this right here it is not stored in degrees so this is about 30 degrees as we can see it is stored in radians and radians is just a fancier way to measure an angle it's used in a lot of math equations and so forth but when i'm referring to radians you can just think of it as how wide is this angle open if we wanted to assign a hard value to this this would be equal to around 1 radian i believe but as i mentioned to get our enemy up here moving diagonally to the top right we need to set the x and the y velocity of this enemy right here and the very first thing we needed to do to do that was get this angle now we're going to use this angle and plug it into sine and cosine equations so we'll just say this angle right here is r for radians we're going to plug that into sine and cosine so we have sine r and cosine r and the value produced by cosine r is going to give us the x velocity that we want the value produced by sine r is going to give us the y velocity that we want basically these are producing ratios of how large is one side of this right triangle relative to the other both sine and cosine are always going to produce values anywhere from negative one to one same thing goes for cosine down here negative one to one and sine is going to produce a value of how large this side is in a ratio type format i don't know the actual value it would produce here but let's just say that the side is producing a ratio value of 0.4 this is about the same so sine in this case would also produce a value of 0.4 if we're to add an x velocity of 0.4 and a y velocity of 0.4 doesn't make sense that our enemy right here would be moving perfectly diagonally upwards towards the top right yes it does but based on where our waypoints are at any point in time let's say our waypoint is over here we're going to get completely different values for x and y velocities but they're going to be in perfect ratio format that we always know our enemy is going to be moving towards this waypoint all thanks to getting the angle right here plugging into sine and cosine which produces those ratio values to push our enemy in the correct direction so based on what we wrote right here let's go ahead and plug in this angle we just got directly into sine and cosine and then assign them equal to an x and a y velocity so over here when we're adding 1 onto position.x essentially what we're doing is using 1 as our x velocity so here what we can do is call math dot cosine because cosine is associated with the x axis and we want to plug in the angle which we're retrieving down here if we want to use angle we need to make sure that we're calling this after we actually assign angle so i'll move that down below and we want to do the same thing for this dot position dot y we're going to make sure that we add on to this for each frame math dot sign angle and this is going to produce our y velocity so when we use these two and tandem together map that cosine and map that sign and this angle we just produced we're always going to make sure that our enemy is moving in the correct direction towards whatever waypoint we specify right here so let's save this and if we look within waypoints.js currently we're referencing an x zero and a y of zero so if we were to actually run this code for enemies in place both of them would start traveling towards a position of zero zero no matter where they're placed on the map so let's go ahead and save this refresh and hope this works our enemies should start moving towards the top left with all this code refresh and indeed both of our enemies are moving towards that one specific waypoint so what we're going to do is once these reach this waypoint up here they're going to stop we're going to set the waypoint equal to the next one within this equation so we're going to change waypoint to the next value waypoints1 that'll go ahead and give us this value right here and if we run that with all this equation code down below well it's going to move our enemy to the next location in line so each time we reach that waypoint we're going to say begin moving towards the next one and it's going to create that pathing effect which we've been trying to get during this whole lesson so this value right here the static value of 1 which represents our waypoint index this needs to be dynamic for each enemy that we have because one enemy might be at one way point before the other we don't want to be changing all the enemy waypoints at once they need to be dynamic and changing only when they reach a specific position we want to make this dynamic we need to create a new property and i'm going to call this this dot wait point index by default it'll be equal to zero but now we can use right here instead of a static value of one we can use this dot waypoint index instead now this is going to allow us to change this value based on some sort of condition so down below i'll write an if statement to begin that condition that says if this dot position dot x is equal to the waypoint dot x and this dot position dot y is equal to the same position on the y axis associated with our waypoint so waypoint.y then in this case we want to go ahead and move our waypoint index to the very next value by adding one onto it so if we want this conditional be true it makes sense to round both of these to the nearest whole value and that should solve our problem are these two never actually being equal to each other because they have those floating point values in place so for our position.x i'll round this with math.round that'll give us a whole number value and we can even test this by consolidating out math.roundposition.x up above just to show you what this looks like go ahead and add that second parenthesis on save that refresh now we're always getting some sort of whole value so this is going to be a lot easier to test for when we reach that waypoint value as you're up above you'll see that's actually working down below so let's delete that console log and we'll just round out everything we'll add math.round to the stop position.y save that and also tour waypoints just to be extra safe we'll round those out as well now we should always be testing for hole values and once our enemy reaches a specific waypoint we're going to change their next position by adding on one to the waypoint index we'll save that and now when these reach the position at zeros around the top that's our first waypoint they should be moving on to the next one in line so let's watch that happen and indeed those begin moving to the next waypoint so perfect once those reach the next waypoint over there they're going to start moving to the right there they are and they're going to keep moving throughout the whole map until they reach the very end now it's important to note within our code over here we only want this conditional to run for as long as waypoint index is less than the actual amount of waypoints within our waypoints array otherwise we're going to get some errors when we try to plug in waypoint index into our waypoints array up here because waypoint index might try referencing something that doesn't actually exist because it is such a large number so we want to make sure we add in one more and statement that says only call this code right here only add one under a waypoint index if this.waypoint index is less than our waypoints dot to length so the current amount within our waypoints array minus one that's going to prevent any bugs from occurring as we keep adding one on the waypoint index so the next thing i would do is get rid of that very first waypoint up here because we only use that for export and import purposes for the rest of our waypoints so to get rid of that one waypoint i'll head into waypoints.js and delete an x and a y zero for the first waypoint we can save refresh and now these are going to move directly to the next waypoint over here but it kind of makes sense to make these enemies start at that waypoint rather than move to them by default so to make these enemies start at that waypoint over within index.js where are we creating our enemies well right here we could do this in one of two ways one we could reference our waypoints object the very first one and then reference the very first value associated with that waypoint we could get rid of the 400 over here and reference that y value as well and that should make sure that our enemy starts from that one position we can also go up above and make sure that we're signing position equal to the very first waypoint value i think in this case it's totally fine to just pass through the very first value associated with waypoints so i'll grab this code right here all the properties within the object get rid of these two properties that have static values and paste in way point zero x and weigh point zero y for both enemies so let's save that refresh and now our enemies are starting off to the side and they're going to travel the full path right here now if i wanted a little bit of offset between these two enemies simple enough i can find our second enemy and from waypoint zero x i could subtract something like 150 and this should give us a little bit of space between the two let's refresh after saving now we have our first enemy right here and there comes our second enemy and they're going to follow the whole path now the next thing i want to do is make sure that our enemies are actually following this path from their very center right now they're only following this path from the top left-hand corner because that is where we're actually drawing out the square we need to draw these from the center so as a result we're going to create some sort of center property which actually references this value so to add in a center property with our enemy i'm going to add in that property called center it's going to have an x and a y so our x is going to be equal to this dot position dot x but how do we go from this point up here to the very middle well we could add on to this stop position x half the width of our current enemy and then for a y value we can add on half the height to get this exact point right here so that's exactly what we're going to do on the position x we'll add on this dot width divided by 2 then we need a y value so y will be equal to this dot position dot y plus this dot height divided by 2. now that'll give us our center from where our enemy spawns but if we want center to update for each time we change our position when we change our position down here we also need to make sure that we're setting our center so basically right after position is set down below we'll also set our center with this that's center is equal to an x and also a y we're basically going to be sending an eagle to the same thing that we just wrote up above so i'll copy those two lines and say whenever we're setting centered down here for each frame with an update we're setting it equal to the position we just set up above but adding on to this this dot width divided by two and this the height divided by two it's going to ensure that we always get the center of our enemy right here now what we want to do is instead of getting the right triangle angle created from the top left hand corner of our enemy so in this case would be this angle right here we want to get the angle of the right triangle associated with the center of our enemy instead so to get that angle what we would do is replace position right here with this dot center dot y and position right here with this dot center dot x now we're going to get the position of the center of our enemy rather than the top left hand corner and this is all great but we do want to change within our conditional right here to test for the center of a rectangle rather than top left hand corner so in these two locations instead of referencing the top left hand corner i'll reference this dot center instead now when we save this and refresh we're going to see our enemies eventually start coming from the left and they're placed pretty darn close to the center of our path when the centers hit the next waypoint they're going to start moving out to the next waypoint basically all of our waypoint code is now determined from the center of each square we're getting that angle from the center rather than top left which is allowing this to be drawn out correctly rather than getting that weird offset where we're drawing from the top left-hand corner so i think the last thing i would do here for pathfinding is making sure that we can create multiple enemies at once spawning them all out on the screen rather than just dealing with these two enemies that we have right now so to spawn even more enemies instead of using individual objects like we are right now right above this i'm going to create an array called enemies this to start is just going to be equal to an empty array but what we can do is start populating this array with new enemy objects and then begin rendering them out on the screen so instead of populating them directly what we can do is run a for loop we'll call that width four let i equal to zero this is where our index is going to start we're going to add a semicolon to say that for as long as i is less than 10. we're going to add a semicolon then we want two for each iteration of this frame add one onto i basically what this four loop means is we're going to go through this whole thing 10 times when we're going through this 10 times we can call our enemies array and push into it a new enemy for each iteration now each enemy is going to take one argument a simple object with a position property position is equal to an x and a y which we have down below let's go ahead and grab this copy it paste it into our new position up above we can get rid of these two enemies down below since we're getting rid of those two we need to get rid of enemy to update an enemy 2. update we'll get rid of those too and we do want our enemies spaced out from each other so we'd want to change this x value right here for each iteration of our loop we can create a const called x offset and set that equal to i times something like 150 so by default x offset is going to be equal to 0 because when i is equal to 0 we multiply that by 150 gives us a value of zero great but once we go into the next iteration of this loop i will be equal to one we multiply that by 150 x offset is equal to 150 and now from our waypoints.x we can subtract from this the value of x offset for that next iteration we're subtracting 150 which will make sure enemies offset and this is going to keep increasing the offset for each time we go through this loop until we hit 10 because i is always going to be increasing by 1. so those are going to push offset enemies into our enemies ray now we just need to render them out onto our screen we'll do so within our animation loop by calling enemies for each for each enemy within our enemies array we're going to call the following arrow function and within this arrow function we'll select that one individual enemy and call their associated update method so update right here it's going to call update right here but for each enemy within the array that we just pushed in so we'll save this and refresh and eventually our enemies will start coming in from the left it should all be offset so it indeed looks like some of these are offset we do have one little offset issue right here and is probably due to when these are spawning in the beginning to reach that first waypoint we're moving these a little bit to make sure that the center reaches that waypoint rather than the top left hand corner and over here we don't really have much distance between the first and second enemy as the first enemy tries to move its center to match the waypoint's x-axis a simple fix for this is just to increase i to one instead we'll save that and refresh and that should get rid of that little overlap that we had with those first two enemies and indeed it did so now this is looking great we have multiple enemies in place which are ready to be shot against using some sort of tower we can create as many enemies as we want with this technique for however many times we're running through this whether it be 10 9 20 300 we can just keep creating enemies with this and they'll always be available to us and start running along this path for as long as we tell them to so currently we have one two three four five six seven eight nine enemies we're ready to be shot at using tower but i think with this we can go ahead and check off pathfinding next we're going to look at building placement so how do we actually get buildings drawn onto our map so we're actually going to start with tiled so let's head on over there and once we're within tiled we want to scroll within our tile set on the right hand side here all the way to the right we scroll all the way to the right we're going to see this little green block in which we can select then we can start drawing blocks onto a screen as long as we have a tile layer selected so i actually want to create a new layer for this block i'm going to right click hit new new tile layer and i'm going to call this placement tiles so this little green block right here is going to represent a location in which we can place a building so if i were to draw one right here right here right here essentially would only be able to draw buildings in these three spots at least that's how we're going to program it now i do want to keep in consideration when adding in these building placement tiles that our buildings are going to be two tiles wide so her buildings are two tiles wide we wouldn't want to place a placement block right here because that means a building can be placed across these two tiles but a building would also be able to be placed in these two tiles meaning that the building image would actually be overlapping with another one to make this as easy as possible to program i'm just going to make sure that our building tiles always have at least one gap of spacing in between them at least on the x-axis so what i want to do is say wherever we want to draw a building onto our map i want to fill it in with that green tile that we have over here so make sure we have our brush tool selected and i know down this whole column right here i want to be able to draw buildings all the way across here and then i want at least one column worth the spacing so that our building image will always fit without overlapping another one so one column over we'll draw those in and then we'll go one more column over to the left and draw those in so this is currently the only location in which we'd be able to draw in buildings where else could we draw in buildings well i think it makes sense over here to start adding in tiles start spacing these out by skipping over one tile so one one we'll just keep drawing in locations which we can draw these buildings and then finally i want to make sure i get this little area right here so i can draw a building on this corner now there are still a few areas in which a user might think they can draw on buildings such as over here maybe up here on the top right and definitely right here if you want to make sure that a user knows they can't build anything in these locations it makes sense to go back to one of our detail layers and select some sort of small object it could be any of these let's go ahead and select this little rock right here and we'll just select a location which we don't want a user to be able to place a building so i don't want to be able to place one right here over here i'll select a different rock to add a little bit of variety and i think the very last location would be right here next to the sign let's go ahead and add in a cactus and now we are totally set so here's how this is going to work we just placed all these green building tiles within the placement tiles layer we're going to export all the data associated with our placement tiles so all the green tiles and then we're going to import them into our game so basically everything we see right here with green tiles we're going to be importing into our game placing those tiles in their exact position and basically transforming them into a javascript object we can interact with so how do we begin exporting these tiles and then importing them into our game well to export these tiles we need to make sure that we go to file and then export as once we're within export as we can export this as a javascript map file it's basically a compilation of all the data related to all of our layers and i'm just going to save this as towerdefense.js it's totally okay if we overwrite this right now because all the data related to our polyline within object layer 1 is still going to be there if we need it later so let's go ahead and hit save and then replace and that's going to overwrite that one file now let's go ahead and open it so head on over to my finder double click towerdefense.js and here is our file so we want to scroll through this until we find a layer name of placement tiles we can also type command f and search for placement it's going to auto direct us to the data that we actually want to use so we're scrolling up above the name of placement tiles you're going to see this data property which has an array assigned to it so i'll explain this shortly but to start let's take this array to the very end copy it and head back to our project so within our project we're going to want to create a new js file that stores all this data related to our placement tiles so to do this we can go to file new file and then paste in all that data so i'm going to make sure that i assign this equal to a const and i'm going to call this placement tiles data add an equal sign and then save this with command s and then where do i want to save this well simply within our javascript folder dot js i'm going to save this as placement tiles data dot js so hit save and now that is available to us within our javascript project but if we want to use this within index.js which we do we need to make sure that we're importing it within index.html so we'll head on over there and then to import this within index.html all we need to do is duplicate one of these script tags then say we want to pull in from our js folder placement tilesdata.js so placement tiles data.js we'll hit save and now this should be available to us within index.js if we need it to double check that this works we'll go ahead and cause log out the variable that we declared in here which is placement tiles data go back to index.js paste that on in save and then head back over here to our game and refresh inspect an element head to the console and then in here our array of 240 items contains all of our placement tile data so this doesn't make any sense at first glance this is just a bunch of zeros and 14s but what we want to do is transform this into a 2d array what do i mean by that and why do we want to transform this into a 2d array let's go ahead and observe our data within placement tiles data so basically each number right here whether it be a 0 or a 14 represents one tile within our tiled map so everywhere we see a zero we're saying do not draw anything in this one tile location but every time we see a 14 we're saying let's go ahead and draw a placement tile in this specific location and this is a one-to-one representation of what we created in tiled so if we were to start from the top left-hand corner of our map we know we don't want to draw anything in the very top left-hand corner but once we move one tile over to the right we do want to draw in a building placement tile we should be allowed to place a building in this specific location so let's go ahead and look at this real quick and then scroll on back to tiled you'll see in the top left hand corner we do not want to draw anything but right here with this green tile we're saying we do want to be able to place a building right here the screen tile is representative of that 14. now things are arranged in a way right here where we're just scrolling through all these values but we don't really have a way to separate these values into rows and columns which we would want to do to start creating building placement tiles as an actual js object so we want to convert this one-dimensional array to a 2d array basically it's going to be an array of arrays it's going to look a little something like this we have our main array right here and then inside of this we're going to have another array that contains all these values and within this one row right here we're only going to have about 20 values so 20 values right there and these 20 values are indicative of how many tiles we have per row within our tiled map over here so for each row we have 20 tiles and each row is going to be indicative of the values we're passing into the child array within our main array so within our main array once we go ahead and loop through these first 20 tiles we're going to go ahead and loop through the next 20 put 20 values within the next array and we're just going to keep looping through this and putting 20 values in a new array until we reach the very bottom so basically we're going to have 12 arrays which represent rows of all of our tiles right here and we're going to have 20 columns and when we organize our data in this format a 2d array arrays within an array it's going to allow us to precisely place our placement tiles in the exact location so we can say hey we do want to be able to place a building right here so when i click simply place a building so let's start parsing our data right here into a 2d array so we can start adding our placement tiles to our game so to parse this into a 2d array within index.js we have all that data available to us this is simply an array what we want to do is create a new const and this const is going to be called placement tiles data 2d so this is a one-dimensional array right here this is going to be the 2d one we're going to set this equal to an array to start now we want to loop through our placement tiles data right here we want to say take the first 20 values put them within a new array and then push that array into placement tiles data 2d then we're going to go to the next iteration which gets the next 20 values then the next iteration which gets the next 20 and so forth until we run through all the data within placement tiles data so to get this effect we can create a for loop within this for loop i'll create a simple index with let i is equal to zero and then i want to say run through this array as long as i is less than placement tiles data dot length and then for each iteration of this loop at the very end i want to go ahead and take i and add 20 onto it because that is how many tiles are within each row within our actual game map so now i know for each 20 values i want to push in those values into this new array we just created so i'll select placement tiles data 2d and then push in a new array of values so how do i create a new array of values based on the first 20 units within placement tiles data well within push we can grab placement tiles data and then call an array slice function so what slice does is it takes an array and it says slice out the specific number of values from this starting location and this ending location so basically we only need to pass through two arguments the first one is going to be the starting location in which we want to slice out elements it's going to be i because by default i is equal to 0 so we're starting at the very first element we'll add in a comma and say we want to slice out i so 0 plus 20. so we're saying get the first 20 elements from placement tiles data and then for the next iteration of this array i is going to be equal to 20 because we added on 20 right here and then if we say we want the elements 20 to 40 because we're adding on 20 right here we're going to get the next 20 items until we loop through this whole array so this should give us the effect we want to go for to test this out we're going to console log placement tiles data2d i'll delete this console log up above save and then head back to our console and refresh and now you can see right here we have an array full of arrays which is great that's exactly what we wanted and each of these arrays has 20 items within it so if i were to stretch this out you can kind of see how this resembles our game map and everywhere where there's a 14 that is where we said we want to be able to place a building so this little row over here all the way down to our path we want to be able to place buildings as indicated by these 14s then we have a space in between each 14 each building that we want to place this is exactly what we drew out directly within tiled so now what we can do is based off of these rows and columns we can say we want to put a placement tile object at this exact location when we loop over it we're going to have an x value and a y value that's going to allow us to do this thanks to this parsing into a 2d array it's going to make more sense shortly as we actually go through this process so the next step is going to be looping through these arrays in a 2d manner how do we go about doing that well let's start looking through each individual row to loop through each row we want to take placement tiles data2d and save for each row within this array we want to call the following code so basically we're saying grab each of these rows that we just created zero one two three four five six seven eight nine ten eleven so we're grabbing each row and storing that array within this variable right here and now that we have that array we could call row dot four each for each what within the row well for each symbol essentially 0 or 14 are going to be symbols so let's go ahead and call this symbol right here and say for each symbol within the row we want to call the following code now we're basically selecting the first row looping through all the items within it and then we're going to go to the next row loop through all these items and we're going to keep going until we hit the very end right here so now we can analyze each individual symbol within this for each we can say if the symbol we're currently looping over is equal to 14 then we want to create a building placement tile we're going to push it into an array right here so let's go ahead and add a comment that says add building placement tile here so a building placement tile is simply going to be a rectangle basically a square but in order to create one of these it makes sense to create a class because that is going to make our code scalable and a lot easier to work with than if we were to use something else so to create a class i'm simply going to create it right above we'll go ahead and refactor this into its own file shortly but that class is going to be called placement tile with opening and closing curly brackets so i want to create a constructor within this new class and this constructor is going to pass through one singular argument it's going to be an object but within this object i'm going to have a property of position and the default is going to be x set equal to 0 and y equal to 0 as well so i know exactly what this should look like as i pass it through i'll add in the opening closing curly brackets to actually actually fire this constructor and then i'll say this dot position is going to be equal to the position we actually pass through right here now a placement tile is just going to be a simple square so we need some sort of draw method that actually draws us out on the screen so i'll create that draw method and then within this i'll say c dot phil rect what is the x position going to be well it'll be this dot position dot x which we declare up here the y position will be this the position dot y and then we need a width and height so we know the width and height of our tiles are going to be 64 by 64 but if it's not directly indicative of what 64 and 64 are right here what we can do is add in a property that says this dot size is equal to 64. so replace 64 down here within draw with this dot size in both locations and now we should be able to begin creating placement tiles and storing them within an array so let's create that array i'll go ahead and declare a const of placement tiles set equal to an array and now as we're looping through our 2d array down here right beneath this comment i want to take placement tiles and push in a new placement tile instance and this is going to take an object for the first argument they position inside of it that has an x and also a y so this placement tile is going to be indicative of the green little tiles we want to place along our map but how do we place a placement tile when we get a symbol of 14 which basically says put a placement tile right here based on which tile we're currently looping over we need to dictate the position of this new placement tile and we can do so by getting the indices of each row in each symbol we're currently looping over so if we look over here at our array each row we're currently looping over has an index associated with it the first row is going to have an index of zero the second is going to be one the third is going to be two and so forth and if we want to grab this index directly within our code as a second argument within our callback function right here for the very first four each right after row we can add in a comma and then indicate that we want to grab i which is going to be the index associated with each row so i right here is just representative of the 0 1 2 3 and so forth until we hit 11. and if we think about this each index associated with a row is going to determine a placement tile's y position because we're moving down for each row that we loop over so i typically means index i think in this case it makes sense to replace it with y actually to indicate that this is going to be the y index in which we're currently looping over because we're going through our rows and now that we're grabbing y right here when we create a new placement tile we can replace the static zero with the y index we're currently looping over and say whenever we hit 14 we're going to grab that y index but we're going to multiply it by a size of 64. because that is the tile size in which we declared up above it's the tile size declared within our map we want to push our tile down to this exact location multiply by 64. and when we do this all of our tiles are going to be placed correctly along the y-axis but we want to do the same thing for our x-axis as well so as we're looping through each symbol we're going to be going to the right we're going to have an index of zero right here an index of one right here all the way until we hit an index of about 19 at the very end so right here within our row.for each after symbol we can add in a comma and then add in an index which i'm going to call x this is going to be the x index and down here where we're assigning a position x i'm going to replace the zero with x times 64 which is the size of our tile save that and then i want to console log out all of our placement tiles so i'll grab this right here delete this cost log down below and replace it with placement tiles save and refresh and now we have about 39 placement tiles all pushed into this array and they're all going to be in the exact positions in which they should be rendered out at on our map so open up one of these you'll see the position has 64 0. 64 0 is right up here in the top left-hand corner where is the next placement tile going to be let's open it up it's going to be at 192.00 so that's going to be about right here and this is these is perfectly placed in the exact location in which we want to render out a tile but let's go ahead and actually render these out so we can see these being placed correctly to render these out basically we want to loop through all these placement tiles and then call their draw method that we declared right here so to loop through all these tiles we're going to scroll on down to our animation loop and right at the bottom right here after enemies dot four each i'll call placement tiles dot for each and say for each tile within this array i want to call tile dot draw so let's save this and see what it looks like within our browser i'll exit out of the console refresh and now we have all our placement tiles and their exact locations relative to where we placed them directly within tiled the only difference really is we're using a green tile over here here we never declared a fill style right now it's just red let's go ahead and change this to green so that it matches up with what we have entitled to do this we'll go ahead and find our class up above placement tile then declare that this dot color is going to be equal to a string of green if this is the case then within draw we can declare a c dot fill style is equal to this dot color and the reason i'm using a property of color right here is because we're going to be changing this later on dynamically depending on where we place a building but this is okay for now let's save this dot color right here refresh and now our placement tiles have that green background and our enemies have the red background so great the next thing i want to do is indicate when i'm hovering over one of these tiles to help the user know that this is a specific location in which we can place a building so the very first thing i'm going to do is actually change this color once more from green to a light white i'm going to use a very transparent color right here just to help indicate to the user that when we hover over this transparent element it lights up this is somewhere that we can place a building so how would i make this a more transparent color well right here with the replacement tile class instead of our default color being green i'm going to set it equal to rgba which takes four values the first is going to be how strong should our red color be now these values only range from 0 to 255. 0 is going to be a darker version of red 255 is going to be a very bright version of red so i want the brightest version possible it's going to be 255. i'm going to add a comma that says what should our green value be any value 0 to 255 i know i want this to be as bright as possible so i'll add a 255 and then what should our blue value be well 255 for this as well the final value is going to be alpha and this ranges from 0 to 1. if we put 0 right here this just means we're not going to show this at all it's completely transparent if we put 1 we're going to see the full color associated with this rgba value and if we use 255 for each value right here these colors combine at their strongest value to create the color of white so let's save this refresh and now we have that white value but the cool thing is we can change this alpha value right here down to something like point one save and refresh and you can see a very faint outline in which we might be able to place a building now this might be a little too faint but we can always turn this up by adding on to this alpha value i'll add on point zero five refresh and i think i like where this is going so now based on wherever my mouse is within our canvas i want to detect for a collision between each individual placement tile and where my mouse is if the mouse is hovering over one of these placement tiles we want to go ahead and light it up to indicate that this is a location in which a player can place a building so to add in this collision detection we're going to go back to our code and i'm going to create an update function that always monitors for whether or not our mouse is colliding with the placement tile we're currently hovering over so if i'm going to call update i want to make sure that i call draw we're going to call this code up above and then i want to create an if statement that says whether or not our mouse is colliding with this individual tile so if we need the position of our mouse well we need to add in an event listener before we can even use it with an update right here to add in an event listener usually i add these at the bottom of my file i'm going to scroll all the way to the bottom and then i'm going to call window dot add event listener like so so the first argument is always going to be what event we want to listen for in string format in this case we want to listen for a mouse move event so whenever we move our mouse on the window we're going to track exactly where we moved it and the second argument is going to be an arrow function this arrow function determines how we react to whenever we move our mouse across the window and this passes through an event object so let's go ahead and console.log out our event object so we can see what it looks like on the inside refresh with our console open when i begin moving my mouse across the screen now you can see if i open this that we have a few properties associated with that event the properties we want to focus on are going to be client x and client y so where on our window did we just move our mouse to while we moved it to an x position of 1277 and a y position of 5 19. we want to use this so that we can detect for collision between each placement tile and where we actually moved our mouse so to use this within some sort of collision detection formula i'm going to create a const right above this event listener called mouse equal to an object with an x and a y x by default is going to be undefined when we first load this and y by default will also be undefined totally okay to put that there but we do want to assign these values whenever we actually move our mouse across the screen so within add event listener right here i'll take our mouse dot x and assign it equal to event dot client x this is the exact value that we saw over here within our console we want to do the same thing for mouse dot y set it equal to event dot client y and now this object is always going to be set whenever we move our mouse across the screen perfect and now that this is being set we can use it up above within our placement tile class by passing it through into this update function so whenever we call update for each placement tile we're also going to pass through our mouse object and now that this mouse object is available to us we can use it within some sort of collision detection formula so we're going to create that collision detection by creating this if statement that first grabs our mouse dot x so where is our mouse on the screen on the x-axis if it is greater than this dot position dot x so the x position of the tile we're currently looping over then we want to call the following code so we'll go ahead and call this little red dot our mouse this is obviously one of our tiles we're saying if mouse.x is greater than the x position of this placement tile right here we know it is colliding on the x-axis at least from the left-hand side of our tile that is step one but we also need to determine whether or not it's colliding from the right side of the tile as well so we only want to activate this code if our mouse.x is within the right side a replacement tile over here how would we write that out as a conditional well we'd want to add in an and statement that says if mouse dot x is less than this position dot x which is going to give us the left side of our green placement tile so we're getting the left side right here plus this dot size we're adding on 64 to this.position.x that's going to go ahead and give us the right side of the placement tile so if the x value of this little dot right here is less than the right side of our placement tile then we do know it is colliding it's not colliding if it's over here it's not colliding if it's over here it's only colliding if it's in between the left and the right hand side of our placement tile that takes into account the x-axis but we also need to take into account the y-axis as well so we'll continue adding in and statements this and statement is going to say if our mouse dot y is greater than this position dot y then we know our mouse is colliding on the y-axis this means mouse dot y is within our building placement tile we also need to make sure that it's in the tile from the bottom side as well to take this into account we'll add in an end statement that says if mouse dot y is less than this dot position dot y plus this dot size that's going to add on height that says if mouse y is less than the bottom side of a building placement tile it is definitely colliding so now we're only going to call whatever is within this if statement if this little red dot right here is actually within our placement tile this little red dot remember represents our mouse so this is exactly what we want let's go ahead and console.log out within this if statement just some random text that says colliding to make sure that it functions correctly but remember before we actually test this out mouse needs to be available to us which we're passing through as an argument through update i guarantee you right now we are not calling update and we're not passing through an argument whenever we're looping over each placement tile that we have within our placement tiles array so let's go ahead and scroll down to our animation loop down below it's going to be right here on line 121 for me we're looking through all these placement tiles on line 129 and then we're calling draw we no longer want to call draw we want to call update instead but whenever we call update we need to make sure we're passing through that mouse object which we're assigning down here and setting its x and y values within our event listener so save that refresh and you'll see when i move my mouse we're not going to see anything related to that collision detection code until we actually hover over one of these white spots so as soon as i hover over one of those white spots you're going to see we're const lagging out the text colliding exactly what we want but if i hover off of it no longer seeing that being locked out it just stops completely this is going to work for each individual placement tile block that we have because we wrote correct collision detection code so now what we want to do is say when we hover over one of these we want to brighten up this one individual tiles alpha value which is just going to make it completely white to do this we'll scroll on back up until we find our placement tile class now you might be noticing as we're going about developing this it's really annoying to have to scroll on up and find the exact class we're looking for if this is the case and you're feeling annoyed this is a great sign in which you want to refactor your code so to refactor this it makes sense to place these classes in their own individual file so to do this what i'm going to do is start by taking out our placement tile class i'm going to select the whole thing and hit command x and then i'll save index.js and then over here within our js folder i want to go to file new file and then paste in that class of placement tile so i'll save this with command s and then what do i want to save this as i'm going to save this as classes all of our classes are going to go in here until this file gets too big and then i'll go ahead and break these up into their own individual files but right now this is totally okay all of our classes are going to go within classes.js save it within our js folder and now our code is a little bit better organized than prior but we do need to make sure we're pulling this into our project and to pull this in we'll go to index.html and i think it makes sense to pull this in right before index.js because we might be using placement tiles data or waypoints within one of our classes so we'll add in another script tag right above index.js and then instead reference classes.js so everything should still function the exact same let's refresh to make sure it does doesn't look like we have any bugs so great we do want to refactor index.js just a little further the way i'm going to do that is by taking our enemy class all the way from the very top right here on line 43 down below to 82. i'll cut that out of place and then go into classes.js and simply paste it on in we want to make sure that we have everything saved refresh and our game should still function as expected like it did before we see our enemies everything is working perfectly but our code is going to be a lot cleaner because all of our classes are separated into their own file and now index.js really just focuses on our implementation instead now back to getting these placement tiles to light up whenever we hover over one of them now we can just go inside of classes.js scroll to the top and find our placement tile class that's a lot easier than having to search for it within index.js what we can do is say when we are colliding when we're constant logging out colliding we're also going to set this.color equal to a value of white when we assign this equal to a string of white we're just getting the full opacity color right here so this will be equal to one and it's going to brighten up the whole thing let's go and save that refresh and then hover over one of these you'll see that it just brightens up and all these are actually going to brighten up because we never actually set our color back to its original transparencies so to set it back to its original transparency after this if we could write an else that says this dot color is going to go back to the string that we have up here so i'll copy that paste within color save and refresh and now when i hover over one of these yes it's going to turn white but as soon as i hover off it's going to go back to its original value this is going to work for each placement tile that we currently have drawn onto our game so the next step is going to be adding in an actual building object whenever we click on one of these tiles that's lighting up so hard to click right here we'd want to go ahead and place a building object it's going to be a square to start in that exact location so how do we go about doing that well the first thing we need to do is create some sort of building class and to do that within classes.js we can scroll to the bottom and add in a new class of building with opening closing curly brackets so what does a building look like well it's going to have a position and it's going to look rectangular so here we'll add in a constructor and we know this constructor for each building we create it's going to pass through one argument a simple object within the simple object we're going to pass the right position that is equal to and x is zero now y of zero just so we can see exactly what position looks like before we call it and we want to set this dot position equal to position now we could use inheritance to do this by extending the building class but personally i like to stay away from inheritance just a little bit especially when games start getting really complex because it creates for a lot of abstraction and a lot of editing other code that might affect other objects in this case i'm just going to stay away from inheritance at least for the time being maybe we'll add it in later but i just want to let you know that is an option because this code right here is the exact same as we have right here for our placement tile now what would a building look like let's add in a draw method that determines exactly that so building is going to have a fill style i'm going to make each building have a color of blue so we can separate it from everything else and then i want to call c dot fill rect we're just going to draw a rectangle at an x coordinate of this.position x a y coordinate of this.position dot y then a size right now 64 by 64. that's pretty much all we need to get started with a building so let's head back to index.js what we're going to do here is right above animate i'm going to create a constant called buildings set that equal to an empty array so here's how we're going to handle this whenever we are currently hovering over one of these placement tiles and we click we want to say place a building into that building's array and then render it out we just need to determine which building tile are we currently hovering over in this moment in time we're basically going to be setting an active tile let so let's go back to our code right beneath buildings i'm going to declare a let equal to active tile and i'm going to set it equal to undefined just to show that intentionally i don't want anything to find on this until we set it directly so i only want to set an active tile when i know that i'm hovering over one of the placement tiles we know we're hovering over one of the placement tiles within classes.js specifically at the very top with our placement tile class right here with an update is where we're currently determining that but this is being called for every frame currently and i think there's a better way to do this we can go ahead and call this only when we're moving our mouse instead so what i'm going to do is within index.js we have active tile equal to undefined but whenever we move our mouse i also want to call that collision detection code for each building placement tile and then i'm going to set active tile equal to the exact tile in which we're currently hovering over but we need to get tile in the first place and i'm going to show you how to do exactly that so what we want to do is loop through all of our tiles we can loop through all of our tiles by grabbing them with placement tiles dot for each and save for each tile within this array we want to call the following code so within this we want to call our collision detection code between our mouse which is being set up above and the tile we're currently looping over we know that collision detection code is within clauses.js it's this if statement right here so i'm going to grab everything within this if statement hit command c and then go back to index.js and then write a newest statement within this for each that says if the following conditional is true then within this i want to set active tile equal to the tile we're currently looping over and then since this tile is being set this is the one tile out of everything that we're looping over i don't want to loop over anything else and if that's the case i want to call break which should get us out of this for each loop whenever this is activated now the thing is for each does not allow you to call break it does not allow you to break out of the for loop why while the javascript developers just haven't implemented that feature yet so as a result we want to refactor this for each loop into a standard for loop in which we indeed can call break so to refactor this into a for loop i'm going to call four let i is equal to zero i want to say loop through this for as long as i is less than placement tiles length and then for each iteration i want to add one onto i with i plus plus this is the exact same thing as we have down below we just need to select the individual tile that we're looping over and to get that tile we can create cots within the for loop that says a cost of tile is equal to our placement tiles array and we want to grab the one individual tile we're looping over by adding in our index of i right here so now this for loop is indeed the exact same as is for each loop down below it's a little more verbose but it's okay because we need this in order to call break like we want to to make sure we're breaking out of the swirl loop and making things as efficient as possible so i'm going to take this if statement all the way down to break cut it out and then delete this old for each now i'm going to take that code and paste it within our for loop beneath the constant and it looks like i'm missing a bracket somewhere i'm missing a bracket for this if statement might have accidentally deleted it i'll just go ahead and add one in after break save and now our code looks good to go now this code isn't going to work if we're using this right here because this is only available to us within the actual class instead what we want to do is replace each instance of this with the actual tile in which we're currently looping over so go ahead and replace that and now this code should function but we need to think to ourselves once we set active tile it's never going to be on set if we hover off of one of these blocks so for each time we move our mouse right above this for loop i'm going to set active tile equal to null intentionally where we want to empty before we actually monitor for collision and then finally down below beneath our for loop i'm going to console log out active tile to make sure that this is actually being set correctly as we hover over the different tiles so let's save that refresh and start moving our mouse around so you'll see as i move this we keep logging out null that's exactly what we want but once i hover over one of the tiles now that it's being set to the exact placement tile in which we're hovering over so we know we have an active tile set when we hover off of it it goes back to null our collision detection code is working and now we can use this active tile to actually say place a building when we click on this direct active tile let's go back to our code and then what we're going to do is add in another event listener i'll just go ahead and add this up above make it a little easier to read for you guys viewing and this time instead of calling window.addeventlistener i'm going to call canvas.addeventlistener so we're pulling in canvas at the very top of our file this is one of the very first things we did but when we declare we want to add an event listener directly onto the canvas object well this is only going to monitor for clicks directly on the canvas not anywhere within the window so if we click over here the event is going to fire but if we click off the canvas the event's not going to fire just a way to make your code a little more robust make sure that your intentions are exact so within canvas.addeventlistener we're going to listen for click events on our canvas and add in a second argument which will be an arrow function we do want the event object here as well so whenever we click on our canvas the first thing we want to do is monitor for if an active tile is set because we know if there is an active tile that our mouse is currently hovering over that one individual tile this is basically saying if we're colliding with a tile if we are colliding with a tile we want to take our building's array and then push in a new building at a specific position so we know a building object takes an argument of an object with a position property inside of it that also has an x and also a y so where should we be placing our building on the x axis well our active tile has all the properties associated with the current tile we're hovering over including its x and y position therefore for x position on the building we can say we want to set it at an x position of the active tiles position on the x axis we can do the exact same thing on the y axis by saying place the building at the active tiles position but on the y-axis this is going to allow us to place a building but i don't believe we are rendering our buildings within our animation loop and we are indeed not so right up here within our animation loop on line 57 i'm actually going to go down to line 67 and then add in our buildings and loop over these with a four each let's say for each building within our buildings array i want to call building dot draw so we'll save that refresh and now when we click on one of our tiles we're going to see that we just drew a building in place if i click anywhere else we're not drawing a building because there is no active tile but if i click on any individual spot where there is a tile you're going to see we can indeed dry a building in that exact location now the very last thing i would do here is make sure that we cannot draw buildings on top of each other because yes we are colliding with this tile that was there previously underneath if i click we are still adding buildings to our building array and i can even prove this to you by first getting rid of this console log down below so it doesn't clutter up our console and then within our click event listener every time we click i want to console log out our building's array just so we can see exactly what is inside of it so let's save refresh and then when i start clicking you're going to see it's empty if i click on one of our placement tiles it starts populating itself which is great and now currently we have seven buildings in place if i click off of one of the buildings we still have seven buildings but if i click on one of the buildings that already exist we're still adding a building into that so we need to prevent that from happening otherwise we might get multiple shots coming from a building at once which is something we do not want so here's how we're going to fix this i'm going to head inside of classes.js make sure that i'm focusing in on our placement tile class i'm going to add in a property called this dot occupied so is this placement tile occupied in this moment in time by default none of our placement tiles will be occupied so we'll set it equal to false but now we can use this property within index.js specifically when we click so we know we're already assigning an active tile that's available to us if an active tile exists yes we do want to push in a new building to this exact location we only want to push it in if the active tile is not currently occupied so we'll add in an and statement that says if our active tile is occupied wall basically is not occupied by adding in an exclamation point at the beginning then we do indeed want to push in a building so this is going to prevent us from pushing in buildings on top of each other so we should be able to push through a building when a tile is not occupied but as soon as we push through a building right after that we want to select the active tile and then set is occupied equal to true that way we can no longer call buildings.push for this one individual tile no matter what so let's save that then refresh and now when i click on this one location to create a building yes the building is created but if i click again you're going to see only one building can be placed there we cannot draw buildings on top of each other no matter how many times we try so this is great this is definitely setting us up for a success but one last thing i wanted to do is make sure that our buildings these blue little squares take off the full width of an actual building sprite so the full width of a building is going to be two tiles instead of one how can we fix this well it's very simple actually all we need to do is head over to classes.js and find our building class for me it's going to be on line 70 and i know our building width down here is equal to 64. so if i want to be more declarative in regards to what 64 is in that position i can add in this dot width and set it equal to 64 for our constructor up above now that i have this.width available to us i can use that within our fill rect function it says this dot width still going to be equal to 64 but i know that a building should be twice the size because that's how large our sprite sheet is so i'll save that and then refresh and now when i draw out a building you'll see it takes up the full width of that location in which we might want to draw a building on so this is absolutely perfect and this is setting us up for success in regards to getting real buildings on the screen or at least real sprites on the screen that are shooting projectiles at our enemy before they reach the very end right here so back in to do we can successfully check off building placement now that we have pathfinding and building placement let's go ahead and start shooting projectiles from these buildings directing them at our enemies so in order to begin shooting projectiles the very first thing we need is some sort of projectile class so in order to add a class to our game we're going to go over to our new classes.js file and scroll to the very bottom of this file so you can create this class at the very bottom of the file i'm going to create it on line 70 so you can see it a bit better but this class is going to be called projectile with an opening closing curly bracket and then each class we create needs some sort of constructor function so we can assign properties to each projectile that we create so what does a projectile need what does it actually consist of well a projectile is just going to be a small circle that is launched towards an enemy so if we want to create some sort of circle object we need some sort of position associated with the projectile so within our constructor i'm going to pass through one argument which takes one property to start it's going to be positioned and i'm going to say that the default for this should be an object with an x property of zero and also a y property of zero so now that i'm passing this through as an argument i could say that this dot position associated with the projectile we're about to create is equal to the position we pass through as an argument within its constructor now what other properties might a projectile have while projectile is definitely going to be moving because we need it to go from the building towards an enemy and typically if something is moving across the screen what i like doing is adding in a property called velocity and this is going to be equal to an object with also an x property set that equal to zero to start and then a y property equal to zero as well now velocity is going to be determined programmatically which means i don't have to pass it through with a constructor right here which is why i'm defining it down below but this should be all we need to get started with our projectile's properties so next to actually draw this out on the screen i'll add in a draw method and within draw i want to draw some sort of circle so to create a circle within canvas we're going to reference our context with c and then i'm going to begin a path this path is going to be an arc so to create an arc i want to reference our context once more and then call c dot arc so this will allow us to draw an arc which we're going to use a full 360 degrees to draw a full circle with this method we could draw one half of a circle one fourth of a circle but we want to use it to draw a full circle because canvas does not come with a full circle method by default so we need to use arc to create that circle and arc takes a couple of arguments the first is going to be an x position so we know our position is being passed through as an argument right here and being assigned to a property we can grab that property with this dot position dot x and then add in a second argument which is going to be the y position of this arc so the y position will be this dot position dot y which we assign up above and then the third argument is going to be the radius of this arc so how large is a circle going to be by default i want this to be about 10 pixels large for the radius and then we need to determine how large should this arc be should it be a 90 degree arc 180 360 degrees well right here we're going to say where do we want the arc to start for this fourth argument we want it to start at a radians value of zero and then how far do we want this to extend well we want this to extend the full 360 degrees of a circle so you might be thinking right here we can just put in 360 and that means we're going to draw a full arc but in this case we need to make sure that this value is not degrees it actually needs to be radians so how do we convert 360 degrees to radians to complete a full circle i'll tell you right now we need a reference math.pi that is going to be half of a circle so to get a full circle in radians all we need to do is multiply this by 2. so we're drawing our arc from zero radians to math pi times two which just means we're drawing the full length of a circle finally we just need to fill this arc in which we can do with c dot fill style to determine which color we want to fill it in as i'm going to say that our projectile should be orange to help differentiate it from everything else we have going on and then we want to actually fill this in with c dot fill parentheses so we have a good blueprint for projectiles that are going to render out as circles on the screen but now we actually need to get them rendered out into our game so to render this out i'm actually going to scroll down to our building class and what i'm going to do within our building class specifically within the constructor is create a property called this dot projectiles and i'm going to set this equal to an empty array to start so each building is going to be responsible for managing its own projectiles that includes rendering them out on the screen creating them and so forth so to start rendering out a projectile on top of a building within this array i'm actually going to add in a new projectile which we can now do because we created the class above so what does a projectile take well it takes an object as an argument which has a property of position so where should we be assigning the position for this one projectile well since we're creating this within our building class what we can do is for x coordinate we can assign our projectile to have a position of this dot position dot x and that's going to assign this projectile to the very left side of wherever building is placed and then we can do the same thing for y we'll assign our projectile's y-coordinate to this dot position dot y and now whenever we spawn a projectile it's going to be placed in the top left-hand corner of our building because we have this stop position available to us whenever we create a building so each building we create should have one projectile within a projectiles array let's go ahead and get this rendered out on the screen so to render this out we need to head back to index.js and go inside of our animation loop which for me is on line 57 so on line 69 i already know that i'm looking through each of our buildings and i'm selecting each individual building we're drawing out those buildings right here but after this what we can do is select our building and then grab its projectiles once we have its projectiles we can run for each and say for each projectile within the building projectiles array we want to call the following arrow function and now that we have each projectile object available to us we can simply cop.draw which should in return draw the projectile out onto our canvas so let's go ahead and save this and then head back to our game refresh and now when we click and drag building you're going to see a projectile is now created with it perfect that's exactly what we need to start but when we're shooting projectiles from buildings it doesn't really make sense to have the projectile start from top left hand corner of the building we actually want this to shoot from the center of the building instead so how by default would we move our projectile from here to the center of our building well let's find out where we are actually creating projectiles it's going to be in classes.js specifically right here on line 92 when we just added in this new projectile to our projectiles array so we no longer want this to be in the top left hand corner which is associated with our building with this dot position instead we want this spawned in the center of our building so what we can do is right beneath the width we can add in a property called this dot center set this equal to an x and also a y value so what would the x value be for the center of our building well we can reference this.position dot x to get the very left hand side of our building but to get the center on the x coordinate we would add on this dot width divided by 2. so this.width is available to us because we assigned it up above we're saying that we want to add on to this a value of 64 because this.width is equal to 128 when we divide that by 2 we get 64 should mean that our center is going to be right in the middle on the x-axis now for y we want to do something very similar we want to assign y equal to this.position.y that's going to be the very top of where this building is drawn but we can get the center by adding on this dot height divided by 2. now it's important to note we never actually created this.height and if that is the case right beneath the width we can add in a property called this.height and set this equal to 64 because we know our buildings are not taking up two tiles they're only taking up one and now we have this.center available to us which we can now use when spawning a projectile so instead of referencing this.position.x i'm going to reference this.center.x same thing for y i'm going to reference this dot center dot y instead of position so let's save that refresh and then create some buildings now you'll see that our projectiles are spawning from the center of our building rather than the top left corner so the next thing we want to do is get this projectile moving towards an enemy that we have moving across our screen so how do we go about doing that well we want to do the exact same thing that we are doing between our enemies and our waypoints by calculating the sine and cosine values and assigning those to our enemy's velocity but in this case we're going to be assigning those values to our projectile's velocity instead so a quick recap for you we're going to go ahead and create a right triangle between the two points in which we want our projectile travel to it's going to look a little something like this once we create this right triangle we want to get the angle associated with this right triangle once we have that angle what we can do is plug the angle into sine and cosine functions we'll go ahead and say theta is going to be the angle right here and once we get these sine and cosine functions we can assign the results to the velocities associated with this one projectile right here cosine is going to go to our x velocity and sine is going to go to our y velocity and that's always going to make sure that this projectile is moving in the right direction towards whichever point we specify on our enemy so first thing first we need to get this angle right here between our projectile and a specific enemy so we'll head on over to our projectile class right here and i'm actually going to add in an update function because this is going to update all the values associated with this one individual projectile we want to update so whenever we call update we want to make sure that we call this.draw it's going to actually draw out our projectile and now we can start editing our values let's go ahead and create a const called angle this is going to be equal to the theta angle that we're getting right here so to get that angle we're going to reference dot a tan 2. so remember atn 2 takes the distance on the y-axis and the distance on the x-axis as its argument so what is the distance on the y-axis between this one individual projectile and the enemy in which we want to go towards well let's go ahead and calculate it to grab an enemy which we can start pushing a projectile to we can reference our enemies array and then i'm just going to reference the very first one to start we're going to go ahead and fix this and populate this dynamically later on but just to get this code working we'll populate it with enemies bracket 0 to get the very first one with our enemies selected we know we want its position on the y-axis now all we have to do is subtract this dot position dot y which is going to give us the y distance between this enemy and the actual projectile which we're currently dealing with but we do need a second argument and this is going to be the distance on the x-axis to get this we can simply copy the statement in which we just put in paste it as a second argument and then all we need to do here is swap out the y values with x so make sure these x values come in as a second argument that is just the way a tan 2 works but now whenever we spawn a projectile and call update this angle between the enemy and the projectile should be available to us that means we can select this dot velocity on the x-axis and set this equal to math dot cosine with the angle we retrieved as the argument it's going to make sure that we're always pushing our projectile in the right direction on the x-axis so that it goes towards the enemy we want to do the same thing for the y-axis so i'll select this dot velocity dot y set this equal to math dot sign and then pass through the angle in which we're retrieving right here so this is going to produce the perfect ratio between x and y that pushes our projectile towards the enemy the last thing we need to do is set this.position.x to always be incremented by this dot velocity dot x so for each frame we're adding on the current velocity retrieved from this equation up above we want to make sure we're doing the same thing for this dot position dot y for each frame we'll add on this dot velocity dot y and we know we're using the position that we sign right here within our actual draw function which is going to give the illusion of this moving in the correct direction so we want to make sure that we save this but we also want to make sure that we're calling update and not draw within index.js for each projectile so right here previously we didn't have an update function now we do so we'll call update instead and let's save this then go back to our game and then create a new building so as soon as i create this building you're going to see their projectile is automatically moving towards the position associated with the very first enemy and each time i create a building with a new projectile you're going to see that these are following that very first position right here now it doesn't really make too much sense in my opinion to be going towards the top left of an enemy instead we want the projectiles to be going towards the center of an enemy so this is something that we can fix within classes.js whenever we're calculating this angle instead of getting the angle between the enemy's top left position which we're currently doing by referencing the position values right here we can instead replace position width center in both locations now if we're going to replace that in both locations we need to make sure that our enemy's class actually has a center property available in it so let's scroll on up until we find our enemy class it's right here and indeed it does so just by replacing position with center within this equation we should be getting our projectile moving towards the center of an enemy rather than the top left corner so we'll save this refresh and then create some buildings now all of these should be moving towards the center rather than top left and indeed they are so perfect now the very next thing i would do is make sure that i can remove these projectiles whenever they touch an enemy so we could run some circular to rectangular collision detection right here because our projectiles are circular and our enemies are rectangular but in this case it's going to be a lot easier to just make our enemies circular and run collision detection on that so we don't have to write any extra complex code right here so the first thing i would do is swap our enemies out with circles we're going to do this anyways when we replace our enemies with sprites so let's go ahead and do it now let's find our enemy class i'm going to scroll up to line 29 and there it is and to replace this with a circle i'm going to comment out c dot phil rect and beneath this i'm going to begin creating an arc so to create an arc i can do that with c dot begin path and then call c dot arc so i want to challenge you to try drawing your own arc right here pause the video see if you can do it otherwise let's do it together so for the very first argument right here arc takes this dot position dot x the second argument is going to be the y position of this arc which we can get with this dot position dot y the third argument is going to be the radius associated with the arc so we'll reference this dot radius instead of a static value but if we want to reference a property like this we need to make sure that we create that property within our constructor which i'll do with this dot radius and set this equal to i don't know let's say 100 to start because that is the size of our width and height and then next to that we need to declare where should this arc start i want this to start at a radians value of 0 and then go all the way to a radians value of math dot pi times 2 to complete a full circle now i just need to fill this arc in which i'm going to do with c dot fill and now we should have a circle instead of a rectangle associated with our enemies let's save this refresh and watch as our enemies come so there are our enemies and right now they are very big and they're not really traveling from the center because i don't believe we declared the center to be where we should draw our arc from which indeed we did not so let's change position right here for x and y to the center we declare it up above and then also let's decrease the radius from 100 to 50. that should actually give us a full diameter of 100 right here so that makes sense when i refresh that that looks a lot better the enemies are closer to the size in which we had them earlier so i'm going to go ahead and stick with this for our new enemies so what's going to happen next is whenever we create a building it's going to shoot a projectile and once that projectile touches the outer rim of one of these enemies we're going to splice out that one individual projectile and remove it from our game altogether so to detect for collision we'll head on over to index.js and begin writing some collision detection when we actually have a projectile available to us so to write some collision detection code between two circles we need to get the distance between the two so that means the distance between this point all the way to the very center of the enemy and to get this distance right here we need to get the y difference and also the x difference between the two once we have these two values we can plug them into an equation and get the distance of this right here let's just say something like 20. so what equation do we have to use to get this value well it's going to be something called math.hypot so right here where we're looping through our projectiles let's create a const called distance i'm going to set this equal to math.hypot it stands for hypotenuse which is just a fancy word basically just means the long side right here in which we assigned it 20. but math high pot takes the difference on the x-axis for its first argument and the difference of the y-axis for its second argument a little confusing compared to math 8-10-2 but we can get the x difference by creating a const of x difference or distance doesn't matter what you call this really and then grabbing an enemy's position on the x-axis and subtracting a projectile's position on the x-axis so we definitely have a projectile available to us but what we don't have is an enemy available to us that is only available up above when we're looking through enemies.for each so we need to find a way to get the enemy which a projectile is associated with and an easy way to do that is to simply prefix enemy with projectile dot enemy so what's going to happen here is each time we create a projectile we're going to assign a specific enemy in which that projectile should be moving towards the enemy is going to be assigned to an enemy property therefore when we're referencing a projectile we can reference that enemy's position to make sure that we're always monitoring for a collision correctly between our enemy and also our projectile but if we want to use the style of code with projectile.enemy we need to make sure within classes.js we find our projectile class and then add in a property of this dot enemy and this is going to be equal to whichever enemy we pass through its constructor so we need to make sure that we declare an enemy argument and then find wherever we're actually creating a projectile and that is going to be down below within our building class so right now we're creating a projectile right here now we can also pass through an enemy property which we are going to assign dynamically within our building class but for now we'll just grab our enemy with enemies zero it's going to give us the very first enemy within our enemies array but now the enemy's position will be available to us directly within the projectile that we create so let's save this make sure that we also have index.js saved as well and now we should definitely be getting the x difference if we want to test this out before writing any more code we can comment out distance then console.log out x difference then create a projectile within our game so let's save refresh and then open up our console and we should see when we create an enemy the distance between the projectile and the enemies so great that is looking good let's take care of things for the y axis as well so i'm going to duplicate line 75 of this x difference and then call this y difference instead so to get the y difference we're going to reference our projectile enemy position dot y and subtract from that the projectile position dot y and this code is almost completely correct but we do need to make sure that when we're referencing an enemy like we are right now that we're referencing the enemy's center because that is where we want to begin monitoring for collision for we don't want a monitor for collision from the top left hand corner of the enemy so whenever we're referencing enemy we actually need to reference the center not just the position for our projectile yes we can definitely reference our position because since we're drawing an arc that arc by default is drawn from position x and y we don't actually need to move this value to create some sort of different center value so that should make sure that the x difference in y difference is correct and now we should be able to use them within this math.hypoth function so the very first argument is going to be the x difference the second argument is going to be the y difference and now distance will give us the two points between our enemy and our projectile so let's log out distance and see what that looks like and i'm also going to do a command f for console.log to make sure that i'm deleting any other console.logs that i don't want muddying up our code so i'll delete console.log in all those other locations and just keep distance right here and i'll also check classes.js real quick to delete any other console.logs that might be in here and there is one save that save index.js and then refresh right click inspect element then open up the console and now when i create a projectile you're going to see the distance between our projectile and the center of our enemy and that's trying to get as close as it can to zero but it's just a little slow so it's kind of lagging behind and you can see it's getting closer and closer each time it takes a corner turn but we went all the way from the very top all the way from something like 300 pixels of distance down to about six to one to zero pixels so we know we're getting the distance correctly but now we need to actually remove this projectile once it touches the edge of an enemy's circle so with this distance we can say if the distance between these two points is less than the radius of the enemy which we can get with projectile dot enemy dot radius plus our projectile's radius so projectile.radius that we know the edges of the two circles are touching and that we want to remove the current projectile from the scene so to remove the current projectile we can select our building that we're currently looping over up above grab is projectiles array and then call splice where do we want to splice this from well we need some sort of index from our for each which we can add in with comma i that'll give us the index and now we can use it to say at this one specific index of i remove one value from building.projectiles but we always need to make sure we're looking at our code closely we're referencing that radius right here on our enemy which we know we added in previously but did we add a radius onto our projectile class let's go and check it out so within classes.js let's find our projectile it's on line 73 for me and i don't see anything related to a radius so it's very important that we add this in here otherwise that function might not work so here i'll add in this not radius what is the radius of each projectile currently well right now it's a static value of 10 so we can assign radius equal to 10 and then make sure when we're actually drawing our arc we're referencing the property of above so we'll do that with this.radius and now within index.js this if statement should definitely work we should be splicing out a projectile once it hits an enemy so we'll save this refresh and then draw a building once that projectile touches the very first enemy it should be removed and there it goes so this is looking great but one thing i do want to note is since we are looping from the front of an array using dot for each right here we might have some bugs later on if you're using splice within four each you're basically introducing the potential to add bugs to your game the bug you might deal with is basically a flicker across all your projectiles so why does that even happen in the first place when using splice within four each well since for each loops from the very start of an array we're going to start from right here and go towards the very end if we were to call splice on this projectile right here we'd go ahead and cut it out completely what that's going to do is basically move these two remaining projectiles back one index so basically we would be skipping over the rendering process of this projectile because once we increase the index within four each to go to the next item within the array we're basically saying only render out this last remaining projectile because this one got skipped over due to the removal of the previous one and since this one did not get rendered out it introduces a flicker which basically just makes your game look really jank so as a result whenever you're using splice within a for each loop i recommend swapping out for each with a traditional for loop that loops from the back why would we loop from the back well let's say that we're looping from the back and we're rendering in this direction we're going from left to right we're going to render out this first one and then we're going to splice out this third projectile if we were to splice that out yes this last item the array would be shifted over to that current position but the thing is we already rendered this item out which means when we go to the next index we go to the very next item available to us and there isn't going to be any flicker because we're not skipping over any projectiles within our array in the process if we're looping from the back so let's make sure that we don't introduce any bugs in the future by swapping out our for each right here with a standard for loop that loops from the very back of the array so to swap this out for a for loop i'm going to write 4 let and i want this to start at the very last index within our array so i is going to be equal to our building dot projectiles dot length minus 1. that's going to give us the very last index and i want this to run for as long as i is greater than or equal to zero so once we hit the very first item within our array we're no longer going to run this loop but for each iteration of this loop we want to subtract one from i this just means we're going to hit every item within that array from the very back and then we just need some opening and closing curly brackets so with this for loop i is going to be available to us similar to like it is within this four each but we do need a projectile to grab a projectile within this for loop we can create a const call projectile and set this equal to our building dot projectiles that'll give us that array and then select the index in which we're currently looping over from the back and that's going to give us the very same thing in which we see down below just in a different format that is going to be bug free so let's delete to line 72 and then i'll also delete the closing acrylic bracket and parentheses associated with that for each and i just want to add in an ending curly bracket and make sure that i get rid of this curler bracket right here this is going to be replaced with this ending curly bracket i just added in and your code should look something like this so let's save this refresh and make sure that our projectile is still being removed once it touches an enemy which indeed is so great our code still works it's going to help prevent us from running into bugs in the future now we might want to speed up the speed in which these projectiles move and we can do that really easily let's go ahead and find our projectile class within classes.js and down below where we're assigning a velocity based on cosine and sine we can basically multiply this by a value that's larger such as 5 maybe even 10 and what 5 represents is the power in which we're adding on to our x and y velocity we can even create a const called power set it equal to five and then replace five in these two locations just so we know exactly what five means so we're multiplying that by power and it should speed up our projectiles and all of our coaches still function as before let's save this refresh and then click it's definitely moving faster but is it getting removed yes it is so no issue with that looking great now the very next thing we want to do is spawn multiple projectiles but make sure that we can only spawn projectiles if our buildings are within a specific range of our enemies up here how would we go about doing that well first let's add on a radius to our building so at the very bottom right here within our constructor i'll say that this dot radius is equal to around let's just say 250 so our building radius is going to be 250 this is basically the radius in which we can select enemies to shoot projectiles at once an enemy is outside of this radius we will not be allowed to shoot projectiles at them so we have radius available to us let's see what this radius looks like by adding in an arc so we can do that with c dot begin path and then call c dot arc we can reference this dot position dot x this dot position dot y third argument is going to be the radius in which we just created which we can grab with this dot radius and then we know we want to start from a radians degree of zero and end with irradiance of math dot pi times two and we always need to take in consideration we are using a center right here for our building so we don't really want this arc to start at the top left of the building but rather the center so we would replace position with center instead and then we can call c dot fill to fill it in now i want this arc to be a little bit of a different color from the actual building just so we can better differentiate what is the building and what is the arc in which we can begin shooting enemies to do that right before fill we can add in a c dot phil style and set that equal to an rgba value which will allow us to give this some transparency so red is going to be a value of zero green is going to be a value of zero and blue is going to be 255 to make sure that it's as bright as possible but i do want this to be transparent and make it transparent i'll say that it's alpha value it's going to be 0.2 so let's save that refresh and then draw a building and now we have a radius associated with each individual building so these are basically locations in which we can start shooting at an enemy once an enemy runs in to this radius right here we're going to select an enemy and then we're going to target that enemy until they move out so if the enemy is no longer available to us then we'll select the next enemy in line and if no enemies are available to us then we're not going to do anything this building will not be allowed to shoot but how do we go about selecting enemies and shooting projectiles at them non-stop well basically each building we create is going to have a target associated with it this is what we're currently shooting at so we have some sort of target associated with the building we'll add that in with this.target and this isn't going to be equal to anything to start we're going to generate this on the fly for each frame in which our enemies are moving through our building's radius so to generate this on the fly we can head over to index.js find where we're looking through our buildings and then for each frame of each building we can say that building dot target is going to be equal to null so we're always going to make sure that this is empty before we try setting it to set this we need an array of enemies which have the radii overlapping with our building's radii at the same time so if our building is overlapping with an enemy we're going to set building.target but we need to find which enemies those are so to find those enemies we can create a const of valid enemies so these are the enemies in which we're going to be able to shoot at we can get these by selecting our enemies array and then calling filter on this so this takes an arrow function as its argument but basically within filter we can say for each enemy within our enemies array we'll call the following arrow function and this is going to return a value it's going to be either true or false if this value is true we're going to remove this enemy from our enemy's array and it will not be stored in valid enemies but if it is true we will be storing that enemy here which means that we can use it and set building target eagle 2 the very first result in here so basically we want to test if this enemy we're currently looping over within our enemies array collides with our actual building radius to grab that circular collision detection code we can go down below to line 78 and grab the exact code in which we're using to test for collision between our projectile and the enemy i'll grab these three lines paste them up above within our new filter function and then we just need to do a little bit of refactoring so we don't want to test for collision between our projectile.enemy but rather the current enemy which we're looping over so delete projectile dot in those two places and we're detecting not for our projectile but rather the current building in which we're looping over so this will give us the distance between our building and also our enemy and if this distance is less than the radius associated with an enemy and a building then we're going to go ahead and return true or false so with return right here we can say if distance is less than our enemy radius plus our building radius we know that the two are definitely overlapping that means this is going to equate to true which means any enemies that are overlapping will be stored within valid enemies let's going to test this out by const lagging out valid enemies we'll save that head back to our game and refresh and then place a building and it looks like we have this other console going on right there let's get rid of that looks like it is this down here on line 88. i'll get rid of constant log distance but before proceeding onwards we always want to look at our code real quick to make sure that everything is set up correctly so we're definitely referencing the center of our enemy because we're using dot center but in this case a building is square and therefore we need a position x and a position.y but we want to reference the center of our building for this collision detection because that's where we're drawing the radius from that means we want to get rid of position right here in these two locations and replace it with center to make sure that our collision detection code is as accurate as possible so let's save that refresh and draw out our building and now you'll see over here no enemies are overlapping with our building radius but as soon as one enters now we have one enemy now we have two enemies and now we have three enemies and this is just going to keep increasing for as long as enemies keep entering this little radius right here and as soon as an enemy leaves maybe this one will leave completely over there you're going to see that it decreases so we have full collision detection code monitoring for each building whether or not an enemy is within its radius if an enemy is within its radius that is going to mean that we can start shooting projectiles at that enemy that's currently in here so the last thing we need to do regarding setting a target for a building is right beneath this valid enemies code in which we just wrote i'm going to say that our building dot target is equal to valid enemies bracket zero that's going to give us the very first enemy that is within this array if nothing is there wall building target is just going to be equal to null or undefined so i'll delete this const log and now all we need is a way to make buildings start shooting continuously at this one target in which we're selecting so over in classes.js we're going to focus in on our class of building right now we're creating one projectile whenever we create a building we're no longer going to be creating projectiles this way but rather based on a timer so i'm going to add in a property called this dot frames for each building we create and this is going to be equal to 0 to start now for each time we call update i want to increase this value by 1. we don't actually have an update function in place for our building just yet let's add one in i'll say that our update function should go ahead and call this dot draw and each time we call update we're going to call this dot frames and add one onto it with a plus plus so now what we can do is we can write an if statement that says if this dot frames modulo let's say 500 is equal to zero then we want to push in a new projectile into our projectiles array so basically what this is saying is take the current value of frames if we divide it by 500 and the remainder is equal to zero then we want to call the following code so basically for every 500 frames we're going to create and push in a new projectile so we can grab this.projectiles and then push in a new projectile right here so up above i know by default i don't want a new projectile pushed into our projectiles array therefore i'll cut out our new projectile right here make sure that this dot projectile is empty which it is then with that cut out new projectile statement i'm going to paste it into our push code right here so now for each 500th frame we're going to create a new projectile but the enemy is not going to be equal to the very first enemy within our enemies array anymore instead we're going to use this dot target which we just selected earlier and really we should only be pushing in a projectile in the first place if this.target exists if this.target is equal to null well the building doesn't have anything selected it should not be shooting at projectile therefore within this if statement i'm also going to add an and it says if this.target exists then i do indeed want to run the following code we're going to shoot a projectile at the enemy of this dot target and before testing this looking at it i believe 500 might be a little too much let's actually decrease this to every 100th frame to make sure that we're actually shooting things consistently so i'll change that and the very last thing we need to do is make sure that we're no longer calling building.draw but rather building.update so we call all this code right here so to call that we'll go to index.js find building.draw for me it's on line 67 and then call building.update instead so we'll save this and move back to our game refresh and then create a building you're going to see once an enemy enters this radius we're going to start shooting at it so it enters we select it we start shooting and when it exits it should theoretically stop let's see if it does and no it looks like we are still shooting towards our enemy even though it is outside the radius and we should be selecting a new one so we're going to have to do a little bit of debugging here hopefully we can solve it quickly now i do recall earlier on we selected enemies zero somewhere else and i believe it was within classes.js so let me do a quick command f within classes.js for enemies and indeed i did reference enemy zero so this is what's messing us up currently right now when we're determining the angle which determines where a projectile should be shot at we're only determining that angle based on the very first enemy within our enemies array but now we know we're populating our enemies dynamically and assigning an enemy equal to the property of this dot enemy above therefore we don't need a reference enemy zero in this location right here which determines the angle instead we can reference this dot enemy dot center x and y and that should make sure that our projectile is always going towards the right enemy let's save this refresh and then try this one more time so i'll create a building and then once an enemy enters it we're going to start shooting at it and once this enemy leaves we should select a new one which indeed we do so we're only selecting enemies which are within the radius of our actual building and none of these enemies up here are being selected because we coded this out correctly by selecting the enemies based on the radius of our building and one of the cool things is this will work for every building that we create so each building we have with this radius we're only going to be able to shoot at enemies that actually overlap with our building's shoe radius so once these enemies leave we can no longer shoot them you're going to see eventually once our enemies completely move out of these radii just nothing will be shy at all because we no longer have the ability to push out projectiles and there is the last one and now nothing can be shot at until some of these overlap over here so i think with this we can go back to to do and check off shooting projectiles next we're going to focus on health bars so we'll have our enemy we're going to add a bar right above them this green bar is going to represent how much health does an enemy have and then as we hit enemies with projectiles the size of this bar is going to decrease and behind it it's going to reveal a red bar and once the green bar completely runs out we're going to remove the enemy from the scene completely so how would we go about creating this green and red health bar for each enemy that we have within our game so the first thing we're going to do is head on over to classes.js and find our enemy class so for me that's going to be on line 28 and i want to focus in on our draw function right here so draw currently is responsible for drawing out our enemies just a circle we want to add some additional draw code here to draw out our enemy's health bar so add a comment that says this is going to be our health bar right here and how would we draw a health bar well we need to draw some sort of rectangle above our enemy and to draw a rectangle we can use c dot fill rect so fill rect takes four arguments the first one is going to be the x position so we'll get that width this dot position dot x the second argument is going to be the y position which we can get with this dot position dot y the third argument is going to be the width of the health bar and i just want the width of this health bar to be the full width of our enemy so i'm actually going to use this dot width right here and then how tall do i want this health bar to be well i don't want her health bar to extend the full height of our enemy because that would just be really large i just want this to be some sort of static value that's never going to change so i think around 10 pixels is going to be a good value for this now what color should a health bar be by default let's start with the overlaying part of the health bar which is going to be green to make sure that this health bar is green we can add in a c dot fill style set this equal to a string of green so just with this if we save this and then refresh we wait for enemies to start coming out you're going to see now they have some sort of health bar associated with them so our health bar is touching our enemy currently let's make sure that we have a little bit of space between the health bar and our enemy to make sure that we have that spacing we just need to subtract from position.y because this starts at the very top of the enemy currently so if we subtract something like 15 we're ensuring that we're subtracting the full height of our health bar plus a little extra so 5 pixels worth of space should give us the exact look we're going for we'll save and refresh and then wait for enemies to come out and i think that is in a good position so next we're going to draw an additional part of this health bar we're going to be drawing a red bar that is placed directly behind this green bar so that way when we decrease the width of the green bar we're going to see that red health bar in place it helps us understand how much health an enemy has left so to draw that additional health bar we're going to copy these two lines of code and paste them right above their current position but we don't want to draw another health bar with a color of green we want to start drawing a health bar with a color of red instead so we're going to draw out this red health bar in the same exact position as the one we just drew but then we're going to be drawing on top of that with this green health bar instead so that means when we decrease the width of this green health bar we're going to reveal the red health bar behind it we can see that this works by decreasing the width of this green health bar let's go ahead and decrease it by something like 20 pixels save and refresh and now we should see a red health bar extend the full width of our enemy which it does and we only have a little bit of the green health bar extending this is great to help us understand how much health an enemy has left so the next thing we need to do is make sure that we're decreasing this green health bar whenever a projectile actually shoots and touches an enemy so to do that we're going to extend the full width of our green health bar back to the full width of our enemy and we're going to add in a property to our enemy class called this dot health is equal to 100 so by default every enemy we create is going to have a health of 100 to start and then as a projectile hits an enemy we're going to decrease this value right here and then we're going to determine based on that value what the width of this green health bar should actually be so first let's start decreasing this value right here this dot health whenever a projectile hits an enemy let's save classes.js and head on over to index.js we're going to want to scroll down until we find out where a projectile hits an enemy and for me it's going to be on line 85 within this if statement we can even comment this out to make this a little more apparent in regards to what this does this is when a projectile hits an enemy so once a projectile hits an enemy what we can do is select the enemy in which a projectile hit which we can get with the current projectiles enemy property so once we grab the enemy we can grab its health property which we just added on and then subtract equal 20 from the current value so each time a projectile hits an enemy we're going to subtract 20 from the health let's console.log out the projectile enemy health to make sure that this is indeed working because we're not going to see anything rendered out until we begin using this health property directly within our class let's save that open up our console refresh and then i'm only going to create one building and once this starts shooting at this enemy right here we should see its health start decrease so it's going to shoot once the health decreases to 80 then down to 60 and it's going to keep decreasing for as long as that enemy is being hit and each of these enemies have their own individual health associated with them as you can see we're getting different values whenever a projectile hits a different enemy so great we know that's working now we can use that health property within classes.js to determine the width of our green bar right here so we know this is the width of our green health bar what we can do is we can multiply this by a percentage value based on this dot health so this dot health is going to be equal to 100 to start but if we divide this by 100 the full value of our health we're going to return some sort of percentage value which we can multiply by the actual width of this green bar right here so hypothetically let's go ahead and say this dot health right here it's equal to 80 we just hit the enemy we divide that by 100 what are we going to get we're going to get point eight when we multiply this dot with by point eight let's just say hypothetically this thought width is 100 we're going to get a value of 80. so basically we just took one fifth off the health bar and then we would run this again we'd hit an enemy say our new health is 60 divided by 100 well what is 0.6 times our width of 100 well that's going to give us 60. so it's going to keep decreasing until we go down to 0 and tell it to stop so let's save this and see it in action i'll refresh i'll exit out of our console over here create a building and now we should see this health bar at least the green part of it start decreasing whenever a projectile hits an enemy so it's decreasing slowly and slowly and it's just going to keep going i'll create another building right here so we can keep hitting this first enemy it's just going to keep going forever and ever you'll see it starts even going to the left a little bit we don't want that but we're going to say whenever this health bar the green helper right here has a value of zero we want to remove this enemy from the scene we're no longer going to be seeing this weird little help bar effect going on in the first place so we essentially need to write some sort of conditional that tracks for our enemy's health we can do that when we're listening for when a projectile hits an enemy so we're going to subtract 20 from the enemy's health and then right after that we can write a conditional that says if the current projectile's enemy dot health is less than or equal to zero then we want to splice out this specific enemy from our enemies array so how would we splice this out when we don't have the enemy index available to us at least within this specific portion of code well based on the enemy we have right here we'd want to find the index using a find index method so we can get that by selecting our enemy's array and then calling find index on top of this so this is going to take an arrow function for an argument and here we can pass through which enemy we're currently looping over so we're going to say we are looping over this current enemy and this is going to return a value of true or false so if the current condition is true we know the index of the enemy in which we want to select so what condition do we have to write to make sure that this enemy we're looping over is equal to the projectile enemy in which we want to remove from the scene well we can simply write if our projectile enemy is equal to the current enemy we're looping over we're going to return that index and store it in a const of index we can even call this enemy index if we want to be a little more specific but now this should be available to us and what we can do is call enemies again then splice and splice out from the enemy index we just retrieved one value from that position so let's save this refresh create some buildings and then start trying to remove some enemies so we're going to start launching projectiles at this first one and once it hits zero we just remove it completely now there might be a bug introduced here can anyone tell me what it is well sometimes other enemies might be removed even though we didn't specify we want these exact enemies removed so why would they be accidentally removed well right here so find index if this returns true what's going to give us the exact index of the enemy we want to remove but if this returns false enemy index is going to be equal to negative one we try call that splice on negative one to one this might air out so we want to make sure that we add an if statement here that says if the enemy index is greater than negative one then we do indeed want to splice out an enemy from this enemy index now why might we not be able to find an index associated with our enemy's rey well sometimes when our projectiles are launched towards an enemy the enemy is removed before the projectile actually hits so if the enemy no longer exists and we're trying to run it within our enemies array before we actually splice it out enemy index might return a value of negative 1 meaning it was not found therefore we do not want to splice anything when that happens so as long as we add this if statement right here our code is going to be robust we should not get that issue with random enemies being removed so let's go ahead and save refresh and try this one more time with a couple of buildings just to make sure that no random enemies are removed throughout the process we're going to completely destroy all these enemies create a lot of buildings to make sure that they go quickly and it looks like nothing is being removed that shouldn't be removed so this looks great how else would i make sure that this code is as clean as possible well since we are using splice right here on our enemies array we need to see how are we rendering out enemies in our game are we using a traditional for loop looping from the back of an array or are we looping through the front using a four each let's go ahead and find out where we're looking through our enemies scrolling up we are indeed using a 4 each so since these are being spliced out of the array on the fly we want to make sure that we switch this over to a traditional for loop but one that starts from the back of the array if we don't want to write this whole for loop out again we know that on line 78 that we're looping from the back of our building projectiles array so we can grab this line paste it right above line 59 where we're calling dot four each and then add in and end in curly bracket then we can start refactoring this so it matches up with the actual for each right here so we want to loop through not our building projectiles but rather our enemies and now we have to select an enemy manually so we'll create a const called enemy and set the sequel to our enemies array and pass through i as the index so we can get that one exact enemy we're looping over for this iteration of the loop so now that enemy is available to us within here we don't have to call this for each anymore we can simply call enemy.update based on the enemy we're getting and now when we're splicing items out of the enemies array we shouldn't have any weird flickering that might occur because we're looking from the back instead of using a for each loop so we'll just do one more quick save refresh and just make sure this works one more time with that new for loop so our enemies should be rendered out which they are our shooting still works and they are removed from the screen completely we don't have any issues and we can even right click to make sure that we don't have any bugs in the console and it seems like we are completely good to go so that's going to allow us to head back to to do and check off health bars so next in line is sprites but i'm actually going to switch this up a little bit i'm going to move stripes to the end right before launch because i think it's more important just to get all of our main game functionality out of the way before we start adding in cool images and animations so instead i'm going to focus on waves instead so i'm not talking about ocean waves here i'm talking about waves of enemies what happens when we go ahead and kill off that first wave while we want to spawn out another wave of enemies another grouping per se to make sure that our game keeps on going for however long we specify so how do we go about creating more groups of enemies whenever we kill off that first round that first wave well let's find out where we're spawning enemies in the first place it's going to be in index.js on line 42 down to 49 so this for loop right here spawns 10 enemies at the exact position we want them to start at and then they're going to start updating towards the waypoints that we wrote within our map so basically the algorithm here is we want to listen for when our enemy's array is back equal to zero then we want to run this for loop one more time and we can either run it as the exact same meaning we're going to spawn 10 more enemies or we can increase this value right here to say we want more enemies spawned to make our game even harder so if we're going to use this for loop somewhere else it makes sense to refactor this into a function that way we're not duplicating code and editing things in two place even though they do the exact same thing so to create a function for this right beneath it i'll write a function called spawn enemies and what is this actually going to call well simply this for loop right here so take this for loop paste it into the function and i know by default i want to call spawn enemies as soon as this file loads so that we always have 10 enemies coming in from the left by default so now that this is within a function called spawn enemies this is not called by default until right beneath this we actually call the function name spawn enemies so this should make sure that our code functions as is let's save and refresh and make sure that our enemies are coming in from the left all we need to do is see one and then two and we are good to go so that still functions as expected but now we can use the spawn enemies function in the exact spot we need to when we're tracking for our enemy's length so scroll on down we're going to go to where this is where a projectile hits an enemy now these first statements deal with enemy health and enemy removal but we want a conditional down below for tracking total amount of enemies so to track for the total amount of enemies right in if statement that says if our enemies dot length is equal to zero meaning we don't have any more enemies available to us on the screen we want to call the following code spawn enemies so if they're no more enemies we're going to spawn 10 more from the very far left side of the screen and they're automatically going to be set in motion because those enemies have their waypoints associated with them within the actual enemy class so i'm going to save this but to start i'm actually only going to create two but remember i right here is set to one to make sure that x offset is only going to be correct between the first two enemies so if i want to spawn two enemies i need to increase this value to three so now let's make sure that we're spawning more enemies as soon as we get rid of those first two i'll save and refresh and create a couple of buildings right here to quickly get rid of those enemies so we don't have to wait too long to watch this just trying to enter the radius we're going to shoot at it get rid of it and we get rid of this one as well and only once we get rid of that one are we going to spawn more enemies coming in from the right and we should only have two so there's the first one and there's the second one and this is going to keep going on for as long as we specify now this would be a pretty boring game if we didn't do something to make our enemies more robust we could do something such as give our enemies more health or we could simply spawn more enemies i think spawning more enemies is going to be the simplest thing so let's go ahead and start with that so spawn enemies is going to be variable how would we make this variable well we could simply pass through an argument called spawn count count doesn't really matter and then use this within our for loop so let's say we pass through right here when we call spawn enemies an argument of about three we want to start with three enemies by default we would use three right here with spawn count as the second statement within our for loop so we'd get rid of the three right here but this would actually only spawn two enemies because remember i is equal to one to start so we just simply add on one to this and that should give us the correct count let's make sure this works we'll refresh and then we should see three enemies now by default so there's one there's two and then eventually there's going to be three and no more than that and there is not another one trailing behind it so now that we have the ability to increase the amount of enemies respawning at a time we can go to the other location in which we're calling spawn enemies for me it's going to be on line 106. so after the first wave how many enemies should we spawn let's go ahead and say five well that's great but what happens when we take care of these five enemies wouldn't it be great if we added some more enemies onto this automatically so we go from five to something like eight if that's the case we need some sort of let in which we can change this programmatically so i'm going to create a let called enemy count and by default this is going to be equal to three and if i'm setting this equal to three i want to use it within spawn enemies right here so i'm actually going to move the position to spawn enemies from line 53 down to about line 58 i'm going to place enemy count as the argument instead of the static value of three so with enemy count i want to scroll on down back to where we're calling spawn enemies again and then i know for each iteration of our wave we're going to be calling this code right here so what i can do is take our enemy count and add on to it a value of two we're going to add on two more enemies for each wave then i can get rid of the static value of eight call enemy count and now we're always going to be increasing our enemy count as we go through getting rid of these different enemies so to make sure this works we're going to get rid of the first three enemies and then we should have five enemies coming in as soon as that wave is over so let's save refresh create a ton of buildings and let's see if we can get this working so we have one we have two and then we have three as soon as we get rid of this third one we should see five enemies coming in so there's one there is two there's three there's four and then we should have a fifth one as well there it is and no more after that which we don't and then after this how many enemies should we have while we look at our code real quick riding on two we should have seven in this round and so forth so that kind of gives you an idea of how to create more enemies within your game as soon as you get rid of the previous ones this is as performant as possible because we're only using the exact enemies we have available to us within our actual enemies array so looking really good for creating waves for all of our individual enemies that's going to allow us to go back to to do and check off waves so now let's add in game over functionality so how do we determine when our game is over well i think it makes sense to determine that our game is over when about 10 enemies have gone off the right side of the map so basically we're going to have our enemies and we're always going to be tracking their x position along the side so once their x position reaches off the side of our canvas meaning our enemy is over here we're going to remove this enemy from our enemies array but at the same time we're going to decrease a value that value is going to be our hearts so i'm going to start us off with 10 hearts when an enemy goes off the side of the screen we're going to subtract one heart so in this case we would have nine and then once we get down to about zero hearts we want to end our game and to end our game we'll display some text that says game over right here in the middle so what's the very first thing we should do to achieve this functionality well i want to track when our enemies go off the right side of the map now currently within our game our enemies are moving very slowly and to track whether or not these enemies are actually off the side of the map we would have to wait quite a long time so the first thing i would actually do here is speed these enemies up so that way we're just not waiting forever to test our game and make sure that we have the functionality in place that we want without dying of boredom waiting for these to get off the right side so how would we go about increasing the speed of our enemies while still making sure they hit our waypoints well we're going to want to go to classes.js and you'll see right here we are within our enemy clause if we go down to update this is where we're currently updating the position of each individual enemy so our enemies position are determined by this math cosine and this math sine function these two basically act as the x and y velocities for our individual enemies now it's not completely apparent that these are the x and y velocities so what we could do is above this declare a const called x velocity and then assign this equal to math cosine but it is likely later on as we progress through our levels we might want to increase our x velocity or our y velocity by some constant which in return is going to make our level harder so the better we do the harder we make our enemies by speeding them up if we want to speed up our velocities later on it makes sense to not use a constant directly with an update but rather change this constant to a property within our constructor function for each individual enemy so up above i'm going to scroll up to our constructor and add in a new constant called this dot velocity this is going to be equal to an object with an x property i'll set it equal to 0 to start and then a y property also set equal to 0. so now that this velocity is available to us we can use this down below by saying when we go ahead and determine our angle right here this dot velocity dot x is going to be equal to math cosine angle and that will give us the perfect x velocity we need to add on to this this.position.x we want to do the same thing for the y axis so we'll add in this dot velocity dot y is equal to math sine angle we're just setting it equal to this function down below and that'll go ahead and set the y velocity equal to the perfect value to make sure that our enemy is always moving towards our waypoints so really what we're doing right here is we're just declaring what math cosine and what math sign produce they produce an x and a y velocity which means right here we no longer need this function which is a little non-descriptive we'll get rid of that replace it with this dot velocity dot x and we know right here we can replace this with this dot velocity dot y so our game is still going to function exactly the same but in order to speed up our player what we can do is multiply our velocity value on the x and y axis by a constant so if we're going to multiply this by a constant of three we're essentially saying speed up our enemy by a multiplier of three so we're going to go three times as fast with this so let's save refresh and watch what happens so our enemy comes in and it is definitely faster but it looks like we are missing a couple enemies and once we hit this very first waypoint while our enemy just goes back and forth it does not continue on to the next one so this is obviously something we need to fix why is this even happening in the first place well when we head on over here to our update function all this code that we just wrote is perfectly fine the issue is really within our if statement right here because we are saying if the center of one of our enemies is equal to the waypoint x and y then we are increasing at waypoint index which forces our enemy to go towards the next waypoint the issue is since we're multiplying our x and y velocity by a value of 3 the value we're producing right here with math round this dot center x and center y is never actually going to be directly equal to waypoint x and waypoint y we're always going to have that little three value difference between these two values right here as a result we need to change up this estimate a little bit to say if our center x and our center y are within a range of where our velocity is set then we want to go ahead and increase our waypoint so this will make a little more sense as we go about changing this instead of saying triple equal right here i'm actually going to subtract so from center.x we're subtracting our waypoint.x and then around this whole thing i'm going to wrap this in math.abs that stands for absolute which just means if we get a negative value it's going to make it positive and then i'm going to say if this is less than this dot velocity dot x times 3 and i want to wrap this in a math.apps as well because our velocity on the x-axis could also be a negative value i always want to make sure i'm testing for positive values instead then that is when we want to go ahead and increase our waypoint so what does this equation mean that we just wrote let's go ahead and get into it a little more in depth so let's say hypothetically waypoint x is going to be a value of 100 and then we're moving towards waypoint x with the center x of 98 over here so from 98 if we subtract 100 what are we going to get we're going to get a value of negative 2. now let's go ahead and compute this equation down here with math.abs this velocity x times 3. so what is velocity.x well it's always going to be a value of negative 1 to 1. in this case we're assuming that our enemy is moving over to the right therefore x would be a positive value let's go ahead and say this dot velocity x is equal to one we multiply one by three which we have right there and it's going to be equal to three but to complete our equation up above remember we used math.abs so if we were to wrap this negative two and math.abs that would be equal to two and now we just have to say to ourselves is this three that we produced greater than two yes it indeed is in that case we would go ahead and say we know our enemy's center is within the distance of our waypoint which would be something like right here this is about a two pixel difference so if that is the case then we're going to start moving our enemy to the next waypoint which might be up above here and our enemy would keep moving in that direction so essentially rather than our enemy center having to hit this waypoint exactly we're saying that we only need to be within a specific range of this waypoint instead specifically we need to be within three pixels of the waypoint in order to change our waypoint index which will change the direction of our enemy so we want to go ahead and do this range-like formula for our y-axis as well we just did it for our x-axis to do this for y we'll go ahead and replace the triple equal sign with a subtract sign and then wrap this equation with innate math dot abs to make sure that it's always producing a positive result we want to say if this is less than math abs for our y velocity which we can get with this dot velocity dot y times three because now we have that three multiplier up above then we know we want to change the location of this individual enemy let's go ahead and save this refresh and see how this works so our enemy comes in and then once we hit that waypoint we're going to go to the next direction because we're within that range of 3 pixels based on the additional speed multiplier that we added onto this so to clear this code up a little bit i think it makes a little more sense instead of multiplying three right here and setting it equal to the position to set this.velocity x and this velocity y by three up above because if we do that let's do it now i'm going to go ahead and remove these times 3s from here and put them up above now within our equation down below we don't need to multiply this by times 3. because we know this.velocity x and this velocity y is being set exactly equal to the times three up above and if we wanted to clean our code up even more what we could do is our multiplier right here we're multiplying this by three so we go three times as fast we can call this a const of speed set it equal to three right here and then replace these two values with speed so it's more indicative of what that three means and now we can just increase this in one spot rather than two by saying our speed is equal to something like 10 if we want these enemies to go really fast so we save that and refresh and you can see just exactly how fast these are going you can even put this to a ridiculous speed if you'd like it's all going to work exactly the same just goes to show exactly how you can make your game harder as your player progresses through the different levels so i'm going to set our speed equal to 10 now that our speed is set equal to 10 we don't have to wait as long for the enemies to reach the end of the map we can just simply track exactly when they go off the right hand side to begin decreasing our hearts so now we need to track whether or not our enemies are actually going off the right hand side of the map how do we go about doing that well we want to go to index.js and find where we are currently looping through our enemies so it's going to be within our animate function which is on line 59 for me and i know we're looping through our enemies with this for loop right here because enemies is the very first thing we see within our statements right here so beneath enemy dot update i can write an if statement that says if or enemy dot position dot x because we know position.x is actually going to be the far left hand side of the enemy which is exactly what we want if that position is greater than our canvas width our canvas width is simply the edge of our map over here what do we want to do well we can console log out decrease hearts and that'll give us an indicator whether or not this is working but we also want to splice the enemy out of our enemies ray because that's going to allow us to spawn more enemies once our enemies count reaches zero so to splice an enemy out of the array we'll grab our enemies rey call splice and then from what index do we want displays from well the index we're currently looping over which will be i we want to splice one enemy from that value so we'll add one as a second argument so each time we splice an enemy out i'm going to consulate out our enemies array as well just so we can see this decrease over time let's save that and then i'm going to inspect and open up our console and then refresh so once these enemies go off the right hand side of the map we should see some console like text over here and they go off so we definitely see our text decrease heart and now we can see once that first enemy went off we removed that enemy from array the second enemy went off and then the third one went off and now we don't have anything within our enemies array so shouldn't we be respawning enemies now that our enemies array is zero yes we should be but currently where are we spawning enemies within our animation loop if we scroll on down we're going to find spawn enemies down here on line 114 we're only saying to spawn enemies if a projectile actually gets rid of an enemy and then our enemies length is equal to zero so we don't actually want this code right here it makes more sense to take this if statement and the comment out of where we're tracking for whether or not a projectile hit an enemy just taking it out and putting it directly within our animation loop so if i go ahead and put this directly beneath our for loop where we're looping over our enemies this will still work exactly the same so when we get rid of enemies using projectiles this code will still fire because enemies length is equal to zero we're only going to call it once because immediately we're going to call spawn enemies which increases enemies.length but at the same time if our enemies go off the right side of the map using this if statement up above it's going to set our enemies.length equal to 0 at some point meaning we can also call this right here down below so we're not limited to just calling the statement directly within where we're tracking for when projectiles hit enemies now we can call whenever enemies length is equal to zero which is great that is exactly what we want so let's save this here refresh and then wait for enemies to go off the right hand side of the map and when all of them go off we should spawn new enemies which indeed we do we increase the enemy count the game is harder and this is just going to keep happening for as long as we tell our game to keep going for so we want to start decreasing a heart value let's add that in right up of over animate function and right up above spawn enemies i'm going to create a lut called hearts this is basically our life count how many lives do we have within our game i'm going to set the sequel to 10 and now when an enemy goes off the right side of the map we're no longer going to call these cods logs but instead we'll go ahead and reference hearts and then subtract one from that current value which means as hearts decreases within this eventually hearts is going to be equal to zero so if hearts is equal to zero what do we want to do well for now we can count log out game over so our game should stop when hearts is equal to zero but what i'm also going to do is console.log out our hearts so we can see this value go down over time i'll save that and refresh so now we have three enemies we have 10 hearts and we're subtracting from that heart's value and eventually once this reaches zero that is when we're going to declare our game is over so we just need two more we can count log out game over now so what do we want to do now that our game is over well i think it makes sense to display some game over text right in the center here and we might want to pause all animations within our game directly let's go ahead and start with just pausing our game once our hearts get down to zero i think that's really easy to do so to pause our game on line 61 where it says request animation frame i'm going to set this equal to a const called animation id so request animation frame for each frame we're running through this returns an id value this just increases over time but this is an id we need in order to cancel this animation from running so with this id stored with an animation id whenever we lose our game when we say if hearts is equal to zero now i need some actual brackets because i want to write more than one statement here when hearts is equal to zero i'm going to call cancel animation frame and this is just a simple method that comes from the window object but since we're referencing a window object we actually don't need window dot and within cancel animation frame it takes an argument and that is going to be the animation id in which we want to cancel so up above we just declared this animation id is equal to the id we're returning from the current frame so now we can use animation id within the argument right here and whenever our game is over nothing within animate should be called at all so i'll save that refresh and now when our count reaches zero our game should pause completely there should be no more animation so now when these two go off the edge let's see what happens those two go off and our game just pauses completely because we called cancel animation frame with the correct id so that takes care of that now let's go ahead and display some text directly in the center right here so there are two ways we can display text here one we can draw text directly within canvas or two we can use html i always go with the html version because it is a tool that is available to us since we're developing games on the web and if a really good tool like html and css is available to us why not use it why force yourself to use something that's more complicated by drawing that text directly on the canvas in my opinion it's way easier to use html and css so i'm going to do it over there so to create some game over text i'm going to wrap our canvas element within a div this is just going to act as a main container that i can use to overlay our text on top of so within this div this little container right here i'm going to create one more div and this div is just going to contain the text game over so if i save this by default go back to our game and refresh we're not going to see any text we actually have to click and drag down here in the bottom left corner of our canvas to see that text because by default a div element is a block element meaning it's within the document flow so it'll push other elements around you'll see right now game over is being pushed around by our canvas because our canvas is also a block element and this is just a standard with web development since we're using text within a game we don't want this within the document flow and take this without the document flow so we can overlay it on top of our canvas we want to give this a css style a position absolute and that's going to make sure that it doesn't push other elements around so within that div to start adding in css we can add a style tag and i'm going to set that style tag eagle to double quotations right here within these double quotations i can start writing css to style this text so like i said i want this out of the document flow to get this out of the document flow i'll write to position absolute and now i'm setting the position style equal to absolute simple enough so that's step one to taking this out of the document flow but if i save this and refresh and select down here you'll see our text is still down here we next need to specify what element should this game over text be relative to so to help illustrate this we have our canvas element right here this is just a canvas tag and then we have our game over div tag down below and then these are both within one main large element div so this is a little illustration of how our html layout looks right now we want to make sure that our game over tag down below is relative to this blue parent div and as long as it's relative to this blue parent div what we can do is set another style called top and it's going to determine how far from the top of the parent div with a style of relative should this game over text be so we set our game over text top to be equal to zero we're saying we want to move our game over text to the very top of its parent div with a position of relative so let's go ahead and do this directly within css and hopefully it makes a little more sense with that so this div right here was that blue parent div on top of this i want to add a style of position relative because i know i want to move our game over text to the very top of this div right here which contains our canvas and our actual text so what i want you to really remember is a position absolute element on a child like this div right here requires a parent if they have a position of relative if we want to move this actual div relative to that parent now it's a little confusing but it'll make more sense as we go about it but now that we have position relative on the parent and position absolute on the child we can add in a top style and set it equal to zero so let's save that refresh and now you can see that our element up here is at the very top of that parent div and now we can move this to the very center of our screen so how do we go about moving this to the very center well we have our game over div right here currently and right now it's only taking out the exact space of the game over text what i want to do is increase the size of that div to take out the full width and height of our canvas so it extends all the way out here and then within that div we're going to use a display property called flex and this is just a special property which allows us to move the contents of this main red container div in certain positions so let's say that i want to move our game over text down towards the center of our canvas right here how would i go about doing that well now that i have a display of flex on that div i can add on a style of a line items center and any items within this main red div right here including our text are going to be moved towards the center of our main div container which would be down there it would move game over down here so let's take this one step at a time the first thing we need to do is get our main div to extend the full width and height of our canvas down below and then we're going to add on flex and center as additional styles so let's extend the width and height of our game over container to do that we're going to add on three more properties so we have top equals zero i'm going to add on bottom equal to zero as well if i save that refresh now i can go ahead and select this little tool right here within our console this is going to allow me to select and inspect an element so if i were to hover over a canvas you'll see that it's lighting up blue now i can click it and inspect all the elements associated with our game directly within html this is the element we're currently working on right here this error game over text you can see all of our styles being applied we have position absolute top zero and bottom zero so what do we just do here well we said that we want this element positioned relative to our parent div which takes out the full width and height of the canvas and since we set its top equal to zero we're saying start the element at the very top of that one parent div but we also want this element to extend to the very bottom of the div as well so you'll see when i hover over this the highlight is going from the top of four canvas to the bottom that's what's allowing it to extend the full height of the canvas if i were to go down here i can toggle styles on and off just to see what it looks like so if i click bottom and then hover over a div again you'll see it's only taking out the height of the actual text but i do want bottoms here on so this div extends the full height now i want this to extend to the full width of our canvas so then we can begin using flex styling on it to really center our text in the center so to get this extend the full width in addition to bottom i'll add on a left property equal to zero and then also add on a write property equal to zero and if you're new to css and inline styling like so just make sure in between each style that you're adding a little semicolon it'll make sure that you don't have any bugs in the process but with left zero and right zero in place let's save and then refresh and then inspector element you'll see that takes up almost the full width of our canvas it's actually off to the side a little bit let's move this on over a bit so we can hover over this one more time and yeah our div is definitely going off the width of our canvas so why is that well right now our parent div right here by default has a display of block we can even see that in place by looking down below this div has a display of block what a display of block means is one this div is within the document flow it'll push things around unless specified otherwise and two that this div takes up the full width of whatever parent div it has so its parent div is body and body takes up the full width of our browser window so when we're saying this div right here is a display block we're saying take up the full width of this body element up above this is the parent div what we want to do is change this display property not equal to block but equal to something called inline block what inline block does is it says don't take up the full width of the parent but rather only take up the width of the contents within the actual div and the only thing that's taking up width within the actual div is going to be your canvas element therefore when we set this display equal to inline block this div right here is only going to take up the full width of the canvas rather than the full width of the body so let's add that style into the parent div to add that style and i'll add a semicolon and then say display is equal to inline dash block let's save that refresh and then hover over our child div and now you'll see it's only taking up the width of our canvas because our parent div is only taking up the width of the canvas as well perfect that's exactly what we want so we achieved the effect with our child div right here taking up the full width and height of the canvas now we want to use that flex property so that we can begin using those additional subflex properties such as align items and then another one called justify content let's add that on directly within our child div i'll add in a semicolon that says we want a display of flex so this is a special display property which is going to allow us to use subflex properties such as align dash items and this will align all child items vertically within this one div right here we just need to set it equal to center so it's important to note a line item center will only work if display is equal to flex if i were to get rid of display flex right here align items will not take effect so we need to make sure that we have display flex for its element if we want a line items to work but if we save this and refresh now you can see our game over text is directly within the center at least on the vertical axis so now the last thing we need to do is get game over moved to the center and we can do that with one more flex property and that flex property is going to be equal to justify content and this will also take a value of center we just want to say on the x axis move this to the very center of an element with a display of flex we save that refresh there is our game over text so looking good but this is quite small let's increase the size of this by adding on a font-size property we're going to set this equal to let's say 72 pixels make it quite big because currently i believe that text that was there by default was around anywhere from 12 to 16. let's save and refresh that is looking a lot better to me and right now i think i'd rather make this text white i think that'll contrast with the background a bit better to make the text white i'll add on style of color equal to white simple enough and then i also want to make this text uppercase because i think that just makes it stand out a little more from the background as well so i'll say game over in all caps save and refresh and i do indeed like where this is going now this is using the default text associated with my browser and my computer i want this to actually match the style of our game a little bit so we need to go ahead and get some sort of different font to get good free fonts what i like using is fonts.google.com so i'm going to go directly there and these are all free to use fonts that we can use in personal and commercial projects like our game and you can search through all these there are tons and tons of them but the one that i like i'm going to go up the search fonts up here it's going to be called chango1 so i'm going to select that and i really think this matches the style of the artwork within the game so over here we want to make sure that we select this style what this is going to do is open up this little sidebar over here it's going to give us these link tags which we can copy i'm going to copy this with command c head back to our code and with these link tags at the very first line right above our style i'm going to paste all these in and this is going to pull the font into our game but now we just want to specify that every piece of text within our game should use this font right here so how do we actually swap out the fonts now that we have this one font being pulled in well back at google fonts they also provide css rules to apply to specific families so we can grab this line right here copy that with command c head back to our styles and within our body tag i'm just going to paste that on in and since this is within our body tag basically every other html element we have right here is by default within our body tag as a result it's going to read the font family from the parent of body it's going to apply it to everything else and since we have tango 1 available to us using these links up above everything should take effect once we go in and save this file so let's go back to our game and then refresh and now game over has that new nice style applied to it now one last thing that i would do to this text here is add some sort of stroke to the text because although this contrasts relatively well with the background if you really want the ultimate contrast between text and some other element one really good way to do that is make sure that you have a stroke around your text that is a completely different color if you put a black stroke on white text it's going to contrast really well no matter what color you have in the background so i want to add in that additional contrast and really the only way to add in that additional contrast is to add a style to the text you want this applied to and the style is going to be called dash webkit dash text dash stroke and i'm going to set the sequel two three pixels and say that i want this stroke to be equal to black so we're currently using a webkit style which means that this is not completely built into browsers by default this is more what people call a polyfill meaning it's more like an experimental style rather than something that's super robust but this does currently work in most browsers so i think it's okay to add this so i'm going to save refresh and now we have that nice border around our text and obviously this is easier to read even more so than the white text that we had prior so by default our game should not be over we're only going to make our game over when our hearts count reaches zero so back over here i want to set our display not equal to flex by default but rather none and we set this equal to none save and refresh we're just not going to see that text at all it is not selectable but once our hearts is equal to zero that's when we're going to set it back equal to flex we need to do that programmatically within our code so to do that programmatically let's go into index.js we know right here this is where we have a game over we're canceling our animation frame we want to select the html element to select it we can use document dot query selector this allows us to select any html element available to us within our code so i'm going to add some parentheses and then a quotation what element do i want to select well i want to select an element with an id of game over capital o so right now this id is not available to us to make this id available to us we need to go back to index.html and add an id onto this div right here where we have our game over text so to add an id we'll declare that our id for this one individual div should be equal to game over with a capital o so i want to save that head back to index.js down here you'll see that i'm using a pound sign this pound sign just means we want to select an id so in index.html if we declare an id right here that is selectable with the pound sign and then what is that id equal to it's going to be able to game over so now we should have that text selected directly within our javascript with that text selected we can call a style property on top of that now what style do we want to grab while our display property which currently is equal to none so it doesn't display at all but once our game is over once our hearts is equal to zero we want to set the sequel to flex instead to make sure that our flex styles take effect and that our game over text actually shows in the process so let's save that refresh and now once we go ahead and get our heart count down to zero i'll open up our console one more time so we can see that decrease we should see the game over text appear dynamically and there are the final ones and there is our game over text now we as the user know that our game is officially over so great so i think with this we can head back to to do and check off game over next we're going to add resources in our game so we're going to be adding in coins that determine whether or not we can place a new building on one of our placement tiles if we have enough coins yes we'll be able to place a building great we place it down the coins are not enough while we have to wait until we get rid of enough enemies who in return give us more coins but before we go onto coins i do want to track our heart resources because right now we're only consolidating that out to determine how many lives we have left as a result in the top right hand corner i want to add text that displays how many hearts we have left and then right next to that we're going to add the coins and all the functionality related to the coins so how do we go about adding in text for our hearts well to do this i'm going to do it directly within our html similar to how we added our game over text now right beneath game over i can add in an additional div and inside this div i'll list out 10 because i believe that is how many hearts we set within index.js so this div is going to represent our hearts but once we add this div we know we need to style this because divs by default have a style display a block which means it's going to be in the document flow is going to be placed right beneath our canvas we want to get this out of the document flow so we can place it on top of the canvas to do that we can add in a position of absolute and that's going to get it out of the document flow great and once we add in position absolute we can begin positioning this relative to its parent div which is this div right here which contains our canvas and once we can position this relative to our parent div we can add in properties like top and say that we want the zero pixels from the top of its parentive with a position of relative we can add in another style called right set it equal to zero and now this div is going to be placed at the very top right hand corner of this parent div so let's save this refresh and see what that looks like you can see up here we have the text of 10 in the very top right hand corner now there really isn't any breathing room with our text in the canvas we always want to make sure we're adding in breathing room to give us the best look possible for our text to make it as easy to read as possible so instead of setting top equal to zero i'm going to set it equal to around four pixels and then i'm going to set right equal to around 8 pixels so if i were to save this refresh now we have our text over here we have the padding around it makes it a lot easier to read compared to where it was prior now i do want to style this text further i want to make it bigger to make it even easier to read to do that we can add in the style of font dash size i set it something bigger like 36 i believe right now the default is something like 16 so we'll save that refresh and that is indeed a lot easier to read but one more thing i want to do is make this text the same color as our game over text with that border around it as well so instead of saying this is a color of black i'll specify a color that should be equal to white and then i want to add in that border around the text which we can do with this right here it's going to be webkit dash text stroke set equal to three pixels black i'm just going to copy this whole line go to the end of color white paste in that line and then i don't actually want this to be three pixels i want it to be a little thinner simply because this text is smaller than the text we have up above so i don't want this line to be too big relative to the actual font size so i'm going to change the three right here to two save that refresh and now that is very easy to read compared to what we just had prior so to help indicate that this is a heart we could either write hearts at the end of this or we could add in an icon i believe it is easier to add an icon because that's going to be more understandable for people from different countries who might not completely understand english so let's go ahead and add in a heart icon right here where would we even get the heart icon in the first place well where i like getting my free svg icons from is going to be a website called hero icons.com this is an icon library from the creators of tail and css and all of these are completely free to use within your commercial and personal projects so if i want to find a heart icon i can click this search bar right here type in heart and it automatically will find us an associated heart icon now i want the solid version because i know i want to fill this icon in hover over it and copy the svg once i do that i can head back to my code and right above our 10 right here within html i'll hit command v to paste in that code and this svg is going to represent that heart shape let's save go back to our game and refresh and you'll see now we have a really clean looking heart within our game but we do want to style this up a little bit to make sure that it matches up with our text and that is to the left of the text rather than above so within this svg i'm going to get rid of this class attribute it's just not needed at the moment and i'm going to add in a style tag instead so i want to set the width of this svg equal to around 30 to 35 pixels let's go and set it equal to 30 pixels and see what that looks like i'll save refresh that's definitely smaller i think that's looking pretty good let's increase the size just by a little bit i think i'll go up to 35 and be set with that now another thing i want to do is change this heart color to red so i'll add in a style that sets the color to red like so now if i were to get rid of this fill equal to current color delete that save and refresh you're going to see that's black instead of white it's not taking in the color of red but since hero icons provided this attribute to us by default it's saying that the fill of this path right here should be equal to the current color associated with the style of the svg basically what this means its current color is equal to the color we specify up above within our style attribute so if we save this with fill equal to current color go back to our game you're going to see now that it's red perfect but these two are still not aligned vertically we want to make sure that they're perfectly aligned so that we don't have any weird inconsistencies going on with our text and our icon so to get these aligned on the parent div right here that contains the svg and the text of 10 we can add on a display of flex so if you ever want two elements placed directly next to each other you can go to the parent div put on a display of flex and it should place them directly next to each other with the correct spacing on the vertical axis but if we definitely want to ensure that these are even directly within the center of the container div we can add on that style of align items and set it equal to center this is going to center things vertically within this parent div so let's save this go back over here and now those are definitely more inline than they were before i think our heart is a little close to our text so i'm just going to give this a little more breathing room in between those two and to do that i'll go to svg add an additional style called margin dash right and set it equal to something like 5 pixels doesn't need to be too big right here we can save that refresh and i think that looks really good for our actual heart indicator now we just need to make sure that this is decreasing whenever enemies go off the screen and we actually lose these hearts so i want to add an id to the text right here of 10 but currently we can't add an id of 10 because there are no tags around this text so i'll add in a div tag around 10 and now i can add the id of hearts and that's going to allow me to select this directly within index.js so let's go ahead and save this and then go to index.js and find out where we're currently losing our heart so i'm going to do a command f for hearts i'll keep searching for wherever we are subtracting one from hearts it's going to be right here on line 70. whenever our enemy position x is greater than canvas width we are taking one off of our current heart value so it makes sense right here whenever we decrease hearts that we also want to update our html in the process so to update our html i can go ahead and select our hearts div with document dot query selector and then get the id of hearts and then on top of this i can call inner html and this is going to allow me to select the contents of this hearts div right here and i can set it by adding in an equal sign and say that i want it equal to whatever hearts is at this current point in time so whenever we subtract one from hearts we're going to select our hearts div and set its inner html equal to that new value so with just this we can go back to our game after saving refresh and this should decrease whenever enemies go off the right side of the screen let's watch that happen and indeed now we have an indicator in regards to how many hearts we have left and once this reaches zero our game should no longer be active so let's double check that to go off the screen and our game is no longer active we have zero hearts great that is perfect that is exactly what we want now let's start adding in an indicator for how many coins we have so we can place buildings on our map so to add in that indicator i'll go to index.html and i essentially want a duplicate of our heart and our actual hearts div that displays the number and if i know i want to duplicate these two what i'm going to do is wrap these in their own div just for organizational purposes and now i can select this main div that contains those two hit command c and right above them i'm going to paste in a new instance so we're going to save this and refresh now we have two versions of this it's a little messed up because since we added a div this is the new parent element of our svg and our div down below which means that these are placed on top of each other because our div and our svg are block elements the parent div always needs to be flexed if we want these right next to each other so on top of this new div we created we need to add on a style of display equal to flex and then we'll also say that we want to align our items within this so that they are centered vertically so that's going to take care of this div with the first heart content but i do want to copy this style and paste it on the second div just so we get the exact same effect with the heart being right next to the actual heart text so let's save this and then refresh and now those are next to each other perfect but we're going to change this heart out with a coin so let's go to hero icons and search for a coin well it doesn't actually look like a coin is available to us here so we're going to need to use another icon library in order to get that coins icon so the other icons library i recommend using is not going to be hero icons but also font awesome.com so this is another great library which we can use for icons and a lot of these are free to use on both personal and commercial projects you just have to double check to make sure that you can actually use them so i've already verified for their coin icon which i'm going to find with the search bar i'm going to type in coin this coins icon right here is available for personal and commercial use so i'm going to click on that and then once this opens up we can click this little svg icon to copy the svg code i'm going to click that and now i can go back to our html and find where i want to place this svg for coins so right here this first div is going to be our coins and the second div will be only for our hearts so right above this svg i'll add in the new svg from font awesome so you can kind of see the difference right here the font awesome svgs are pretty bloated compared to the hero icons svgs that's the only thing i don't like about them but if we don't have that available to us within hero icons we can definitely go over to font awesome and just kind of suck it up and deal with this longer svg code so i'll save this and then i want to go down below and copy the style associated with the heart we had prior i'm going to cut this out and then i can get rid of this svg completely replacing it with the coins svg but i do want to apply those styles to this new coins svg so within the svg tag i'll paste in that attribute and now there should be a width of 35 a color of red and a margin right of 5 pixels we're going to change this let's just make sure that this is actually showing on our screen so i'll go back to our game refresh and now we definitely have our coins right here but these are black it does not seem like they are taking the red color so why aren't they taking the red color currently well we do have a color set equal to red but the svg by default from font awesome does not have a fill where it's set equal to the current color because by default in order for this to actually take in a color that's associated with our style fill needs to be equal to current color so before i save this i do want to decrease the width of these coins by at least around 10 pixels so i'll go down to 25 because i think these are a little big compared to our heart and then with this i should be able to save refresh and now we have our coins in place looking great but a coins icon should not be read by default it should probably be a color like gold because coins are gold so our color right here i'll change that to gold we can do one more save refresh and that is looking great one of the last things i wanted to do here for our interface is give us some spacing between our heart icon and the number on the left just so we can help indicate what are our coins and what are our hearts so to add in that spacing all i need to do is select our coins div right here the parent div add in a style of margin dash right set it equal to something like 10 pixels and that's going to separate this div from the heart stiff down below so save that refresh and now we have a good amount of spacing we can even add a little more if we want maybe 10 more pixels let's go and say margin right will be equal to 20 pixels save and refresh and i do like how that looks now when our enemies go off the screen right now we're decreasing our coins that's a simple fix because we have two divs which have an id of hearts id should always be unique and this is representative of our coins anyways so i'll replace this with coins and that should fix that issue now the very very last thing that i want to do here for interface is add in some sort of black background right here to further contrast these elements with our background i want this as easy to read as possible for the users so they can immediately look at this and understand where their hearts are at and how many coins they have left so here's what i'm going to do right beneath our game over text right here i'm going to add in a div and this isn't going to have anything inside of it but we are going to add in a style attribute so basically what i'm going to do with this div is just set it to a fixed width and height something like this and then i'm going to color it in with a black background i'm going to move it with a position of absolute to the top right hand corner but it's going to be placed behind our coins and our heart text to help give us some additional contrast with our background so for this div i'll start with a position of absolute and i know i want this on the top right hand corner of our canvas so i can add in a top equal to zero and a write equal to zero simple enough but since there's nothing inside of here we're not going to see anything until we specify with a height and a background color so i'll add in a width set equal to 400 pixels because i want this moderately large and i'll set a height equal to around 80 pixels because i don't want this going too far down from the top of our canvas now i can add in a background dash color and set it equal to something like black and let's save with just this see what that looks like so now we have a black background div in place this is 400 pixels wide by 80 pixels tall but this obviously looks really stupid at the moment instead of just including this completely opaque background i'm going to use a background gradient to give it a really nice fade effect that makes it more natural to our game ui so for our background color i'm going to swap out black with a style of linear dash gradient this is actually going to be equal to a function so it needs to be laid out in a very specific way the first argument here is going to take a 2 that says what direction we want to go to well we want to go to the left and to the bottom so let's say this is a rectangle right here what direction should our gradient be going towards well we know we wanted to go towards the left and the bottom it means our beginning colors are going to start up here and they're going to end at the very left bottom of the screen so now we can add in a comma and begin specifying colors so i'm going to make all these rgba so i can start associating opacity with the color and i just want this to be black so for red i'll specify zero for green i'll specify zero for blue i'll specify zero that's going to give us black with an rgba values and then for alpha i want this to be not completely opaque but a little bit transparent so i'll specify the alpha value here is going to be 0.8 and now i can add in an additional comma and one more rgba value and here i want to specify what color do i want to go to so we're going to start with this blackish color with a point a transparency but i want to go to a completely transparent value that also starts off with a blackish color so let's specify black with zero zero zero and then say that our last value right here alpha is going to be zero which just means it's completely transparent we're not going to see it but we're going to fade into that value because we're using linear gradient right here but one important thing to note right here is if we want linear gradient to work we can't use background dash color we actually have to specify this is just going to be a simple background property so i'll get rid of dash color like so save refresh and you can see our grading traveling from top right to the bottom left but it is not perfect we still have some hard edges on the left and the bottom side so if we want to fix this we can add in one more color between these two values i'm just going to add in the same color that we have at the bottom which basically is going to help determine the position in which our opacity actually fades out so we're saying we want to start off at an alpha value of 0.8 semi-transparent but once we hit the very middle of the gradient we want to fade out completely to an alpha value of zero so we're basically specifying we want to hit the middle part of the gradient before we even deal with the very end right here we need to make sure we add in a comma because this is another argument and this should help get rid of the visible edges we currently have on this div so let's save that refresh and that is looking really good we definitely have some contrast right there with our text the background it is very apparent to us that this is our user interface this is our coins this is our heart but it's not distracting at all from our current background we can still view all of our campus elements the way they were meant to be viewed so now i'm going to add in that coin functionality basically i only want to be able to place a building if we have enough coins available to us so i want to set our default coins equal to 100 i'll scroll on down find out where our coins div is it's right here on line 75 for me and i'll replace 10 with 100 so that'll be our default coin count but i also need to specify within index.js a let i'm going to do this right beneath hearts on line 58 called coins coins is going to be equal to 100 which specifies we have 100 coins available to us to place buildings now where are we currently placing buildings within our game if we scroll to the very bottom of our file it's going to be right here on line 137 for me where we are using this click event so we know if a tile is active and it is not currently occupied we are pushing in a new building and we're building to write at that specific position so here we can take our coins and subtract a certain value from it so whenever we place a building i want to subtract a value of 50. each building basically is going to be worth 50 coins but as soon as i subtract this value i also need to update the html which i can do with document query selector select the element with an id of coins and then change its inner html equal to the new coins value we just computed right here now i also want to say i only want to perform these two lines of code if a certain condition is true so i'll add on a condition with a double and sign and say that i only want to be able to subtract coins if the current coin's value minus 50 so what we're just spending on a building right now is greater than or equal to zero then i want the user to be able to spend their coins and place a new building so let's say we only have 30 coins right here we subtract 50 that's obviously negative 20. that means we cannot call any of this code down below but let's say that coins is equal to 50 subtract 50 from that that's equal to zero which means that this is good and we can indeed push in a new building while updating our coin html so let's save this refresh and watch this in action so we have 100 coins but when i place a building that immediately goes down to 50 i can place another that goes down to zero but if i try placing another building it just won't let me because our current coins value is well zero now we want to give ourselves more coins when we get rid of an enemy but we don't currently have the ability to do that one because the enemies are too fast and two because we simply haven't coded it in so we want to find wherever we are splicing out enemies we can do a command f and search for enemies dot splice so this is one position in which we're splicing out enemies when our enemy goes off the canvas width we want to do another command f for this to find the other instance and it's going to be down here on line 122 this is when our enemy health is equal to zero we are splicing out an enemy as long as it exists within an enemy index so i want to add an additional statement right here as a result with this if statement i need an opening and closing curly bracket and basically whenever we splice out an enemy i want to take our coins value and add on to this a value of 25. so each enemy we get rid of is going to be 25 coins and once we add on 25 coins we need the ability to update our user interface which we can do with document dot query selector select our coins id and then set its inner html equal to the new coins value this is going to update our coin it's going to allow us to spend resources to build more buildings but right now our game is kind of impossible with the speed in which our projectiles are moving and the speed in which our enemies are moving so i'm going to save this file right here index.js and i'm going to go over to class.js as well and i'm going to decrease the speed of our enemies down to three just so it's possible for us to get rid of some to test out this new coins functionality i'll save and then refresh create some buildings now we have two created we have zero coins but now when we get rid of an enemy that's going to increase to 25 let's try to get rid of another and it looks like we did not get rid of another so we're going to have to wait unfortunately those two will go off to the side decrease our hearts at least we know that's working in the process we get a new enemy and we get rid of the very first one and now we have 50 which is going to allow us to spend another but we cannot draw anymore until we get to that 50 value so great i really like how this is looking so far but i think with this with our new user interface and our coins drawn out and that functionality in place we're going to be able to go back to resources and check it off next we're going to move on to sprites so replacing our circles and squares with actual images we're going to start with a very easy sprite which is going to be a projectile move on to a more moderate sprite which is going to be an enemy and then move on to the hard sprite which is going to be building at the very end we'll cover explosions which are going to be a little different from the spreads we're covering above but let's start with the easiest sprite for placing our orange projectiles with some sort of image projectile instead so within our game we're currently using our buildings to shoot these orange projectiles i want to replace these with actual image artwork so where would i get that image artwork in the first place well we could go back to our game over here and inspect our image folder what do we have available to us with an image while we only have our game map available to us at the moment so we're going to need some assets in which we can use and pull into our game but we need to think to ourselves where do we get these assets in the first place well all the assets i'm about to include within this course are going to be available to you within the google drive link associated with the description and i got all these from completely free sources so that you can use these on personal and both commercial projects the authors for all these assets are also going to be listed within the description if you'd like to see the main source but i already resized everything to the perfect dimension so that we can use these directly within our map right here so at the very beginning of this course we should have already downloaded the tower defense assets and inside of here we have all the assets related to our game such as explosions orcs projectiles our tile set which we already used within tiled and tower.png this is the tower we'll be using to actually launch the projectiles we want to use four of these assets currently and then bring them into our actual code so the four assets we want to use are going to be explosion work projectile and tower to select these i'm going to hold down command on my mac and then click on whatever additional files i want to grab and i believe the same key for windows is going to be either alt or control so try those out to make sure that you can select multiple files once you have all these files selected we can right click and then hit copy i'll click that and then i want to go into the project folder so i know my project is currently within web and then we created this as tower defense so this is all of our code i want to paste these within our image folder so everything is completely organized and then i'll right click inside of here and paste those four items so if we go back to our code now we look with an image now we have four additional images in which we can work with within our game we have explosion work projectile and then tower png so i want to focus on our projectile first because i think this is the easiest sprite to implement into our game so how would we go about replacing those orange circles with this image that we have right here we're going to want to go inside classes and then find our projectile class so if we're scrolling through this and we're ever having trouble finding a certain class and this is just getting annoying it's pretty much a good sign that we want to refactor these into their own individual files and for me i am kind of getting sick of having to find these individual classes so i'm going to do that first before i actually implement this new projectile sprite so to make sure that these are in their own individual files here's what i'm going to do i'll start with class of projectile line 99 i'll select everything from 99 down to the very end of the class which is on 132 for me with this ending curly bracket and i'm going to cut everything out with command x that will be control x for windows users and once everything is cut out i can hit command s to save and then i can begin pasting this into its own separate file so to create a new file i'm going to go up to file new file and then paste in that projectile class once i paste this in i can hit command s to save it and where do i want to save this new class while we're already within our javascript folder js i think it makes sense to create a new folder specifically for classes for organizational purposes we didn't do this in the beginning because it would have been a little overkill based on the amount of classes we had but since we have a lot of classes right now it makes sense to begin organizing things to make our code easier to locate so i'm going to hit new folder right here and then create a folder called classes and inside of this classes folder i'm going to call this new file projectile dot js i'll save that and now we have this folder of clauses within our directory and inside of it we have our projectile.js class i want to do this for all my classes within classes.js to really organize things because this file is getting larger and larger and we're going to be adding in an additional class as well so let's continue doing this on line 99 i'll select our building class and go all the way down to the very end of our file right here i'll cut that out and now i can go to file new file paste in our building class hit command s where do i want to save this while within js and then within our classes folder i'm going to save this as building.js that takes care of that but we do have a couple more within classes.js let's start at the very top with a class of placement tile i'll grab everything from line 1 down to line 26 cut it out go to file new file paste it in hit command s save this as placement tile with a capital t and then within my classes folder i'll hit save and that takes care of placement tile and you kind of get the idea right here we're just going to do that for everything within classes.js what else do we have left well simply our enemy class we can either rename this file and put it within or close classes folder but i'm just going to do the same way we've been doing things i'm going to cut everything within classes.js because i know all that's left is enemy and then once i cut that out i can actually delete classes.js we're no longer going to use this file so i'll delete that i don't want to save it but i do want to create a new file with all the contents of class of enemy hit command s save this as enemy dot js and then within the js folder i'll go inside of classes and save this class as enemy.js so now as you can see it's going to be a lot easier for us to locate the classes in which we want to deal with especially when we're going to be working with all these individually but we do need to make sure since we just refactored everything into their own individual classes that within index.html we actually pull in all these new classes into our html so we got rid of classes.js down here we no longer want to reference that but instead of referencing classes.js i'll add in a slash right here so we're going in our js folder going into classes and then i'll start by pulling in building dot js i'm going to pull in all the code associated with our individual building class but i want to do the same thing for these three additional classes down below so what i can do is copy this line paste it in three times and now i can just go down the list instead of referencing building.js i want a reference enemy.js right there that'll pull in all the code same thing with placement tile that'll pull in all the code associated with that and then finally we have our projectile and once we have all this in place we want to save and then test out our code to make sure that everything's still working so i'll refresh we can place buildings no problem our enemies come out and our projectiles come out as well all of our placement tiles are in place though so our code is successfully refactored and working just as it was before it's going to be step one is just refactoring everything correctly now going back to getting our projectile to look like this over here what we could do is go to projectile.js and update our draw method we could update it like so by including c dot draw image and this takes three arguments that's going to be an image and then it's going to be an x value and then a y value the x and y represent the position in regards to where we want this image to be drawn so we already have an x and a y we can replace this with this.position dot x and then the y can be this dot position dot y but what we don't have is an image in which we can pass through into this draw image function so to create an image for a projectile here's how i'm going to do it right within our constructor i'll create this dot image property and set it equal to a new javascript image so this comes with the javascript api by default which means we don't have to pull in any additional libraries to actually create this new image object now to associate this new image with an actual image source such as projectile.png we can't actually pass through the source directly within our constructor i know that makes sense but unfortunately that's not how the api is laid out so instead here's what we need to do we need to reference this dot image.src instead and then set where the source as this image is going to be so right now even though this file is within js and classes we're pulling it in within index.html which means we need to reference the file relative to index.html so we'll add a string right here and say where do we want to go to get our projectile image well we're going to go inside of image and then where we need a reference projectile dot png we should be good to go with just that so now that we have this that image available to us within c.draw image we can reference this dot draw image and let's comment out this other code down below which created the orange projectile and see if things work correctly we'll hit save refresh and then dry building once it shoots it's going to shoot out that new projectile that's really all it takes to begin drawing out sprites into our game so this is looking great but what happens when we want to replace our enemies with sprites as well well we're going to be reusing a lot of the code that we just wrote and for reason code we just wrote why would we duplicate the work we have to do in this case it actually makes sense to extend our class right here and within enemy.js so that we're reusing the code that we just wrote we don't have to change everything in two places three places wherever it may be where we want to reuse this drawing code as a result we're not going to check off the projectile sprite just yet within our to-do list we're going to refactor this so that it's actually extending a sprite class so here's what i'm going to do i'm going to go to file new file create a new class of sprite this is going to have an opening and closing curly bracket and then i'll hit command s to save this and i know i want to save this within classes i'll call this sprite.js so this is going to be the parent class that all of our sprite classes inherit from now what should a sprite consist of well if we create a constructor we know that a sprite is going to consist of an image which we can write out with this dot image is equal to a new image now this code is looking quite similar to what we just wrote out within our class of projectile let's go ahead and take this code out from here this dot image is equal to new image and this.image source is equal to the string we're going to cut this out go back to sprite.js we'll paste it in here instead so we have a duplicate right here for this that image we can get rid of one of these and this is essentially what a sprite consists of to start now a sprite is also going to have a draw method associated with it whenever we draw out a sprite which is essentially an image by the way i don't know if i mentioned that whenever we draw a sprite or an image we want to call c dot draw image which takes an image for its first argument it's going to be this dot image now for the second and third argument we need a position so in this case it kind of makes sense to add in a position property associated with our sprite class so for our x position we'll reference this.position.x and for our y position we'll also reference this dot position dot y and if we want to reference these two values right here we need to make sure that we actually create that property in the first place so we'll add in this stop position will be equal to a position we passed through within our constructor so to create this position argument i'll add in an object and then within this create a property of position and i'll say by default this position will be equal to an x at zero a y of zero just so i know exactly what position will consist of and this seems to be off to a great start so now how do we tell our projectile class over here to inherit from our sprite class over here well within projectile.js we can say that this class of projectile extends our sprite class but the sprite class is not currently available to us simply because it's not pulled in within index.html so let's go ahead and pull this in and our sprite class needs to be the very first of our classes because we know building enemy and projectile are going to be inheriting from this class if we pull in our sprite class after all these other classes it just won't be available to us therefore we need to make sure that we duplicate line 98 where we pull in a clause that duplicates the building one and then replace the very first building.js with sprite.js instead so we're going to be pulling in our sprite class before we pull in our building our enemy and our projectile placement tile doesn't really matter because we're not going to be drawing out any image for that so now that spray is available to us within projectile.js we know when we extend sprite that this definitely is going to work but we know that our sprite class takes a position argument so we want to make sure that we're setting that position directly within sprite we need to call a super method and all super does right here is a calls constructor within our sprite class that we're extending from so we know that our constructor within sprite takes one argument it's going to be an object within this object we have a property of position and position is being set by the actual position we're passing through our projectile class so for setting our position property directly within sprite we no longer need to set it right here because then we're just writing duplicate code so we can actually get rid of this.position is equal to position because we know that's being set directly within sprite so let's save this and then check out sprite.js just so we can reference between these two files so right now our image.source is being set with a static value right here eventually we're going to need to update this i think at the moment it's okay though to leave static and then we have a draw method which calls c.draw image and puts in all the stuff that we need to actually draw our image out on the screen but you'll notice within projectile.js we also have our own draw method which calls the exact same thing but since we're extending our sprite class we don't need to call the exact same thing this draw method will be available to us already because we're pulling it in from sprite.js as a result we can get rid of this draw method altogether update is still going to work with this.draw because we know within sprite.js we have a draw method within here and everything should still function the same but we just cleaned up our class a bit by extending from sprite and all of our other classes are going to be a lot cleaner as well because we're not duplicating any of this code which we're going to be reusing consistently so let's save this and then go back to our game and now our projectile should still launch at the enemies which indeed they do we're just using a little bit of inheritance from that parent class of sprite so great this is going to be step one and with step one complete we can knock off our projectile sprite next we'll move on to our enemy sprite so what is our enemy sprite to look like for this game well over here within our image folder you'll see that i imported an orc.png file so this is from one of those free asset packs and i put this together perfectly so that we can use it as a sprite within our game but you'll notice the sprite consists of seven different images how do we actually get these seven images imported into our game and animating correctly well the gist of it looks like this we're going to import this whole sprite sheet into our game and then once we import our sprite sheet into this game we're going to crop it down so that we only display the first enemy so within this crop mark for each frame we go through within our game we're going to move the crop mark over by one enemy that's going to render out this version of the enemy and then for the next frame we'll go to the next one for next frame we'll go to the next one and we're just going to keep going through this whole thing until we create the illusion of movement once we get to the very end we're going to reset our crop mark back to the very beginning over here and go through the whole process so this crop mark is going to be responsible for rendering out the sprite sheet and by moving it for each frame we're going to create the illusion of animation so how do we begin creating this crop mark for this org.png image well let's go to enemy.js and make sure that we're extending our enemy class so that it extends from our sprite class now what does our sprite class take well it takes a position and an image so i want to call super which we'll call the constructor within sprite and i know the constructor within sprite takes one argument with a position property which we know position will be set equal to the position we're actually passing through our enemy class right here so that'll be good to go but down below within draw this code right here draws out our red circle enemies we don't need this anymore but we do need to include our health bar so how do we include the code from our sprite classes draw method while also including the code from this enemy class's draw method well if we want to call the draw method specifically within sprite right here within draw we can reference super which is going to reference our sprite class and then call from our sprite class dot draw so we basically get the best of both worlds we can call the draw method within sprite but we can also include all of our individual draw code right here associated with our enemies so let's save this and see what our enemies look like over here so eventually they're going to start coming in and right now our enemies look like our projectiles simply because within our spread class we're using a static reference to reference this individual file this needs to be dynamic especially because we're pulling in enemies now not just projectiles so to make this dynamic we need to pass through a new property within our constructor to add a new property right after we set our position equal to this object i'll add in a comma and add in a property of image src for image source now with image source in place i can copy this paste it in right here where our string was but now that the string is gone we also need to set our actual projectile source within projectile.js so we know when we create this one individual projectile we're going to call super which calls the constructor on sprite takes a position now it also takes an image src for source we can set this equal to the location of the projectile.png we'll get that with img slash projectile dot png but before we go to our game and refresh we need to make sure that image source is also set for the enemy class that we have over here so inside of enemy.js i'll also say for a super we're setting an image source equal to image slash projectile.png let's just render everything out as a projectile to start let's save this and also make sure that we have projectile.js saved as well refresh and we see our enemies and we're also shooting projectiles as well all rendered out within our game but this gives us the ability to change within enemy.js the image source associated with an enemy so we no longer want a reference to say projectile.png instead we're going to reference orc.png so let's replace projectile with orc save this refresh and see how things look so this is how our game looks currently we're currently just rendering out our full sprite sheet we're not cropping anything but that's going to be the exact next step so we want to crop the sprite sheet so that we only show one orc at a time and then we'll move on to animating this orc so how do we go about cropping the sprite sheet well i could do this within our enemy draw method but i'm actually going to do it within sprite.js because it's going to allow me to extend our building class once we move on to that and animate that as well super easily so to begin cropping our sprite sheet within draw i'm going to create a const called crop this is going to be equal to an object with a position property this position property will have an x i'll set it equal to zero to start a y which i'll also say equal to zero and then in addition to position we're going to have a width which i'll set equal to zero and then a height which i'll also set equal to zero to start so this crop const is going to represent the crop dimensions of where we want to crop from our actual sprite sheet of org.png so we're going to define the dimensions essentially of this box right here we know at the very start we have an x position of zero a y position is zero our height is just going to be equal to the full image height but what should the width of this crop box be right here how do we actually calculate this well essentially what we're going to do is grab the full width of our image and then we're going to divide that by the amount of sprites we have within the sprite sheet so we count them we have one two three four five six seven if we divide that by seven we're going to get the width of just one of these sprites and this is going to give us the width that we want to use within that crop const so we're going to need the image width and then we're going to need the amount of frames associated with this image so let's go back to sprite.js and say that the width right here the width of our crop is going to be equal to this dot image dot width that's going to give us the full width of the image and now we can divide this by 7 which is the amount of frames that we actually have within that image now we need to remember that we're using the sprite class for both our projectile and also our orc and our projectile does not have seven frames associated with it it has one therefore we need to make the seven a dynamic property something that we can set for both our projectile and also our enemy so if we want to make this property dynamic instead of referencing seven right here within our constructor i'll create a new property and i'm going to call this frames i'll set it equal to an object and within this i'm going to create a property of max what is the max amount of frames we have associated with this sprite so in this case it's going to be equal to the 7 and now i can replace the 7 with this dot frames dot max and that'll give us the correct image width but like i was saying we need to make this dynamic to take into account our projectile sprite as well so frames max can't be a default 7 right here needs to be a default based on an argument we pass through within our constructor so instead of saying 7 right here a reference frames dot max instead but if we're referencing frames.max we need to pass it through within a constructor so here i'll add in frames say that it's equal to an object with a property of max which by default will be equal to one i'm setting this equal to one by default because if we look down here at this equation we're dividing this.imagewidth by this.frames.max if our sprite only has one frame such as our projectile right here we know that the width of this crop mark is always going to be the full width of the image because something like 20 divided by one is going to be equal to 20. so that's going to take care of our projectile sprite but to take into account our enemy sprite which has 7 frames we need to make sure that we're setting frames max equal to 7 whenever we're creating a new enemy so let's go into enemy.js we know that our super right here now takes a frames property and this is going to be equal to an object with a property of max so the max here for this specific enemy is going to be equal to 7 and that should give us the correct crop values for both our enemy and our projectile so back within sprite.js we're almost done with our crop dimensions but we do need to finish off our height because our crop mark should not have a height of zero it should be the full height of the image because we're not cropping anything on the y-axis so let's get rid of this zero and replace it with this dot image dot height and that'll give us the correct crop mark in which we need for both our projectile and also our enemy but to test this out we need alter c.draw image a bit this gets a bit confusing at least with the way this api was actually created i wish it was a little easier but this is what we're going to have to work with to get things cropped correctly so c dot draw image if we want to include a crop mark we need to get rid of these first two values and we're going to replace them with something different we're going to replace them with the crop position instead so our second argument instead will be crop dot position dot x and then our third argument is going to be crop dot position dot y now since we're using a crop here instead of just positioning this image for the fourth and the fifth arguments we need to reference the width and the height of the crop so our fourth argument right here will be the width of the crop which we can now get with crop width and the fifth argument will be the height of the crop which we can get with crop dot height but in order for this crop to work we need four additional arguments added onto this like i said it gets a little confusing when adding in a crop to this draw image function so the next two arguments are going to be where this image is actually placed on the screen so we'll add in a comma and then we know this should be placed wherever this dot position is so we'll reference this dot position dot x for the x axis and then y and comma and reference this dot position dot y now we need two more arguments and this is going to be the actual width and height of the image after the crop so basically we're cropping down to this size right here but we have the ability to scale it up or down based on these next two arguments i want this to be the exact size in which we're cropping too so for image width i'll say this should be the size of our crop dot width for the last argument i'll say the height of this should be the size of our crop height so in the end we should have 1 2 three four five six seven eight nine arguments within c.draw image and if everything went according to plan we set crop correctly we set to draw image correctly we set frames max correctly our projectile sprite should still exist and our enemy spread should only show one orc on the screen let's save refresh and see how this looks so we do only have one orc that is perfect and if i begin creating projectiles we see those one individual projectiles no bugs or anything of the sort this is looking absolutely great so now we set all this up now we can begin animating these sprites using the same c.draw image method that we just created so looking back at work.png we just created the small blue crop box what we need to do now is move the x position over to the next version of our image and when we move this position the width and height of this crop box are going to stay the exact same we're just going to be moving the position over until we get to the very last frame once we're there we're going to go back to the beginning setting our x position back to zero so really we only need to focus on the position of our crop on the x axis so let's go back to sprite.js and our crop position on the x-axis is going to be set right here so we need to move this value dynamically to begin moving that crop box over to the right within the sprite sheet so really what i want to start out with right here for x position is going to be our crop width because if you think about it looking at our png we're only moving our crop box over by the actual width of our crop box right here so our crop width is defined down below we could take this equation put it up above with an x but we don't want to do that because that's just duplicating code and we don't necessarily know what this means of above when we assign it to position.x as a result it makes sense to create a const above crop called crop width set it equal to this equation that we just wrote out so now we can use crop width within position x we know exactly what we're assigning to position x and if we really wanted to we could get rid of this equation as well and replace it with crop with so now that's a little more apparent in regards to what we're assigning to our width property right here but will our code function exactly the same with this new crop with cost well let's think about this let's say that our sprite sheet for our orc is around 700 pixels we divide that by this dot frame's max which we know is 7 then we're going to get a value of 100 so we're using our crop width to define our width down below for actual crop mark and that indeed is correct our crop width should be 100 right here but right here for actual crop position if we assign position x equal to 100 we're effectively moving our crop mark over to the right by 100 pixels which means to start when we render out our org sprite sheet we're actually only rendering out the next orc in line and we try rendering out our projectile we're not rendering out anything we're only rendering out whatever is next to the projectile so when we're defining our position.x and setting it equal to our crop width by default we want our crop width equal to zero so we always render out that very first frame but this position x crop width is what needs to be dynamic so that's actually moving throughout the whole sprite sheet as a result within this dot frames i'm going to add in one more property called current what is the current frame we're on by default is going to be the frame of zero so once we assign zero to this dot frame's current we can begin using it within our crop position right here i'm going to multiply crop width by this dot frames dot current so by default we're cropping from a position of zero because zero right here times our crop width of 100 is going to be equal to zero but now we can begin increasing this.frames.current by something like one if we increase that by one then we're saying to move our crop mark over by 100 pixels that's going to render out the very next frame within our sprite sheet if we increase it by one more we're going to get not 100 but 200 pixels and this is just going to allow us to run throughout the whole thing until we get to the very end of the amount of frames we have then we'll reset this.frame's current back equal to zero but first things first let's save this and make sure that our code still functions correctly we also make sure that we do this so we don't run into any really big bugs throughout the process and it looks like we're good to go but now we want to make sure that we're increasing this.frames.current over time so to get our crop mark moving over time i'm going to begin increasing the current frame value which we're using to actually set our exposition on that crop right after draw image i can begin writing that i want to start increasing this dot frames dot current by one for each time we call draw and now i know i want this to reset as soon as frame's current is equal to 7 that's going to reset our chrome mark back to the very beginning and i can do that with if this dot frames dot current is greater than or equal to this dot frames dot max so the max amount of frames associated with the spreadsheet minus one because this.frames.current is using indices while this.frames.max is using a count then what do i want to do i want to select this.frames dot current and set it equal to zero that's going to set the crop back to the very beginning and then we can begin launching it to the very end once more it's going to loop the animation essentially so let's save this refresh over here and now you'll see that these are indeed animated we're going from the very beginning of our spreadsheet to the end back to the very beginning now these are going quite quick you can leave this as is but i do want to slow these down a little bit and we can do that using with something that i like calling a frame hold so instead of calling frames current for every time we call draw right here basically for every frame within our game we're only going to call it for something like every fifth frame or every tenth frame i can write an if statement that says if this dot frames dot elapsed modulo 5 is equal to 0 then i want to call the following code so frames elapse is going to be a property that just increases for every time we call draw we're going to modulate by 5 which just means divide it by 5 and get the remainder if that remainder is equal to 0 then we are indeed going to increase frames.current but we're only going to do it for every fifth frame associated with our draw method it's just a way to slow things down so our sprite sheet animation doesn't move super quickly this 5 right here can be called a frame hold for how long do we want to hold off before we increase frames.current so we can replace 5 right here with this dot frames.hold and that should give us the effect we were going for in regards to slowing down our animation but we do need to add in this elapsed and this whole property for this to work so we'll add those in we'll say elapsed is going to be equal to 0 and then our hold will be equal to 5 a static value to start we'll make this dynamic later but now these will be usable down below within this if statement and help us better understand what this statement does we can say responsible for animation but before we save this we want to make sure we're always increasing frames dot elapsed for every time we call draw so we'll select this dot frames that elapsed and add a one on to that for every time we call this method so let's save this and then see if our animation is slowed down we'll refresh and indeed it is slowed down so you might like this look you might hate it you can go ahead and fine-tune things in regards to how you want your animation to look me personally i think this is a little too slow so i want this to be faster i'll go to our frames hold up above and decrease this value to something like three or two that just means run the animation for every three frames instead of every five so i'll save it at three refresh and i think i like how that looks that looks more natural in regards to the speed they're currently moving at i'll create some projectiles everything still looks to be functioning perfectly so this is how we're going to begin sprite animation specifically with our orcs we're going to continue with this by animating our buildings next so we'll go back to to do and check off our enemy sprite next let's add in our building sprite so what does this look like well over here within our image folder if i click on tower.png you can see this is what our building spray is going to consist of so essentially this is about 19 frames of images and it starts off with this little projectile looks just like the projectile we already added into our game and once we hit this frame right here you're going to see this is the very last frame in which a projectile exists we're going to launch a projectile which we already created using a projectile sprite from this exact position on this tower sprite and it's going to give off the illusion as if this projectile really came from this image right here because over in the next frame while the projectile just doesn't exist as long as we launch the projectile from this frame right here out into the open it's going to make it look like it was actually part of the sprite sheet that we have right here so how would we go about adding the sprite sheet into our game well now that we created this sprite class it's going to be a lot easier to do for our building class so i know i want building.js to use an image instead of this rectangle that we have going on here so if we want this to use an image we can simply go to the very top and right extends from the sprite class because we know sprite consists of that image functionality now in order to use the sprite parent we need to make sure that we're adding in a super method into our constructor function and remember super just calls constructor of the parent class which is sprite and we know that constructor takes one argument and inside this argument it takes a few properties so it's going to take a position property which we're passing through already within our building class so here we can say position it's going to be set from our parent sprite class and if we're setting position directly within the parent sprite we don't need to set it directly within our building class we can actually get rid of this line right here where we're setting the stop position equal to position just cleans up our code a little bit but in order to completely add in a building image we also need to pass through an image source property as well because if we check within sprite.js scroll to the top and look at the constructor it takes a few things position image source and then frames so we're passing through image source over in building.js what should image source be equal to well i want to start with our project root wherever index.html is and then go inside of our image folder so add a string right here and then say within the current directory i want to go inside of img then i want to reference tower.png that's going to make sure that image source is set so that it can be used within the draw image function within our sprite class now when we're checking out our sprite class we know that it also took a frames property within its constructor so with this super we're going to write a frames property set equal to an object and right now we're only setting the max amount of frames associated with this one image and i already counted all them it's going to be 19 but if you're using a different image all you need to do is go into that image so tower.png and then count up the amount of frames you want to animate so this entire sprite sheet is 19 frames and i already specified that within building.js and you might think this will work right off the bat but if we look very closely here we're setting a property of this dot frames within our parent of sprite just by passing through frames right here within super but if we look down below we also have a property called this dot frames what was this.frames used for within our building well if we scroll down you'll see down below whenever this dot frames is divisible by 100 that is when we're saying to launch a new projectile we're no longer going to be using this dot frames for this we're going to call this something else and that way this doesn't override the frames that we're actually setting within our parent sprite class so let's change this.frames equal to what we're going to change it eagle 2 elapsed spawn time because that is essentially what this is and then down below where we have this dot frames in these two locations i want to change this in both so i'll say when this dot elapse spawn time is divisible by 100 we're going to push in a new projectile and we're going to be increasing this for every time we call update for every frame essentially now as long as we set these properties directly within super we know that we can begin drawing out an image using our parent classes draw method the thing is we already have our own draw method down below which draws out a blue rectangle we're no longer going to be drawing out that blue rectangle so we can get rid of these two lines right here but we might want to keep the radius associated with our building as a result it makes sense to keep this draw method with the associated code and then call the parent's draw method with super dot draw that way we get the best of both worlds we can call the image-related code associated with our parent class but we can also call any code that's just supposed to be associated with the current class we're currently on which in this case is building so as long as we fill super correctly we make sure that we got rid of this.frames and we call super.draw within our drama that everything should go according to play and we should see our building being drawn out let's save this refresh and see what happens so now if i click we have a building in place and it's already animated because we're using our sprite parent class which takes care of all that frame related animation stuff now one obvious issue is you'll see when i click on this very top left hand corner piece that our building is positioned a little bit beneath it and then i can go one tile down below click and our building is placed even further down we want to make sure that we're placing our building directly on the tile we actually click on but since our sprite is drawn from the top left hand corner while it's pushing our building down rather than putting it in the exact spot we want it at so we need to add some offset to our building sprite's y-axis so to add in some offset we're going to go to sprite.js and here i'm going to add in one more argument so after frames i'm going to add in a comma and set offset equal to another object with an x equal to 0 to start and a y equals 0 to start just so i know what offset should consist of and then i want to make sure that i'm setting an offset property whenever we create a new sprite so i'll say this dot offset is equal to the offset that we're passing through within the constructor once this offset is set well we can use it down below within c dot draw image so this is what's responsible for actually drawing out the image on the screen and we know these last four arguments determine where it is placed so for position y i just want this placed a little bit up above based on the offset that we're passing through so what i can do is add on to this this the offset on the y-axis and if we ever wanted to offset things on the x-axis as well we could add on this offset on the x-axis and by default since this.offset is set equal to zero because we declared a default nothing is going to happen to the sprites that we don't want moved around anywhere which is perfect but we do want to move our building sprite up a little bit based on this offset value so over in building.js within super now we can add in an offset property an offset is going to be equal to an object with an x and also a y but instead of sending this equal to 0 i want to set it to negative 80. so we're moving the spray up by 80 pixels let's save this refresh and click this top left hand corner piece now you can see that is placed correctly so great we solved that issue so the next thing i want to do is instead of shoot based on some sort of elapsed frames property right now we're only shooting for about every 100th frame i want to shoot based on the actual frame within this animation so for every sixth frame this runs we should be shooting a projectile why every sixth frame well if we look at our image tower.png we go one two three four five six this is where we want to launch our projectile on this sixth frame right here so rather than wait 100 seconds to launch a projectile we're going to scroll through this animation and once we hit this frame right here we're going to launch a projectile out into the open so how do we check based on the sprite sheets frames rather than for every 100th frame like we've been doing well let's go inside building.js and then scroll down to our update function so you'll see right here within this if statement we're saying if this not elapsed spawn time is divisible by 100 then we're going to call projectiles.push we no longer want to do this let's go ahead and get rid of this if statement get rid of the ending if statement bracket and then get rid of this.elapsed spawn time we can also get rid of this property all together up above so we'll delete that and now basically whenever we call update we're just going to non-stop be pushing projectiles in our projectiles array but that's not what we want right now i only want to push in a projectile for every sixth frame of our actual sprite sheet animation so the first thing i'm going to do is make sure this code is as legible as possible looking at this if i were to analyze it for a couple seconds i would know exactly what it does but i can make this even more legible by replacing this with a method called this dot shoot we want to reference this.shoot we need to create that method within the class so we'll say shoot is going to be equal to the following code we're going to push in a projectile into our projectiles array so now this is very readable within our update function but we only want to call shoot under certain conditions so we'll write an if statement that says if we have a target available we can get that with this dot target we're always setting this based on the collision detection between our building and our enemies if a target is available then yes we do want to shoot well we want to limit the rate in which we shoot so we're going to add in an and statement and after that reference are this dot frames object and get our current frame so if this current frame is equal to 6 then we want to shoot let's save this and see what it looks like refresh and draw a building we're only going to shoot an enemy once they enter in here that works but it looks like we're shooting multiple projectiles at once rather than just one but it does seem to be happening on around the sixth frame so that is good but we definitely want to fix this bug where we're creating about five to six different projectiles so why is this happening well we need to remember that within sprite.js within our draw method that this code down here that's responsible for animation we're saying we really only want to animate our sprite if the frames dot elapsed time so the total amount of frames that have occurred over time is divisible by the frame's hold so how long should be holding on this current frame really what we'd want to be doing is calling this.shoot within this is statement right here because frames.hold is equal to 3 so there are going to be about three frames in which this dot frames dot current is actually equal to six as a result we're producing multiple projectiles all at once when really we only want to create one at a time so we want to grab this if statement right here i'll go ahead and grab that go back to building.js and then we want to integrate this within this current if statement so how do we integrate this statement with this one well all we need to do is grab everything within this if statement add in an and statement paste in the current code and get rid of the original if save that refresh and draw a building and now this should only be called once and indeed it is because we're taking into account that we're using that frame's hold property now we're shooting a projectile for every sixth frame but as you can see it's not being shot from the very top of our actual building it's being shot from somewhere down here in the middle so we can fix this by heading down into shoot and saying that our new projectile position is actually going to have a y value of this dot center y minus 80. we're going to offset this by 80 as well similar to how we did with the actual building sprite so let's save that refresh and draw dry building see what that looks like it's close but it doesn't seem to be exactly on the money so how do we test this to make sure that we can get this offset related to our projectile directly where we want it to be within the center of our tower well i think it makes sense whenever we spawn a projectile we're not going to update it in regards to its velocity we don't want to push it around in any direction we just want it to sit there so we can position it correctly and then we'll go ahead and let it move again so back in our code we'll go to projectile.js and within update we're going to see lines 21 and 22 consist of setting an x and a y velocity we comment these out save refresh and then try launching a new projectile you're going to see our projectile stops and wherever it is originally positioned so we want to make sure that we're moving this to the top left a little bit more so that's exactly placed on where this should be launched so it looks like i might need to subtract around 20 pixels from both y and x so i'll subtract 100 from y and then 20 from x save that we'll see what it looks like real quick that launches and that is very close not quite there yet it seems to be in the correct position on the x-axis but we might need to bump this up by around 10 pixels on the y-axis this is more like just a guessing game almost i don't know the exact way to get it perfectly up there but i know with a little bit of guessing we definitely can get it there so i think that is almost exact it might be off by one or two pixels but this should be good enough to get a realistic launch effect for this projectile so to get this moving again let's go to projectile.js and then we'll uncomment out lines 21 and 22 save refresh and watch this in action so now when an enemy moves in it moves from pretty much the exact position i really like how that looks we can go ahead and call this step of the task complete the next thing we want to fix is making sure this animation only runs if a target is currently available to us so what is going on here well let's go to building.js every time we call update right here we're calling this.draw which in return calls super.draw so when we're calling super.draw we're going inside of sprite.js and calling all this draw code so all this code right here is responsible for drawing out the image but down here this is responsible for actually moving our animation but the thing is we only want to call this under certain circumstances we don't want to call this all the time otherwise our animation is just going to be happening over and over again so to fix this we can put this code right here within a separate method i'll grab everything from our comment down to the end of the if statement cut that out and then right beneath draw i'll add in a method called update an update is going to contain all this code down below now typically with an update we've been calling this dot draw but this would be exact same thing as we had prior where this code was within our draw method so we're no longer going to be doing that because we know we want these two called separately under certain conditions but if we're separating these two statements of code remember enemy.js the actual movement of our enemy was dependent on the animation code whenever we called super.draw if i were to save everything and refresh you're going to see our enemies no longer animating because within sprite.js update is no longer being called since we refactored things and moved it to its own method so within enemy.js let's just get our enemy moving real quick within update we can now call right after this.draw super dot update to caller animation code save that and refresh make sure our enemies are moving again and indeed they are looking great but if we draw out a building you'll see this isn't animating at all now we need to make sure we're calling super.update within our building code as well so let's go to building.js and within update here if we were to call super.update that's going to call our actual animation code save and refresh now you'll see our building is moving again but as i mentioned we only want this to move under certain conditions what condition would that be well if we have a target in the first place so if this dot target exists we want to call super dot update that's going to make sure our building is moving let's save refresh drive building not moving by default but once a target does exist we are going to move things but once an enemy goes outside of the range you'll see that our building stops on whatever frame it just left off on you see right here we didn't go back to the beginning so we want to make sure that we go back to the beginning as well we want to call the animation code for as long as there is no target and our current frame is equal to zero so when a target exists we'll call super.update which animates things or if a target does not exist and this dot frames.current is not equal to zero meaning if we're on any other frame within our animation besides zero we want to go ahead and animate back until our frames.current is equal to zero it's going to reset our building back to its original position even if a target does not exist so let's save this refresh and then draw in a building you're going to see this animates perfectly it's only being called whenever an enemy is actually within the range but let's watch what happens when an enemy goes outside the range this very last one right here is going to go out but we always go back to our original position because we're saying so if a target does not exist and this dot frames that current is not equal to zero we want to animate until we set this value right here back equal to zero therefore we won't be calling super.update any further the last thing i'm going to do temporarily is comment out our building radius right here this is only going to show either on building hover or when we originally placed building i think it kind of muddies up our game a little bit when we have all these different circles overlaying each other so i'll comment it out for now save and refresh and then start drawing on buildings and this is looking really good but if we're not careful we won't notice a bug associated with our code still watch what happens when i refresh draw down below and then draw a building on top of this one we just drew if i draw on top of it you're going to notice that the top building is overlaid on top of the bottom building we need to make sure that these are ordered correctly we want buildings on the bottom drawn on top of the buildings in the back so the higher the y value associated with a building the closer to the front of the array they should be and that way everything will be rendered out correctly on the z-axis so how do we begin sorting our buildings whenever we place them well where do we place a building in the first place it's going to be within index.js and if we scroll on down to the bom or a file wherever event listeners are right here on line 141 we have a click event that essentially pushes in a building into our building's array whenever we push in a new building we're going to want to sort our buildings array so that items closer to the top of our canvas are near the front of the array rather than the back and that's going to make sure everything is drawn out correctly so let's sort everything with buildings dot sort this is an array method and this array method takes a sort function looks like this just a simple arrow function the arguments within this arrow function are going to be a and b these are arbitrarily named but we're basically looking at these two values as this is going to be building a this is going to be building b we're comparing whatever buildings are within this building's array to each other we're going to compare every single one until these are sorted out into the correct format so this function right here needs to return a value and when we're sorting numbers this value is either going to return a negative value an equal value or a positive value so here's what i mean by this let's select building a by referencing our a argument and then we're going to get its position on the y-axis from this we're going to subtract our b building position on the y axis and this is going to compare the two y positions so let's say building position y is equal to 100 that means it's about 100 pixels from the top of our canvas and b position y is equal to 1 10. if we were to subtract 110 from 100 we would get a value of negative 10. since this returns a negative value it's saying move a to the beginning of the array so hypothetically let's say our array starts off with b in the front and then a at the end since b is in the front even though it's further down as indicated by 110 right here we're drawing it behind a because it is the very first thing we're calling b dot update on which contains all of our draw code but when we run it through buildings.sort when we compare these two positions together and we get a value of negative 10 it's saying move the first building right here to the front of the array whenever we get a negative value we're moving the first position to the beginning if that's the case we're taking a moving it to the beginning and therefore we're going to get a resulting array of a before b and this makes way more sense because a is higher up on the screen than b we want to make sure that this is rendered out first and then b is rendered on top of that so this isn't a totally comprehensive course on the sort method right here but hopefully that gives you a little overview in regards to how sort works in the first place so let's make sure that we save this and then go back to our game and now we're going to click from the bottom and then click from the top and since we called sort the top building is no longer being drawn on top of the bottom one we know this works correctly and it's going to continue working correctly whenever we keep adding in new buildings which is exactly what we want so i think this is going to take care of our building sprite there are still a few finishing touches which i want to take care of later but i think this is good for now so let's head back on over to to do and check off our sprites building now let's finish this off by rendering out explosions so within our game whenever a projectile hits an enemy i want that projectile to have some sort of exploding effect associated with it so if we go back to our project and we look under our image folder we can view explosion.png and you'll see this is an explosion animation that we have here and this is about four frames long so we want to start using this within our project really all we need to do to start is go to index.js and then right above our animation loop it's actually going to be right above spawn enemies right here on line 59 i'm going to create a const called explosions and this is going to be equal 2 and empty ray so we want to populate this array with explosion sprites whenever a projectile actually hits an enemy so where does a projectile hit an enemy well let's scroll on down and see if we can find it well it's going to be right here on line 131 for me this is where i'm selecting our building it's individual projectiles and then splicing out that one projectile from this specific spot within the projectiles array so right before this this is where i want to create that explosion so to create that explosion above this i can write explosions dot push and i want to push into this explosions array a new sprite that we can animate so now we have a sprite class available to us to create a new sprite all we need to do is write new sprite and then start filling in the correct arguments to actually instantiate the sprite object so what are the arguments associated with our sprite class if we forget we can always head on over to sprite.js scroll to the top and within our constructor these are the arguments we want so they're really properties not so much arguments but our first argument is going to be an object that contains all these properties so i'll select that object hit command c to copy it go back to index.js and now when i'm creating this sprite i can paste in all those arguments but we do have to change the syntax a bit in order to get this working but this is a good start so position is not going to be equal to but rather colon to assign to with this little colon right here an object with an x and a y image source we don't have a variable available to us in which we can just use shorthand syntax like we are right here so we need to make sure we add a colon and assign this equal to some string i'll leave it empty to start and then we need to get rid of these other equal signs because we're passing this object through as an argument rather than saying that these are going to be default so formatted correctly this is what it should look like we're taking our explosions ray and pushing in a new sprite with all these arguments now the sprite is going to be representative of an explosion so where do we want this explosion to occur we can determine that by setting this position property where on the x-axis should we create this explosion well right above we can see we have a console.log where we're logging out projectile.enemy.help and if projectile is available to us we can grab that projectile get its position on the x-axis that's going to say we want to spawn this new sprite exactly where this projectile is about to be spliced out we want to do the same thing for y so get rid of the zero and say we want to create a new explosion at the position of projectile dot position dot y for the y property right here so that's going to spawn this in the correct position but we do need to determine what kind of image do we want to use for this new sprite over here within our image folder we know we have explosion.png available to us so for image source we can specify we want to start within our project root where index.html is with a dot slash we want to go inside of our image folder with img and then select explosion dot png that's going to render out that sprite sheet associated with our explosion moving down our property list we have a frames property set to an object with a max equal to 1. now how many frames is this explosion sprite we can look at within explosion.png we know this is 4 frames so instead of using one right here we're going to use four instead finally we don't need any offset at least not yet so i'll leave the offset as it is so this should populate our explosions array with sprites but to render these sprites out we need to loop through this explosions ray and then call the draw and update functions associated with these sprite objects so up here i'm going to determine where do i want to render our explosions relative to our other objects i think it makes sense to render these out right after our enemies that way our enemies do not cover these explosions so right here i'll begin looping from the back of our explosion's array i want to move from the back of something well i know i'm already doing that up above with our enemies using this for loop right here on line 67 i'm going to copy this very first line paste it down below and then close out that for loop but instead of specifying that i'm looping through our enemies i want to loop through our explosions array instead so now we're looking from the back of our explosion's array we can select one specific explosion by declaring a const grabbing one explosion equal to our explosion's array and passing through i as our index so we're grabbing one individual explosion and now that we have that explosion we can call both draw and explosion dot update and we're calling these separately because we needed to divide up our update and draw functions within our spread class to make sure all of our other spreads would render and update accordingly based on their needs so we created the explosion's array we populated it and now we're rendering it out so when a projectile hits an enemy we should see explosions on our screen so let's save this refresh create a building and see if we can see an explosions so that hits and yeah you can definitely see these explosions are being rendered out but we don't want these here forever they're going to make our game less performant and it just looks kind of silly for all these explosions to be scattered out throughout our map so within this for loop we can write an if statement that says if the current explosion we're looping over has a frames object with a current value so the current frame of this explosion if the value is greater than or equal to our explosion frames object max so the max amount of frames then we want to splice out this individual explosion from our explosions array so i'll select our explosions array and then say i want to splice out this one individual explosion by using the index of i which we're getting from this for loop right here and i want to splice out one explosion from this index so now after our whole animation runs we should be splicing out one explosion it should not exist on our screen anymore let's save this refresh and see if that works so as you can see this code is just not working why is that well in order to debug this we're going to need to console log out these two values right here so let's call select out first explosion frames current i'll paste that on in save then open up our console by inspecting an element hitting the console tab and then refreshing and let's see what this populates so i need to create one explosion and there it is so at the very top it looks like frame's current is going from zero to one to two and then resetting back to zero well first this should definitely be going up to three why is it not going up to three well we're going to have to check out our rendering code within our actual sprite class so let's head into our classes folder go into sprite.js and find out where we are resetting our frames current so that's going to be down below within our update method and yeah right about here this if statement actually resets this.frame's current back to zero so i'm not really sure why i wrote this it might have been a mistake on my part but we do want to get rid of this negative one right here because that's going to allow us to go one more frame into the future to make sure that we complete this whole sprite rendering right now all of our current spreads are off by one because we're not rendering out that very last frame available within those sprite sheets so let's make sure we're getting rid of minus one and that should fix the issue with us not looping through our entire sprite sheet so that's already saved i'll refresh and then we'll create some new explosions and that should go up to three so there it goes that definitely fixed that now we're getting the full animation for our enemies our explosions and even our buildings so great but why is it still not splicing out well our last frame is going to be an index of 3 over here let's go into index.js and analyze our if statement where we're actually splicing out an explosion so we know our frame's max is going to be equal to 4 but this is not an index value therefore we don't start on zero when we're referencing frames max but this over here is indeed an index value so what we can do is either subtract one from explosion.frames.max to make this index like or we can add on one to explosion.frames.com i think it makes more sense to subtract 1 over here so i'm going to do that but now if we save this refresh and then start creating some explosions we're going to see those explosions disappear immediately as soon as they complete their full animation that looks absolutely great so the last thing i'm going to do here is prove to you that these are being removed by can't slagging out our explosions array and we should really never see more than one explosion in here as long as we only have one building within our map so let's create that explosion there's our first one and yeah eventually just goes back to its empty array status we never have more than one sprite within this array at any time so we know our explosions aren't being created correctly and they look really good in the process so with this we're going to be able to go to our to-do list and check off explosions now the very last thing we're going to do is launch this game so that we can share it live on the web and we're going to do this for completely free using github pages so how do we go about launching this game well the first thing we need to do is make sure that we have a github account created so if i head on over to github.com github is essentially a platform that stores your code on the web so you can grab it from anywhere in the world we're going to be pushing our code up to github and as a result it's going to host our game on a url which anyone can visit as long as they have access to internet connection so if you don't have an account you want to make sure that you sign up for one by clicking this button right here it's completely free i already have one so i'm going to sign in and once you sign in you're going to be greeted with a dashboard that looks something similar to this now what we want to do is create a repository a repository is basically just a page that stores all of our game's code on the web this can be private or it can be public for our game we're going to make it public because all this code is already publicly available and if you want to host this for free using github pages it needs to be public as well but if you don't want your code visible to everyone on the web well you can go ahead and make your repo private just means no one can view it besides you but if you do want to host your game using github pages using a private repo you will need to pay something like five to fifteen dollars a month for it so we're going to go over to new and create a new repository so we don't need any template you are going to be the owner don't need to change anything here repository name we're going to call this something like tower dash defense that's really all we need to get started here you can see this is what i was talking about you can make your repo either public or private since we want to launch this for free on github pages we need to make sure that we're using public right here we don't really need to do anything else unless you really want to such as include a readme or choose a license i'm going to skip all this i'm just going to create my repository with our name and the public option selected so i'll create that repository and this page is going to act as a storage device for all the code we just wrote so you do need to know a little bit of command line in order to get this working and i highly recommend checking out some sort of github tutorial available out there on youtube there are tons and tons of them already so i'm personally not going to do one just go ahead and look up a quick tutorial on how to push up to github and you'll be up and running in no time with this but i'm going to show you as much as i can anyways so we're going to create a new repository on the command line i'm going to select everything that we see right here and just copy that and then i want to open up an app called terminal so terminal actually looks something like this it's either just a white or black screen that allows me to view my computer's contents but using a command line so everything that i just listed out right here is a one-to-one representation of what we have over in something like finder i just listed out my home directory which contains everything within christopher list this is my home directory over here you can see what i have over here matches up with what we have within terminals applications matches up with applications over here we have documents library etc but we use command line to run specific commands such as the ones github give us so that we can push our code up to github and then host it live on the web now i use a very specific terminal i don't actually use the default that comes with mac i use something called warp which looks like this this is something that you can download for free i'm not sure if it's available for windows but i definitely know it's available for mac and this is what i pretty much always use because it's fast and also it looks good if you're a windows user you want to use something called powershell and can pretty much run all the same commands we're about to be running right here so if you're using mac you can use either terminal or warp and if you're using windows i definitely recommend using powershell or the ubuntu linux shell which they also have available if you know how to set that up but basically what we want to do is change our directory so cd into the directory in which we're currently storing our game so if you don't know how to navigate your terminal too well this is how i recommend doing it for beginners so i'm going to move this to the top left hand corner and i'm going to bring back our finder so this one to one representation of what we have in terminal over here i want to make sure we're going into the folder where our game exists so over in finder i'm going to go inside of web where i store my project and i have a couple of these right now but the one i've been using is going to be tower defense github i want to select this folder right here and then after i've written cd space i'm going to drag this folder onto the warp terminal and this will work also for the main mac terminal i believe even powershell as well but once we drag that on in it's going to give us the exact url which we need to go to so we can change our directory into our project of tower defense github with this here if we hit return we're going to be inside of that project and i can hit ls to list out all of our projects files and folders so you'll see we have index.html our js folder our image folder etc but once we're inside of here we should be able to paste in that command that we got from github over here and it should push all of our code directly up to github so personally i've already been using git for this because it's always good to track your progress as you go throughout something so i'm going to get rid of my current get instance by removing with recursive force the folder of dot get you don't need to do this this is just for me because i already had it running but now you'll see that git is not available within this project so i can paste in all that code that i copied over from github if i just run all this it's immediately going to push it up to github for me now if you haven't set up an ssh key with github it might require that you add in your username and password and as long as you authenticate correctly it's going to push up all your code and if you're having trouble definitely check out one of those github videos available to you on youtube but once you push everything up and refresh over here we're going to see that we made our first commit so all we really did was create a reading file using the command line and then push that up to github that is our first commit that was the first piece of code that we really changed for this revo but it's really not because we already wrote all of our code so if we want to add in our additional code we can see that the code is definitely still there we have an image folder we have a js folder index.html if we want to push the rest of this up we need to run a few commands using our terminal so we're going to run these git commands the first one is going to be git add dot and this stands for get at all it means add everything that's currently within our tower defense directory we'll run that and then we can type git status to make sure that those are actually added into the github staging area i'll hit enter and you'll see these are all the files that we're preparing to push up to github this is everything that we actually edited within our game so great this is exactly what we want to push up but we can't push this up just yet because we need to create what is known as a git commit a git commit is just a snapshot of your code at a particular point in time and as you make commits for your code you can jump between them in case you ever mess up you can always go back and revert to a prior instance so that you're never losing your code along the way you always have some sort of temporary instance which you can go back to so to create that git commit we can write git commit dash m which stands for message and then we need two double quotation marks and inside of this we can create a message that describes what code changes we just made so here we just developed tower defense game that's going to be my commitment that you can write whatever you want but it's good to make this as descriptive as possible for whatever it is you just did so i'll hit enter after that and now we just created all these files directly within git and as long as everything was created correctly now we can type git push and it's going to push everything up automatically to the same git repo and we should ran all those initial commands on so i click our code tab right here you're going to see now we have all the files associated with our tower defense game we have index.html we have everything within our js folder we also have everything within our image folder we can click on one of these and see all the images associated with our game so this is great now we have a storage area which we can always come back to in case we mess up our code on our local machine but we do want to host this live on the web to host this live on the web we're going to go over to the settings tab i'll click that and then on the left hand bar over here you're going to see a tab for pages let's click that as well and now you can see right here github pages is designed to host your personal organizational or project pages from a github repository we're going to host this specific github repository so that is live on the web so in what github branch does our game currently exist well we can click this tab and then just select main because that is the default we haven't done anything complex here and now it's going to ask what is the root of our project within all of our code files well that's also going to be the default which is slash root because we know that is where index.html is currently saved is saved within the root of our project so as long as we have a branch of main and index.html is stored within our project root we can hit save and it's automatically going to set up a url which we can visit to view our game so if i click this we're going to be returned with a 404 error saying there isn't a github page inside here not yet it is currently building in the background so the first time you launch this you can go over to the actions tab you'll see github is building our site so that it can be viewable on the web at that url so it's currently building right here and also on deploy but once this is done we should be able to visit that url you'll see now it finished if we click that same url now our game is completely available but on something anyone can visit no matter where they are as long as they have connection to internet so if we start playing our game we can create a building this works exactly as we coded it locally which is really freaking cool now if we ever want to make any updates to our game we can simply go back to our code start typing in some updates update here i'd save this and then i would head back to terminal do it get at all and then i would run through the same process of doing a git commit message and then a git push and if you push that up it's automatically going to be pushed up to github and it's going to automatically run the same commands that were just ran right here as a result your live site that this url is also going to be updated automatically with those changes you just pushed up so it's a really nice deployment method that github provides so you don't have to drag and drop anything using ftp you can simply just push up your code and all of your changes will automatically be available on this live url in which anyone can visit so if you want to play this game you can either visit this url right here and there will be another one available within the description related to the chris courses github account but otherwise i think this is a great start for creating a tower defense game so let's go ahead and admire the results [Music] and if you would like to take this to the next level eventually there will be a premium tutorial on this in which i'll show you how to add in more buildings more enemies and more interactive features compared to what we have right now but otherwise i think this is a great start for creating a tower defense game thanks so much for watching everyone i hope you enjoyed and i'll see you in the next one [Music]

Channel: Chris Courses

Views: 510,020

Keywords:

Id: C4_iRLlPNFc

Length: 315min 40sec (18940 seconds)

Published: Thu Jul 07 2022