HTML5 Canvas and JavaScript Game Tutorial

to create a canvas game like we see right here we're going to have to cover quite a few topics specifically we're going to have to learn how to create a player like we see in the middle how to shoot projectiles how to randomly generate enemies so they come and attack you at random times how to detect collision for whenever projectile hits an enemy when an enemy hits you how to remove particles off the screen how to actually colorize these things so it looks good how to shrink the enemies on hit how to create particle explosions like you see for every enemy that we actually hit how to keep track of your score each time you hit an enemy and then we're also going to want to add a game over ui a restart button and then when you refresh the page we need to make sure that we have a way to actually start the game so to get started we're only going to use a simple html file and then vanilla javascript to code this whole thing from scratch so first thing we need to do is actually create a project now when i create a project i like going inside of my home directory and then i created a folder specifically for my web canvas project so i go inside of web go inside of my canvas folder it really doesn't matter where you put this you can put this in your desktop documents wherever and inside of here i'm going to press command shift n to create a new folder and this is going to be called canvas dash game so once i have this folder created i'm going to go ahead and drag it on top of sublime text to open it up in project format and once i'm here what i want to do is go to file new file and then i'm going to hit command s to save this new file that i just created and then i want to find the folder that i just created as well so we know this is inside of web canvas canvas game and i'm going to call this index.html this is what's going to house our actual canvas html element so index.html and then i'm going to do the same thing just go to file new file command s to save and this is going to be called index.js so this is our javascript file this is where we're going to write the actual code that produces our game these two files are going to be working in tandem together which you'll see shortly so once i've created these two files if i open this up in finder again and double click on index.html this should automatically open up in your browser of choice mine is chrome so you'll see it right here so nothing just yet but you'll see if i go inside of index.html create some dummy html inside of here save and refresh you'll see that the html shows in the browser so you know that this is working and that it is reading our code but really we want to create a canvas game not just random html text so to create a canvas game we need a canvas element this is what we're actually going to draw on do calculations and so forth now when i save and add this and then head over here and refresh the page and i inspect things by right clicking and clicking inspect you'll see that our canvas element is actually there on the screen but it's not actually showing anything nor is it the full width and height of the browser so that's going to be the very first thing we want to do is make sure that this canvas takes up the full width and height of the browser so to do this we're going to head on over into index.js and we want to select our canvas but put it inside of javascript so to select our canvas we'll write const canvas is equal to document dot query selector so when i refer to document it's referring to all the html tags within this elements tab right here everything that our website our web page consists of is going to be referring to this document object and when i type in query selector we are looking for a specific html element which one do we want well we want the one called canvas so if we replace element here with canvas save and then to make sure this works you can always console log your code we're just going to console log our canvas cons we save refresh head on over to our console refresh again well nothing happening just yet we're not actually reading this javascript code and this is an easy fix if we head to index.html and look inside of our elements tab which consists of our html markup you'll see that we're not actually pulling in any javascript we need to make sure that we specify what javascript file do we want to pull in and we know that file we want to pull in is index.js so we'll go ahead and add a script tag and a script tag always takes a source what is the source of the code that we want to reference the source is no other than index dot js and just to be extra specific here to make sure that we are looking inside of the correct directory we can add a dot slash all this means is we want to select the very first index.js inside of our root directory which is canvas dash game so now when we save and refresh look in our console well now we are logging out our canvas element and it looks exactly like what we have right here so we successfully selected it but now we want to actually set its width and height because remember looking at elements not the full width and height of the screen so to set this width and height all we have to do is say our canvas's width is going to be equal to inner width this is just going to set the width if we save this and refresh look at our canvas now it's taking up pretty much the full width of the screen a little bit of space on the left we'll go ahead and fix that shortly but you'll see it's taking up the full width just by referencing something called enter width now where do we get inner width from inner width is a property of a window object so the window object consists of all the properties that make up your browser your current visible screen space and inside of it we have all these properties that declare things such as its width its height anything related to the browser now the cool thing is when you're using a window property you don't actually need to include window it's going to read the property automatically and it just makes your code a little cleaner so on save refresh you'll see that it works just as expected now to set our height we're going to select our canvas height and set it equal to enter height like so so now on save and refresh over here now it takes up the full height of the browser as well but we still have the issue where we have this weird kind of spacing on the left and top of the canvas now where is this coming from well if we look at our body element you'll see that it has margin as specified by the orange outlines on the left and top hand side of the screen we might be able to see this a little better by full screening this clicking on our body element and you'll see by default we have a margin of eight pixels added on to the body element browsers add this on your code by default but we don't want that at all we never specified we wanted it so why is it really there i don't know but to get rid of that margin what we can do is go to index.html add a style tag like so and then we want to specify what element do we want to style to our own liking well no other than body that is going to be our body tag right here so we want to set its margin equal to zero and that's going to take away the spacing on the left and top hand side of the screen save refresh and now when we look at our canvas well nothing on the left and top hand side of the screen a little boring to start i know but it's necessary in order to make your game look good and be the full width and height of whatever browser you're using so we're going to be referring to this checklist a lot to make sure we know exactly what steps to take in order to create that game we just saw so the very first thing we need to do is actually create a player now to create a player on a canvas our player looking back at our example just consists of a simple circle in the middle and then once one of these enemies hits it while game over our player dies sad so to create a player just a circle on our canvas what we need to do is select our canvas context our canvas context is basically just our canvas api that allows us to draw on the canvas do whatever it is we need to actually get artwork onto our canvas element so to select our context we're going to create another const and i usually call this just c instead of context or ctx just because i'm going to be referencing this so much it's just way easier for me to use c rather than use something very specific it just makes the code really bulky when you use it over and over again so typically i always say be specific with your naming but in this case we're going to go a little shorter and just call this c so const c is going to be equal to canvas dot get context and then we need to specify what kind of context are we getting 2d or 3d well this is going to be a 2d game so we're going to specify 2d here and then when we console log out our context which is now stored inside of c refresh view our console now we have that giant api object that specifies everything related to our canvas and will allow us to draw on top of it so to create a player typically you would select your context like c and then we would type in a arc function basically by specifying this arc function we can draw a circle fill it in and then it's going to be on the screen but we know our player needs to interact with the rest of our elements on the screen so instead of just creating an arc by default we are going to actually create a class for our player so to create a class we're going to type in class player capital p to specify it's a class and then opening and closing curly brackets now what properties does a player have and we can reference the done game as a way to determine this we start our game well we have a size for our player we have a color for our player and it looks like we have a position because it's always centered in the middle so this is a good way to determine what properties a player has so in order to create properties and specify them to a specific class we need to create a constructor and this constructor is called each time you instantiate a new version of the player class what that means is each time we create a new player well we're going to give a player all these individual properties to differentiate it from other players we might create so whenever we create a new player we're going to add new properties onto that new instance of the player so what properties should a player have well it should have an x coordinate should have a y coordinate we also saw that it had a radius involved with it so we'll add a radius property and we also saw that our player has a color property associated with it so we'll add a color property here as well but we need to specify what these should actually be when we create a player so when we create a player we're going to pass through arguments by specifying new player and then little quotations and what goes inside of those quotations well we need an x a y a radius and a color so when we create a color we're going to pass through these four arguments and then set the player's properties to the arguments we passed through so this that radius will be equal to the radius we passed through and then this dot color will be equal to the color we passed through as well so now whenever we create a new instance of player we can give them different properties different colors different sizes and different locations on our screen nevertheless it's always good to know how to use classes and constructors as needed especially with canvas games so we have this player class and that means what we can do is go ahead and create the player so we'll create a console called player and set it equal to a new instance of the player by specifying new player and then our constructor methods so what are the properties we want to give this player well to start i'm just going to specify 100 100 this is going to put it somewhere up here because the coordinate system of canvas starts from the top down so zero going bigger and bigger for the y axis and then zero getting bigger to the right and then our radius i want to specify 30 pixels to start and then our color i'm just going to start off with blue so if you save and refresh well nothing happening nothing being drawn even when i exit out of this why is that well let's go ahead and console log out our player check our console and refresh well we have a new instance of our player we see its color is blue its radius is 30 x and y 100 but the reason it's not being drawn on the screen is because we haven't specified a draw function using our canvas context within this player class so we actually need to draw the player on the screen based off of these properties so to draw the player what i like doing is adding my own function inside of this player class and this is called draw simple enough arbitrarily named by the way you can name this whatever you want but to be specific i know that when i call this function i want to draw my player so to draw a player to draw a circle on the screen using canvas's context what we're going to do is reference our context with c dot and then begin a path to specify we want to start drawing on the screen then we want to create an arc so canvas doesn't come with a full circle function but it does come with an arc function so you can draw an arc anywhere from here to there stop or you could just draw a full circle just like we want so what should our x coordinate be well when we create a player we specified that we want it to be at a hundred and we're passing through 100 and assigning it to this player's x property as a result we can use this.x within draw so we're going to start drawing the circle at this dot x and we're going to do the same thing for y so our y is going to be equal to 100 as well now we're passing through 30 as our radius so 30 goes here to here to here we're assigning it to this dot radius that means we can use it right here as our third argument so now we have an arc of 30 pixels wide and then we have a start angle and end angle and this determines how long your arc should be so our star angle is going to be zero and to make this easy on you guys you don't really have to think of this too much our ending arc is going to be math pi times two this is basically 360 degrees it just means we want to draw a full circle and then drawing counterclockwise this doesn't really matter which way we draw it because we're drawing a full circle so we can just put in true or false there save this refresh nothing yet don't worry we're going to get there so how do we actually draw this so to draw this what we're going to do is write c dot fill opening closing parenthesis and then we need to tell our player to call this draw function so this new instance of player that we have also has a draw function associated with it now because we created one so we can write is player draw call the function save and refresh and now we see that this is drawn on the screen but it's not taking the color that we specified as our fourth argument so in order to specify a color right before fill we can write c dot fill style and this is going to be equal to this dot color and to specify this one more time really drill it in your head we take blue go into our constructor which is going to be color right here assign it to this dot color and then we're specifying our fill style is equal to this dot color so it's kind of like a chain through code in order to allow us to use object oriented programming so when we refresh now it is equal to blue now we're off to a good start but if we look over here our player is in the middle of the screen not up here so how do we actually get this in the middle of the screen no matter what size or width our browser is well we're going to have to reference our canvas's width and our canvas is height to dynamically determine what x and y should be so instead of specifying a 100 right here what i'm going to do is create a constant called x and this is just for specificity purposes so i know what i'm actually referencing here this is going to be equal to canvas width divided by two so we take our full canvas width from here here divided by two well we're right in the center no matter how big or small our canvas is so we take x replace our x coordinate with x save refresh now our player is in the middle let's do the same thing for our y coordinate so i'm just going to copy that line put y right here and instead of our canvas width we want to reference our canvas height so save refresh nothing just yet that is because we need to use y and plug it in to where 100 is so we save that refresh now our player is right in the center so perfect let's go ahead and look at our game checklist well we created a player and we put it in the middle that's going to check off the very first step so let's check it off so next we actually need to shoot projectiles from the location of our player this is probably going to be the trickiest thing in this whole course at least i believe but bear with me so in order to create projectiles well we need to think what kind of properties does a projectile have it has the same properties as a player as in it has an x-coordinate a y-coordinate a radius and a color but it's also going to have one more property and that is a velocity so whenever you want to create multiple instances of something like multiple projectiles being shot from the middle of the screen you always want to create a class because we're going to be creating new instances of that blueprint new instances of a projectile each time we click on the screen so what we want to do is create a class called projectile opening closing curly brackets add in a constructor so what properties should a projectile have well it should have an x a y a radius and color these are pretty default for creating any kind of circle on the screen and then we also want to add in a velocity because we know our projectiles are going to be moving so now whenever we create a projectile we need to assign these arguments to one instance's individual properties so we can say this instance x should be equal to the x that we pass through we're going to do the exact same thing for y exact same thing for radius and then the exact same thing for color and then same thing for velocity so now we have the blueprint for our projectiles properties but now we need to actually determine what a projectile should look like so same deal we're just going to copy this draw function we use for our player since we know a projectile is going to be a circle that we shoot from the center of the screen and what do you know this draw function produces a circle so we can reuse our code by copying this and pasting it right beneath constructor inside of our projectile class and now we can create and draw new instances of projectiles so let's go ahead and do that whenever we click on the screen so to activate code when we click on the screen we want to add in what's known as an event listener so you'll see right here at the very bottom i'm going to add in window dot add event listener and the first argument this takes is what event do we want to listen for do we want to listen for when a user presses a key on the keyboard or when a user actually clicks on their mouse so we know we want to listen for a click event so in here we're going to add a string specify we're listening for a click and then the second argument is going to be a function so we're going to create a simple arrow function like so and then inside of this i'm going to console log out some text just to make sure this works so now whenever we click on our window we should activate this code right here you can right click click inspect head to your console pull this down a little bit refresh and then once you click you'll see go being logged in the very bottom of the console here each time i click on the screen now remember whenever you use something attached to window you don't need window in the first place the browser will understand what you're doing so you can go ahead and get rid of that and just call add event listener instead so save refresh click and now go is being logged now we don't want to log go that's quite a boring game we actually want to go ahead and create a new projectile then draw it on the screen wherever we click so that'll be the first thing we do and then we'll go ahead and add velocity so that our projectiles move from the center wherever we click so to go ahead and draw a new projectile on click we are going to inside of our click event listener create a new constant called projectile and set it equal to new projectile that is the blueprint we want to reference so projectile takes an x and y just like our player but the x and y coordinate of where our projectile should go should be equivalent to wherever our mouse is on the screen so how do we get our mouse coordinates well we're going to get it through an event object anytime you call a function in response to a click using add event listener the first argument within this function is going to be an event object so you'll see if i go ahead and console log out event save and refresh click while we're logging out a mouse event and this mouse event gives you properties related to exactly where your mouse was whenever you clicked on the screen so you'll see my client x and my client y were somewhere over here 172 for the x and 258 for the y if i click on the top left hand corner it's going to be something close to zero when i open this up you'll see it's eight and six pretty close to zero so these are the x and y coordinates from wherever we clicked on the screen with our mouse so we know our x coordinate is going to be event dot client x so this is our y coordinate refresh click our y gets bigger as we go to the right so we can use this as the first argument within our projectile here and then we want to do the same thing for our y coordinate so instead of client x we're going to put in client y and then we have a few more arguments we need to add in our projectiles are going to be smaller than our player so we're not going to add 30 for our radius but more something like 5 and then to differentiate that these are projectiles and not our player our color for this is going to be red and our velocity is just going to be null for now since we're not making use of it but we will shortly so now on save refresh click nothing happening because remember each time you create a new projectile on click you need to make sure that you also call its draw function or else the canvas code isn't actually going to activate to get it on the screen so now beneath the projectile if i call projectile projectile dot draw save and refresh click now wherever i click on the screen we get a projectile in that specific location so this is a good start and shows you how to react to click events but nothing is actually moving and to get these moving we didn't know a little bit of trigonometry so how do we get projectiles moving from the center of our screen well let's go ahead and draw it out so our home base our player is going to be right here in the center and our projectile needs to go from the center outwards to a particular direction so our projectile is going to go from the center outwards to that edge and this edge is exactly where our mouse clicked on the screen now in order to get a smooth effect where the projectile actually moves over time to this position we need to determine the x and y velocity of this particle this x and y velocity are going to be related to each other in a particular way that pushes it perfectly up until this point wherever your mouse is from the center of the screen so in order to determine the x and y velocities we need to first get the angle so this angle is the angle produced by this right triangle right here this is what we need to get right here once we determine what this angle is we can get the exact x and y velocities and perfect ratio format to send our projectile upwards to the right so we're going to get the angle second we're going to put it in an a tan 2 function so a tan 2 is what produces the angle right here if i get the x distance and the y distance and put that inside of a tan 2 like so well this is going to go ahead and produce the angle that we need right here and this is going to be in radians once we have this angle and radians we can get x and y velocities and we get these velocities by getting the angle we found right here and putting them inside of sine sine angle and cosine angle functions so sine and cosine these are just functions that produce a ratio sine for instance produces a ratio of how big is this opposite side right here to the hypotenuse of this right triangle hypotenuse being the longest side cosine produces a ratio of how big is this x distance right here relative to the ratio and when you use these two and tandem together well we can assign our x and y velocities to both sine and cosine which is going to produce the perfect ratio to start pushing our particle upwards towards this direction now if this doesn't make complete sense right now let's just go ahead and watch in action as we begin coding it on the screen and you'll see exactly what i mean by these ratios starting to push our particle in a particular direction so first thing first we don't want our particles actually spawning wherever we click on the screen we want them to spawn from the very center so in order to get something in the center remember we reference canvas dot width divided by 2 this is our projectile's x-coordinate and then we're going to do the same thing for our y-coordinate but instead of canvas width we're going to reference canvas height divided by two save and refresh and now when we click everything is spawned in the center so similar to what we had in the whiteboard our particle needs to go from the center to wherever we click on the screen and this is going to be created using an animation loop so right now nothing is actually animating this is all being drawn on the screen but we don't have any potential to move in any which direction because we're not actually running any sort of loop so in order to create an animation loop right above add event listener i'm going to add in a function called animate and this is something i'm going to call over and over again using request animation frame so when this is called it calls a function in return what function do we want to call well no other than animate itself so when we put animate inside of here now whenever we initiate animate this is just going to loop over and over again so we can test this by console logging out any kind of text and then we actually need to call animate which we'll just do at the very end of our file like so save and refresh and the llc just go just been called over and over and over again so now we have potential to start moving things across the screen and to move our projectile from the center we're going to be adding on an x velocity to its x coordinate and a y velocity to its y coordinate so let's go back to our projectile class and i like adding in another function called update and this is typically where i just update my classes properties so i can separate what my class looks like compared to where i'm actually manipulating as properties on the screen so inside of update what do we want to happen well we want to start adding on our velocity onto each individual projectile's x and y coordinates so for each frame within our animation loop we're going to set our x-coordinate for each projectile our x-coordinate is going to be equal to the current x coordinate plus the coordinates velocity specifically its x velocity and we're going to do the same thing for our y coordinate so y coordinate is going to be equal to its current position plus its y velocity and when we do this we're going to start seeing things move smoothly across the screen only issue is is we haven't passed through velocity for our projectile if we go to where we are creating projectiles on click you'll see we only specified null now instead of null we're going to create a javascript object with two properties x and y that way we can have a different x and y velocity to send this thing in the right direction to start x is going to be equal to one and y is going to be equal to one we save refresh nothing happening because we added this update function but we're not actually calling it on the screen so where we're drawing our projectile right after it if we try calling projectile.update save and refresh while still nothing happening and that is because our update function right here needs to be called inside of our animate loop because for each frame we are looping through we're going to be adding on our velocity so if we take projectile.draw and projectile.update put it inside of animate well things aren't going to work because now our projectile isn't anywhere to be found if we refresh we get this error projectile is not defined because it's only defined when we click and even so since projectile is being set to a const well this is what we call scope projectile is only going to be accessible within this event listener callback right here so instead we'll go ahead and take this out of click for now we'll leave our event listener there and right beneath where we are creating and drawing a player we will create our projectile on the outside that way we can access it within this animate function we don't have any scope issues we refresh and now our projectile has just been drawn from the center to the bottom right because its velocity is just set to one and one which is going to push it downwards to the right so off to a good start but obviously not what we're looking for when it comes to actually getting something sent in the right direction so we know we're going to be drawing multiple particles on the screen within our animate loop and to actually get these rendered on the screen and moving in different directions at the same exact time we need to create an array a grouping of projectiles and then draw them all out at the same time so i'm going to show you how to do this to create an array a grouping of projectiles we want to create a const simply called projectiles set it equal to an array so this is what's going to contain all of our projectiles and we're going to loop through them within our animate loop so that we can draw them all out at the same time this is basically management for multiple instances of the same object so we'll comment out this for now use it later and we'll also delete this code right here but when we're inside of animate for each projectile within our projectiles array for each projectile within this array we want to call that projectile's update function like so now we also want to draw that projectile's draw function so we actually get it rendered on the screen but a simple way to combine these two functions together is just with an update call this.draw so now we're calling this code right here and then we are updating the projectile's individual properties so on save and refresh nothing yet and that is simply because our projectiles array doesn't actually have any projectiles inside of it but if we go ahead uncomment this out right above our projectiles array and then put a projectile within this array we should see it being drawn on the screen and there we go so the cool thing is is now we can create multiple projectiles and have them all drawn with different properties so i want to create another projectile going in the opposite direction with a color of green i just create a new projectile called projectile 2 put it within this array save now we have two different projectiles so you'll see this projectiles array is just a way for us to create multiple particles on the screen and have them all move independently of one another now these projectiles are going to be generated not statically like we're doing right here we want to make sure that this array is empty to start but whenever we click that is when we're going to generate a new particle so whenever we click we want to take our projectiles array and then push in a new instance of a projectile so we know the center of our screen is going to be canvas width divided by two and canvas height divided by two our radius was going to be equal to five our color was red and then our velocity which is just an object with an x and a y property it's going to be set right here so each time we click on the screen we're pushing in a new projectile into that array and that is going to draw on the screen whenever we click so save refresh and click and now our projectile is on the screen because we clicked but only because we clicked but every time i click it's still going in the same direction because our x and y velocities are equal to 1. we need to set these velocities using that whiteboard math that i just showed you so very first thing we need to do is get the angle created from the center of our screen to wherever our mouse is so the right triangle from here to here to here to here and this is if i were to click in the top right hand corner so to get this angle we're going to be using a tan 2 which produces angle based on the x and y distance of your mouse for my particular coordinate so what we're going to do is create a constant called angle and set this equal to a tan math.atan2 now funny thing about this function is it takes y for the first argument x for the second why i'm not completely sure but that's just the way it works so we need the distance between our mouse and the center of our screen so for our y coordinate we're going to take our destination which is event wherever our mouse is clicking our event dot client y minus canvas width divided by 2 and that is going to give us the distance from the center to our mouse but now we want to do the same thing for our x-coordinate so we want to select wherever our destination is which is going to be event dot client x where our mouse is on the x-coordinate of the canvas and subtract from it canvas dot width divided by two and looking back at this the first argument should actually be canvas height divided by two i forgot that this is the y coordinate and this is the x at the bottom so if we save console.log out angle and i'll go ahead and make this a little bigger just to view this easier cause log out angle and refresh over here whenever i click we're going to get the angle produced from where my mouse is to the center of the screen so if i start clicking closer closer closer in this unit circle kind of manner eventually i'm going to start going negative but no matter where i click i'm still getting the exact angle produced by the right triangle from the center to my mouse and this is produced in radians so if you're a little confused with me talking about angles and you see these small numbers on the screen basically 0 to 360 degrees is equivalent to 0 to 6.28 radians so when i start going around eventually we're going to hit pi radians 3.14 over here somewhere and if i keep going while we're in the negative values which is fine because the coordinate system is a little different here on canvas but you can think of it as going to 6.28 as you keep going so now that we have our angle all we need to do is set our velocity which is done using math sine and math cosine so i'm actually going to create a constant called velocity right here this is going to be equal to an empty object with an x property and a y property now to get our x velocity we need to reference math dot cosine because cosine is always for the x adjacent axis and inside of here all we need to do is put in the angle and this is going to return any number negative one to one but now for y we need to do math that sign put angle in here and same thing this is also going to return any number negative one to one but cosine and sine together are going to produce two different results that have a perfect ratio to start pushing your projectile to wherever you clicked on the screen so now if we take our velocity right here and replace the static velocity that we have as our last argument whenever we create a new projectile save and refresh click you'll see projectile start to move in exactly the position that we click on the screen now this is obviously looking pretty crazy with everything being drawn on top of itself over and over again so we need to make sure that we are clearing our canvas basically we're just going to draw one big white rectangle on top of everything and when we do this we're not going to get this effect of lines being drawn out we're actually going to see each of our individual particles being drawn as circles as they move across the screen so for each iteration of our animate loop we will reference our context and call a function called clear rect which takes an x coordinate we're going to specify that zero draw the top left-hand side of the screen and if we do that we want to make sure our y is zero as well we want to specify how much of the canvas should we actually clear we want to clear the whole thing so we'll reference canvas dot width and then our canvas height so now on refresh and click well our player is gone but we're actually spawning our particles whenever we click which is great but to make sure that our player is always there well we need to make sure that we're drawing our player within our animation loop otherwise we're only drawing our player once whenever our file loads and then we're just clearing over it because we're calling c dot clear rect over and over again so instead of drawing your player right after you create it outside of this anime function right after we call clear rect we're going to call player draw we save and refresh and now our player is back on the screen we can click and we shoot projectiles as expected so looking at our checklist we now shot projectiles off the screen cool stuff but next step is is looking at our canvas piece we need to create enemies not that many i don't know why that happened but you know we need to create the enemies to start making this an actual fun playable game so to start creating enemies same deal anytime you have multiple instances of something you want to create a new class so an enemy is going to have pretty much all the properties that we have here for a projectile so to make our lives easier what we can do is copy our projectile class and right beneath it create a new class called enemy save and now we have the ability to create enemies on the screen the deal is is we need to create enemies that go somewhere from the outside of the screen towards the center but let's go ahead and start spawning these enemies randomly before we get to that point so to spawn these enemies randomly what i'm going to do is create a new function called spawn enemies simple enough and inside of this i'm going to call not request animation frame because request animation frame will call itself as quickly as possible instead i want to call set interval so the first argument for set interval is the callback function the code that you actually want to call for each specific interval you specify so we're going to add in an arrow function and console log out go and then the second argument here for set interval is time you actually want to go by between iterations of this call so i want about one second to go by for each iteration which is going to be a thousand milliseconds when i save and then actually call spawn enemies so copy this name right here paste it beneath animate save and refresh open up your console well just about every second we're now calling go so within set interval right here we can begin spawning enemies putting them on random locations on the screen and then they're going to start moving inwards towards our actual player so whenever we have multiple enemies we need to create something that groups multiple enemies together then draw them all out at the same time so same deal as we're doing with projectiles we don't want a projectile's array but rather we want to create an enemies array so this is going to contain each instance of each enemy we create so whenever we spawn a new enemy we can take this enemies array and push in a new instance of our enemy class now enemy takes x y radius color and velocity so we can create a constant called x and set it equal to 100 to start do the same thing for y our radius is going to be equal to let's just say 30 to start big enemies big boys and then our color is going to be equal to green just so we can differentiate everything on the screen right now and then finally our velocity let's go ahead and make our velocity equal to an object with an x and y property this is just going to be equal to one for each to start now for every second we can push in these coordinates this radius color and velocity and if we console log this out for every iteration our enemy's array that is save and refresh you're going to see that our enemies array gets bigger and bigger and this is just what we can loop through so that for each enemy inside of here we can call this update function which draws it on the screen and begins moving each enemy individually from one another so now that we're pushing these into our array we need to make sure they're actually being drawn on the screen and call that update function so within animate we call enemies for each enemy within this enemy's array call that enemies update function which calls draw which then actually updates to individual enemies properties so now on save and refresh should start seeing enemies being spawned which there they are all from the same location all going in the same velocity let's go ahead and start with getting these going towards the center of our player before we do anything else so same deal in order to get something moving in the direction you want it to move in you need to use math a tan 2 math sine and math cosine so we need to get the angle between two points what are the two points we need the angle from well where we're spawning each individual enemy and the player on the screen so we need to get the correct velocity for our enemy that we're pushing in to our enemies array let's go ahead and copy this code that we're using to set the velocity for our projectiles so grab the angle and velocity and then right beneath this static velocity we'll go ahead and paste these in delete the static one and now all we have to do is change two properties so instead of referencing the mouse y what we want to do is reference the y of where our particle is being spawned so we're declaring y right here to be set to 100. we say the distance between y and our canvas height which is where our player is and then the distance between x and canvas width which is where a player is is our angle produced while our velocity should be set perfectly to start moving this actually towards our player so on save and refresh you'll see that things are going in the wrong direction so this is a good thing to note when you're getting the distance between two points you always want to subtract from your destination so our destination is actually canvas height divided by two and canvas width divided by two not y and not x this is the source our destination is going to be ken's height divided by two so what we'll do is put that first and then subtract y we want to do the same thing for our x distance so what we'll do is take canvas width divided by two and make sure that this is positive canvas width divided by two subtract x now save and refresh now our enemies are moving in the right direction so what we can start doing is spawning these enemies and random points if i go ahead and specify the x-coordinate for enemy should be spawned anywhere from the left right-hand side of our canvas i'll just go ahead and call math.random which returns any value zero to one multiply it by canvas dot width save and refresh now our enemies are going to be spawned in random locations across the x coordinate y is always going to be the same though because it's at 100 static number we want to do the same thing for our canvas height and specified that's where the enemies y should be so save and refresh and now these are going to be generated in random locations across our whole canvas but the issue with doing this is is sometimes the enemies will spawn really close to our player and if they touch our player well that's when we're going to end the game altogether so instead of spawning this on the actual canvas we want to spawn them on the outsides of our canvas that way we don't get a quick end game by unlucky chance so let's go ahead and start spawning things randomly on the left hand side of our screen well let's think of it what coordinate do we need for one of these enemies to be off the screen to the left well x should probably be zero and then we have to take into account the radius of our enemies which is about 30 right now so we have to subtract that to get it fully off the screen so x is going to be equal to zero minus our enemy's radius now radius is declared down here but since we want to use it with an x we need to make sure we take this line that has radius and put it above our x value so if we save this now all of our enemies should spawn on just the left hand side of the screen so that's looking good but what if we want the enemies to spawn on the right hand side as well well x should be either one of two values it should be negative radius or it should be our canvas width plus the radius of the enemy so we need a way to get one of two values randomly and we're going to do this using a ternary operator this might be new to you but basically it's where we use this little question mark within our code cool stuff so basically this is how this is going to happen i'm going to remove 0 minus radius to start we need some sort of condition to set this x value to 1 of 2. so the condition we're going to use is math dot random is less than 0.5 so if the value for math.random which math.random produces any value zero to one if it produces any value less than 0.5 then we are going to assign this first value to x this first value is going to be 0 minus our radius so if it's less than 0.5 we're signing this first value but if it's greater than 0.5 so 50 50 chance we'll add a colon and call this second value what is the second value we want to use well canvas width plus our radius so that it's on the right hand of the screen to start so we add in canvas width plus our radius save and refresh now our enemies are spawned on random sides of the screen so this is looking good starting to become more game like but we need to do the top and bottom as well so same deal with the ternary operator we're going to go ahead and select this code just go ahead and copy it assign it to y so each time math.random is less than 0.5 what do we want to do well our y coordinate should be zero minus the radius zero is up here minus radius is going to put it off the screen this one is good to go but what should it be if math.random returns a value point five to one well it should be off the screen on the bottom so instead of referencing canvas width we'll go ahead and reference canvas height plus our radius now on save and refresh watch what happens you'll see everything is just spawned from the corners of the screen basically we create a condition where x can only be zero or a canvas width plus radius and same thing for y it can only be zero or canvas height so we need to do this a little differently basically x if it is spawned on the left-hand side of the screen y should be anywhere from zero to the full canvas height if it's spawned on the right-hand side of the screen y should be anywhere from zero to canvas height but if it is spawned on the top of the screen well of course y should be zero but x should be anywhere from zero to canvas width so here's what we're going to do we're going to create an if statement that calls math.random it says only activate this next line of code if it is less than 0.5 so the code we're going to call is going to be this to start now since x and y are inside of an if statement and they're declared as constants we can't actually use these outside of the if statement so what we need to do is declare x as a let instead same thing for y and this way we can reference x and y outside of the if and we can also change it later on like we're doing right here so i'm going to comment out y copy it and paste it uncomment the first one and then i'm going to set this equal to zero to start so let's see what's happening here so 50 50 chance we're going to call if statement that says spawner enemy either on the left or right hand side of the screen when this happens well our y coordinate should be equal to any value from zero to our canvas's height so we'll just go ahead and multiply math.random by canvas height and now on refresh you're going to see that things are spawning in a more random manner from the left and right hand side to the screen but we need to do the same thing if the other 50 is called so 50 50 chance first 50 we're going to call these lines of code but the second 50 50 chance we're going to call these lines of code so in this case y should either be 0 or canvas height plus our radius and we commented out that code right here we know this is correct we want to keep that but when this happens x should be anywhere from zero to our canvas's width so we'll take math.random multiply it by canvas width we can delete this comment out code save refresh and now our enemies are going to spawn from all different sides of the screen now i want my enemies to be of different sizes kind of boring when they're all the same size let's go ahead and randomize this a bit so right now we're just declaring radius should be 30 but let's say i want this from any value 0 to 30 instead well an easy way to do this is just multiply this by math.random and now radius is going to be set to any value 0 to 30. but the issue with this is is even though this is looking good eventually we're going to get a random value that's less than something like four you can see this really small guy right there and that is going to be very very hard to hit not too fun of a game when things are that hard so instead of saying any value from 0 to 30 it's more safe to do any value something like 4 to 30 instead now here's how you do it with math.random if you take your max which is going to be this number right here wrap it in parentheses and subtract from it your minimum which i want my minimum be a minimum of four and then add on your minimum to this whole thing right here this will make sure that you get any value from four to thirty so if i go ahead and refresh with that we should no longer get any small particles at least too small to where they're going to be very very hard to hit like almost minuscule and this looks like we are good to go these all look about four no smaller than that i haven't seen anything just yet so if you want to set a range this is going to be your maximum and these two are going to be your minimum so that is going to take care of creating enemies on our checklist the very next thing we need to do is to detect collision whenever an enemy hits one of our projectiles whenever this happens we're going to remove both the projectile and the enemy off the screen to start so that way we can start fending things off as we play our game so to start removing enemies whenever a projectile hits we want to go inside of our animate loop because for each frame we need to check whether or not one of our projectiles is touching an enemy so we're looping through all of our enemies already but for each enemy on the screen we'll want to loop through each projectile on the screen this way for each enemy we can test the distance between every single projectile that we have so we're going to have a loop within a loop so we have our enemies loop and for each enemy within this loop we want to test the distance between each of our projectiles so we're going to select our projectiles array which contains all of our projectile objects and say for each projectile within this array select that one individual projectile object and here's where we're going to start testing the distance between our projectile and our enemies so what we can do is use math dot hypot and hypot just stands for hypotenuse and that's just fancy speak for the distance between two points so the arguments for mass dot hypot are going to be the x and y distance so what is the x distance between our projectile and enemy well we can get this by taking our projectile's x and subtracting from it our enemies x coordinate and then we'll do the same thing for our y so we select our projectiles y subtract from it our enemies y and we're going to assign this to a constant called dist short for distance now if you're a little confused let's go ahead and look in the inner workings of how this actually works so what i'm going to do is make sure the spawn enemies only calls itself once and to do that i can go ahead and comment out set interval but i still want the code inside of it so i'm just going to comment out the edges save and refresh we only have one enemy and i'm just doing that so we can view our logs easier within our animate loop because otherwise everything is just going to get all jumbled up if i go ahead and console log out our distance and refresh and then click so our projectile is on the screen you'll see the distance in between the two points i'll go ahead and refresh again once i shoot it gets smaller smaller smaller until it basically touches gets near zero and then they start passing so the distance is larger and larger so when we use math.hypot set it to our disk we're just getting the distance between two points now we can't actually hit zero we can actually tell that the distance between these two points is zero because when we're calculating the distance right now we're not taking into account the enemies and projectiles radii right now we're just taking the distance between the center of the two but when they touch it's the radii that touch not the center so what we can say is if the distance between our projectile and the actual enemy is less than one then we're going to remove it from the screen but we need to remember that both our projectile and our enemy have radii associated with them so it's not just the distance that we need to check is less than one we also need to subtract our enemy's radius that we're looping through and also subtract our projectiles radius that we're looping through so if this is less than one then we want to remove it from the screen but we're just going to go ahead and console log out remove from screen to start save and refresh so now when i shoot no console log but once it touches for the small amount of time it touched we get 20 removed from screens let's watch it again touches and we call the code so now we know that they have actually collided this is what we call collision detection so now that we know they've collided we can go ahead and remove it from the screen and remove them from the screen we want to pop the enemy out from our enemies array and pop out the projectile from our projectiles array so to remove something from an array what we want to do is select the array which is going to be enemies and use splice so where do we want to remove the enemy from what index well to get the index of the enemy we're looping through the enemy we touched we can go ahead and use for each's automatic indexing by adding on a second argument and we're just going to name this index so this is the index that we're looping through and we know if we get this far within our code when things touch objects touch that we can go ahead and remove this enemy from our enemies array so we'll splice out the enemy at this index and we only want to remove one enemy from this specific point so we'll add in a one we want to do the same thing for the projectile we're looping through so we'll take our projectiles array splice out not the index of our enemy we need to create a new index so projectile index which we can use because we're looking through it using four each we'll take this and say we want to remove a projectile at this specific index so now on save and refresh we go ahead and shoot and it should be removed and there you go both are removed from the game altogether they're no longer animating and we have good performant code so let's go ahead and create all of our enemies again on comment out set intervals so that they are called over time automatically save and refresh now when i shoot we can remove all the enemies on the screen but you're going to notice something happening and that is the enemies start flashing whenever i actually hit them now why is this happening well i'm removing an enemy from the array and when i go to the next frame in the animation it's still trying to draw even though it's been removed so it creates that flash effect to get rid of this flash where we're removing our enemy and projectile we can call set timeout which takes a callback function for the first argument and then a time for the second argument this is very similar to set interval by the way i'm going to set time equal to zero but i'm going to place our code right here inside of set timeout and when i do this save and refresh start shooting enemies we don't have that flash anymore so basically this waits till the very next frame to start removing the actual enemy from the array and that way we don't get that flash effect that we saw this is just a cool trick to make sure that that flashing is gone so now looking at our list we just detected collision when our enemies and projectiles hit now we need to do the same thing for when an enemy hits our player when an enemy hits our player we are just going to end the game altogether pause the whole thing and then eventually we'll add an end game screen with our score so we're already looping through our enemies and checking for the distance between each projectile and the enemy now all we have to do is check for the distance between each enemy and our actual player so we don't need to add an extra loop or anything because we only have one player there's not a player's array so we don't need to create an extra loop like we did for projectiles so to check for the distance between each enemy and our actual player in the center we're going to go ahead and take this disc code right here which gets the distance between two points and right beneath enemy.update i can paste this and i can use dist in two spots because i'm declaring a constant and this constant is inside of another callback function meaning that they have different scope so i can use this in two spots but the scope i want to use this right here is not going to be the distance between a projectile an enemy but rather our player and the enemy so if i go ahead and replace projectile that y and projectile that x with player x and player y now i'm going to get the distance between each enemy and the actual player on the screen so same deal i can use this if statement paste it beneath dist and say if the distance between an enemy and our player minus the enemy's radius minus the player radius not the projectile radius if the distance is less than one then we want to end the game end game so now if i can't log this out let's go ahead and type end game here for whenever an enemy hits us and i refresh let's go ahead and watch what happens when an enemy actually touches us so as soon as it touches and the game is called so how do we actually end the game well to start we just want to pause everything on the screen and everything running on the screen is currently being called by request animation frame so we can go ahead and actually cancel our animation frame by doing this we're going to create a let called animation id and this is just going to be equal to undefined start but whenever we call request animation frame we're going to set animation id equal to the result of this so this by default returns a value of what frame you're currently on and if you call cancel animation frame and put in the frame that you're on currently it's just going to stop the game altogether so we have our animation id being set but now when we end the game we don't want to console log anything we want to go ahead and call cancel animation frame with the argument of our animation id where should we cancel our game on this specific frame so if we save and refresh now when an enemy touches us everything should stop we'll go ahead and see if it happens and it does so now our game is essentially over so we just detected collision between an enemy and our player we go to our to do's we can go ahead and check this one off as well so the next step isn't the most exciting step but it's something that needs to happen to make sure our game is performant over time so you'll see when we play our game refresh start shooting projectiles well we can shoot as many projectiles as we want but eventually they're going to start going off the screen and even though they go off the screen we're still going to be animating them we need to make sure that once they go off the screen while they're no longer in our game they are removed from our array and we don't actually perform any computation on them at all so basically we're performing collision detection but more so when our projectile collides with the very edges of our screen so to make sure we're removing our projectiles within our projectiles loop right here for each projectile we're going to add an if statement that says if the projectile's x-coordinate minus the projectile radius that means the projectile is off the screen completely to the left is less than zero then what do we want to do we want to remove it from the screen remove it from the game altogether so to remove something remember we call the splice functions down here with set timeout so we can copy this code paste it within this if statement right here and we're not looking through any enemies so make sure you delete this line but we are looking through our projectile so we want to splice out a projectile at a specific index what index do we want well we need to make sure we specify we want to use an index within four each so whatever projectile is off the left-hand side of the screen we're going to grab that index and splice it out of our projectiles array at that specific location so if we save and then i'm not going to refresh this yet because to test this i actually want to see how many projectiles are inside of our array as we play the game so whenever i click i'm going to console log out projectiles save and refresh start clicking you'll see our projectiles begin to fill up we're about seven eight and as they reach the left-hand side of the screen well it's kind of hard to tell there but we got up to seven and eight and then the ones that went off the left-hand side of the screen we removed them from our array so we got down to six and five particles let's go ahead and shoot everything to the left i'll fend off things as they come just to make sure we keep going so we have about 10 particles and now you'll see we're back at zero because we removed all the particles off the left-hand side of the screen no more computations we have a good fast game going on so we'll go ahead and remove this console.log but where we are removing our projectiles and we'll comment this out just so we know what we're doing so remove from edges of screen where this is happening we want to make sure that we're removing projectiles also from the right hand side of the screen so we can say remove them if they're off the left-hand side of the screen or remove them if they're off the right-hand side of the screen so we'll select projectile.x minus our radius is greater than our canvas width then we're going to remove things off the right-hand side of the screen and looking at this our first statement this should actually be projectile x plus radius if that is less than zero then we want to remove it but that's going to remove things off the right hand side of the screen we want to do the same thing for the top and bottom so we'll add another or operator right here and say if our projectiles y plus our radius is less than zero then we're going to remove it and then same thing for if our projectile is y minus its radius is greater than our canvas height so if our projectile plus the size of its radius keeps going downwards and it's greater than canvas height while we're going to remove it off the screen so now we should have full removal for all of our projectiles so i click and we actually have a bug let's go ahead and fix this radius is not defined right now i'm trying to reference a radius value without referencing my projectiles radius so i'll just go ahead and prepend this on to each radius like so now on refresh i can click and we can't really tell if this is working unless we console log things out so back where we have our add event listener i'm going to go ahead and console log out our projectiles array go ahead and click you'll see it getting bigger and bigger you'll see eventually the array goes down to zero no matter which direction i shoot in so we know that is working perfect so next up we're going to start colorizing this so it starts looking like a good fun game to play so first thing i like to do is coloring in my background instead of leaving it just white like this to color in our background instead of calling clear erect clearwreck by default goes ahead and clears the whole thing making the whole background white we are going to call fill rect so we can basically clear our canvas by using a specific color so if i call this and save and refresh well our background is different colors because we're setting the fill style of different things at different times but before we fill our rect we can add in c dot fill style for each frame we're looping through and say that we want it to be equal to any other value so if we specify black right here well now we have a pure black background and none of our colors overtake that background color but i want to specify that this background should be rgba instead and i'm going to use 0 0 0 for the rgb coordinates which means it's going to be black but for our last coordinate our last value at least alpha is going to be equal to 0.1 and this changes the opacity of the fill style behind the scenes basically if i do things like this save and refresh you're going to see that our particles begin to have fade effects associated with them basically as our particles move we're only drawing on the background at a certain transparency at a time which means we get this subtle fade effect as things begin moving across the screen kind of looks like light trails so just a quick way to make your game really stand out and start looking a lot more professional now if we look at the example here our player is white our projectiles are white and all of our enemies are different colors so i'm going to go ahead and start easy how do i make our player white instead of blue and i'm also going to shrink it a little bit to give us a little more breathing room for when we play the game well i would go ahead and find where we are actually creating our player which i can do by pressing command f and searching for new player this is where we create our player instead of having a blue background for our player i want this to be white instead so i save and refresh now we have a white player and now instead of 30 for our radius i want this to be a little smaller so i'll go ahead and say our radius should be 10 looks a lot better and now i want our projectiles to be white as well to match the player so same deal if i go ahead and type command f type in new projectile instead of player here is where we're creating each individual projectile which is where we click instead of creating each projectile as red i'll make these white save refresh now we have white projectiles and really quickly these are just really slow projectiles not too fun for me i don't like it i like fast things so instead of using really slow projectiles what we can do is multiply our velocity by some sort of factor so if i multiply our velocity by let's say four it's going to be four times as fast you want to make sure you do this for both x and y to make sure that this still travels in the direction you click so once i click you'll see that those are a lot more responsive and i might go even a little quicker maybe six refresh and maybe a little slower actually because now i'm starting to see the outlines of our individual circles as they travel across the screen i'll go ahead and stay at five so i save and refresh and that looks really good to me now how do we randomize the colors of our enemies as they start to spawn on the screen well if we look for where we are creating a new enemy command f new enemy here is where we're specifying your enemy's color right now they are all green we want to randomize this so what i like doing to randomize colors is instead of referencing just a static value like green i like using hsl which stands for hue saturation lightness here is basically what color are we using what hue is it is a red green orange blue whatever this is a value anywhere from zero to 360. so i'm going to start with zero saturation is how deep is this color i'm going to start with a mid value of 50 percent that is and then our lightness is also a percentage of how bright or dull this color is so if i go ahead and do zero fifty percent fifty percent and make sure that this is exactly the string you see right here and then refresh you're going to see our enemies are this pinkish salmon red color now this is a good start we change the color but they're not random to randomize the color of each individual enemy coming at us we want to make sure this value for hue is any value 0 to 360 because that is the range in which we can put in a value for hsl specifically hue so instead of referencing zero here i want to use math.random and multiply by 360. the full range of what hue can take now if i save things as is and then refresh you're going to see all of our enemies are white and that is because we're trying to call this computation right here but we're putting it inside of a string so when we're actually assigning a color to our enemy it doesn't understand what's going on here because it's actually using the word math.random times 360. we need to make sure that this right here is actually computed so to compute it instead of using a string we can use backticks and then right before math we'll use a dollar sign opening curly bracket and then right after 360 a closing curly bracket and you'll see this lights up which means it's going to be computed before it's actually put in the string this is what we call a template literal and it's just a really handy way to input computations within your strings so we save this and refresh now all of our enemies are different colors so we are pretty far along and i think that this is going to be it for colorizing the game okay so the next step is we want to shrink our enemies on hit so if we look at our example you're going to notice when i start hitting these large ones they start to shrink very smoothly whenever i hit them on the screen we want to do the same effect for when we hit particles over here right now we're just removing from the screen but these large guys should really shrink to start adding in more interest and more effect into our game and later we can actually make these big ones as they shrink have a different point value than actually removing them from the screen so to get these big guys to start shrinking we're going to want to find where our projectile actually hits one of the enemies so i believe we calmed this out so i'm going to do command f slash definer comments and i'm just going to keep pressing enter until i find the right one this is where our objects touch and to be more specific here i will say when projectiles touch enemy so this is where we remove both from the screen so the deal is this is where we actually remove our enemy but inside of this conditional what we're going to say is we're going to add an if statement that says if the enemy's radius is greater than a certain size then we want to subtract a value from that radius instead of removing it all together but once it's beneath a certain size that is when we're going to remove it from our screen and take it out of the game so the conditional checks for an enemy's radius we'll say if our enemy radius is greater than 10 then what are we going to do we're going to take our current enemies radius and then subtract from it let's just say 10 to start so we're going to take 10 pixels from it whenever we hit it but if it is less than 10 pixels we'll use this else statement then we want to remove it from the screen altogether so save refresh hit a large enemy and you'll see that the enemy just disappears completely you kind of see a shrinking but it's not really the shrink that we want well even when we hit an enemy and the enemy radius is greater than 10 we want to make sure that we remove our projectile because if we are not removing our projectile during this then we're just going to keep calling enemy radius minus 10 until we call this else statement so we want to make sure that we basically end this code right here by removing our projectile so what we can do is we can take set timeout paste it right beneath where we're subtracting our radius and we're not going to splice out our enemy here but we are going to splice out our projectile so save and refresh now we hit a larger enemy and you'll see it shrinks it gets smaller and this is going to work but you'll see we have a really small enemy right here it just got so small that it might have been a little too hard to hit and actually remove from the game so something we can do is in this conditional we can say if the enemy radius minus 10 is greater than 10 then that is when we want to shrink it otherwise then we want to remove it from the screen so basically if we subtract 10 from our radius on hit and then it is less than 10 meaning it's going to be really small something like 4 3 2 or 1 pixels wide for its radius then we're just going to remove it off the screen altogether so this is a little extra check that we can put in there to make sure that things don't get too small or too hard to hit so now if i hit a big guy it gets smaller but it's never going to get to the point where it's too small to hit and you can play around with that value a little bit depending on how small you want that limit to really be but this looks good for me right now so i'm going to keep it now one thing i want to do is you might have noticed on our game over here when we hit a large one that it progressively shrinks it doesn't actually just boop shrink it kind of progressively shrinks into its form so when i look over here i hit a large one we need something larger like this guy you'll see it doesn't have that smooth motion that smooth animation so to get the smooth animation we're actually going to use an animation library and this animation library is called gsap so juice amp is green sock stands for green sock animation platform what that means i have no idea but it's kind of the go-to animation platform for interpolating between values and by interpolating i just mean transitioning from one value to another and adding an easing basically easing curves to make it look like a good transition so in order to make use of gsap what we're going to do is type in gsap cloudflare and we are going to click on the very first result and this is going to give us an external link that we can reference within our project and not have to download anything extra so if we select the very first result of 3.5.1 we want to copy the script tag right here we're going to head into index.html and right above our current script tag we want to paste that on in there so hit save and now that this is above index.js we can make use of gsap's library within index.js so to prove that this works at the very top what we can do is console.log out gsap and then refresh our page and you'll see we have access to all these gsap functions so by importing gsap over here now we have access to the gsap library within this gsap variable so to make your life easy this is how we're going to use gsap we're going to go back to where our projectile touched our enemy where we're removing it from the screen and instead of just immediately subtracting 10 from our radius we're actually going to tween between this radius value and by tween i mean interpolate and by interpolate i just mean transition two it's going to add that smooth animation effect so instead of doing this what we're going to do is reference our gsap object and say we want to transition our enemy what property of our enemy do we want to transition we'll specify inside of this empty object our radius is what we want to transition and we want to transition it to our current enemy radius -10 so if we save this and now refresh we want to hit a larger enemy and i might go ahead and make these even a little larger you're going to see we get that really nice shrinking effect on the large enemies and it really is that simple using gsap all you have to do is specify the value you want to tween to and then it'll immediately take effect so i want to make sure that when we hit these that they actually shrink a little more because right now only the big ones are shrinking and even when they're like medium size we're just removing from the screen so what we can do is we could say we only want to remove them if they're less than 5 pixels wide so now if we save and refresh they're going to get a little smaller and then finally we can remove them from the screen they're still hittable but they shrink and they shrink to a size where we can completely remove them so that's a little more fun we add that nice animation effect and that's really all it takes with gsap so looking at our to do's we now shrunk the enemies on hit now we need to create the particle explosion that we see right here and this really adds a nice effect a burst effect of the enemies exploding into million pieces so to add this effect we basically need to create all these particles independent from one another whenever our projectile hits an enemy so this code is going to go right inside of this if statement but first we need to make the particles we need to make the blueprint which have those individual properties so that they all go in different directions so to create the blueprint we need to create a class we can just go ahead and copy your enemy class and right beneath it we will create a particle class so our particle class has an x y radius color and a velocity so whenever we hit remember which we can get to with slash slash whenever a projectile touches an enemy we want to create a number of particles and then render them on the screen so to create a number of particles whenever a projectile touches an enemy we're going to use a for loop and if we specify here our array length if we specify a length of something like eight well then we're going to create eight particles each time one of our projectiles hits an enemy so here we can say a projectile's array should push in a new particle and our particle arguments were x so our x is going to be exactly where these two touched we can just specify that this is going to be our projectile's x so if our projectile touches this guy right here it's just going to spawn the explosion right here for each particle same thing for our projectile y our radius i believe is next we can just scroll up see radius color velocity command z to get back to where we were so now we have a radius let's just go ahead and say our radius should be three and then our color is going to be the color of the enemy we actually hit so we can select our enemy color put it right here and then we need a velocity so our velocity is an object that has an x property and a y property for x we're going to specify that this is completely random and to completely randomize our x velocity it needs to be either negative or positive so we can't just use math.random because math.random is always going to be positive any number zero to one to make this a completely random value that can also be negative all we have to do is subtract 0.5 because if we get around a value of 0 subtract 0.5 from it now we have negative 0.5 but if we get the max value of 1 subtract 0.5 from it now we have 0.5 so this is basically math.random but the values that we can actually get are negative 0.5 to 0.5 so that's what we're going to do for x and we're going to do the same thing for y just math dot random mine is 0.5 to get a completely random value negative or positive and now we're pushing all these particles actually into projectiles around getting a little confused here this needs to go inside of a particles array not a projectiles array and this particles array we actually haven't created and we haven't rendered anything on the screen within our animate loop so exactly where we have our arrays up here i'm going to copy and paste and then specify that we want to create a particles array and now that we have this array and we're pushing particles inside of it right here we need to make sure that we're rendering them on the screen so remember to render anything on the screen you need to loop through it so what we're going to do is specify our particles for each particle within this particle array we want to call that particles update function which in return is just going to call this right here so save refresh let's watch what happens we hit an enemy and now we have eight particles going in different directions and they just keep on going they don't actually fade out or disappear over time so to get these to fade out over time we're actually going to add an additional property for our particles and this property is going to be our particle's alpha value now we don't need to pass in an argument for this because to start our particles alpha value is always going to be equal to 1 and this means it's always going to be completely opaque it's not going to be transparent as all but as time goes on for this particle we're going to subtract an alpha value from it which is going to make it fade out over time so to affect the actual look of one of our particles here we have to edit our draw function and when using canvas to edit opacity values such as alpha well it's a little tricky so what we need to call is right before we begin our path we call c dot save which kind of puts us inside of this state where we can call a global canvas function but it's only going to affect the code right here and then if we call it the very end c dot restore well that kind of finishes off the statement of only call this global code right between save and restore so the code we want to call in between save and restore is going to be c dot global alpha and if we set this equal to something like 0.5 to start just a static value we should see the particles a little more faded out as we create them by hitting an enemy we don't really see much just yet we'll go ahead and change this to 0.1 to really make sure that they're faded make sure that this is actually working in the first place and you'll see that it definitely is those are more faded than they were before but we want to make sure that this fade effect transitions over time so what we can do is for each frame within our animation loop we can subtract a certain value from this dot alpha so inside of update we're going to take this dot alpha and subtract from itself 0.01 and that should be pretty good to get us to zero over time but we need to make sure if we're subtracting alpha here and declaring it up here that we're actually using it within our draw code so instead of 0.1 we're going to use this.alpha so on creation it's going to be equal to 1 and then over time it's slowly going to fade out so if we save and refresh hit an enemy you'll see they begin fading out but then they reappear so the reason they reappear is because eventually alpha is going to be equal to something less than zero and if you plug in a value that's less than zero into global alpha well they just reappear not what we want instead as the alpha value reaches zero we want to remove these particles from the screen altogether so to remove particles from the screen we'll go to our animate loop where we are looping through our particles and we will add a if statement inside of here that says if one of the particles alpha value is less than or equal to zero then we want to remove this particle from the screen so remember to remove a particle from the screen we select the original array particles use splice specify what index we want which we can get with for each's second argument so index we're going to put it here in our splice and then specify we only want to remove one object from the specific index so we put in a one and now we will take out a particle as its alpha value goes to zero we also want to add an else statement that calls particle update so otherwise we're just going to update the particle and keep calling code and now when we hit an enemy eventually our particles fade out and they are removed completely and they don't show again now these particles look a little different than what we have over here the particles over here look a lot more realistic and the reason is the particles are different radii and they have different velocities associated with them to really make them unique random and something you would actually see within something like a firework so where we are creating all of our particles which is going to be right here and i'll comment this out that says create explosions just make sure that we have clean code we want to make sure that we're randomizing more of these values so instead of having a set radius of three i want to make sure that this is randomized so we get small particles and then large particles for this explosion create a more realistic effect so instead of three i'll add in math.random any value zero to one and multiply it by two so any value zero to two instead so we save refresh and hit an enemy already looking a lot better now what we can do is based on the enemy's radii we can go ahead and set how many particles we actually want to spawn so instead of doing a set value of 8 we can actually grab our enemy's radius multiply it by 2 just so we get an even bigger explosion and now our particle amount is going to be dependent on how big the particle is so the bigger guys are going to have more particles associated with them i want to add a little more power on these explosions because they're kind of weak right now and not too random so to add power onto this where we are generating our velocities for x and y what i want to do is wrap these in parentheses so we make sure that we always get a negative or a positive value and then i want to multiply this value by some sort of power what is that power well i want this to be eight times the speed and maybe some of them a little less so if i want a random value here all i would do is multiply 8 by math.random and now we're going to get a good powerful explosion at least for the x velocity so i want to do the same thing for our y to make sure that we have power in the y direction as well and on save and refresh we should get something that looks a lot better a lot more powerful which we do so that makes a big effect and it might be even a little too powerful so if it's too powerful for you you can just go ahead and decrease this eight value right here to something like six and just do whatever your taste likes so that's six that looks pretty good to me i think i'm going to keep that but i want these to slow down over time so for each particle we need to make sure we're adding friction onto its velocities so we'll go ahead and scroll up to our particle class and where we are updating the particle which is going to be right here we also want to make sure that for each frame we are updating the particles x and y velocity so basically shrinking those velocities over time is going to create the effect of deceleration make it look like they're slowing down so right above our class i'm going to create a const called friction and set it equal to 0.99 this is going to make sure that things don't slow down too quickly basically the closer this value is the one the slower the things actually slow down so now that we have friction we'll go into update and right before we update our x and y values we're also going to update our x velocity and say our x velocity should be equal to itself times friction we want to do the same exact thing for our y velocity so we're basically just shrinking the x and y velocities over time by multiplying velocity.x by itself times friction so on save and refresh we hit an enemy and you'll see the particles now have a pretty cool slow effect added to them and if this isn't noticeable enough for you what you can do is go ahead and decrease this friction value it doesn't need to be by a lot but you should start seeing the effect the more you decrease this see things get slow really quickly with that i kind of liked it a lot better with 0.98 maybe 0.99 go back to that yeah i think i'm going to keep it at 0.99 just so these go really far that's kind of what i like so hit an enemy and that's looking like a really good effect so looking at our to-do list we now created a particle explosion on hit what do we have left well we don't really have a scoreboard added to this so that is going to be the very next thing you'll see on our reference piece we have a score on the top left hand corner we need to create this and make sure that when we hit enemies we're adding a score onto this so in order to get a score up here i would never really recommend drawing text on top of a canvas because typically it gets really pixelated it's not very anti-aliased and it just doesn't look good so instead i recommend creating this text within html and then updating the html with javascript so watch how i do this if i want to go ahead and create text that's in the top left hand corner all i'm going to do is create a div and inside of this i'm going to create a span for just our score label and then i want to create another span next to it to make sure that score label is separated from our actual score that we'll be adding on to and i'm going to set this equal to 0 to start so if i save and refresh don't see anything just yet but if you don't see anything you can always head inside of your elements tab right here make sure that we have enough space to see everything and we're just going to look for this div find out where it is so it looks like it's actually beneath our canvas and there it is so to make sure it's above our canvas all we have to do is simply select this div and then paste it above our canvas element so now on save and refresh we scroll up and there's our score now we want this score to be overlaid on top of our actual canvas game right now it's inside of our layout which means it's pushing the canvas down so to get something overlaid on top of something you want to use a css class of position fixed and to use this class what we could do is just select the div and then style it up here within our style tags but i really don't like writing css this way there's a lot easier way to do this using a library called tailwind css so this is a utility framework for creating css designs very quickly you can kind of see how it works over here basically each class gets one style associated with it and it makes it so you don't have to think of any class names all the class names are within this framework you just add them in and it affects your styling as needed so i really like using tail and css for my styling purposes so what i want you to do is go to tailwindcss.com and we're going to search the docs for cdn this is basically just a library link that we're going to paste into our project so we can make use of the library so once you're here there's going to be a link when you scroll down just a little bit we're going to go ahead and copy this and right above our style tag we'll just paste this make sure that you actually copied the whole thing unlike me and now when we save we're going to be able to make use of tailwind css classes so if you too want to see what classes you can use just scroll on the left-hand sidebar click something that kind of refers to what style you want such as flex and then you're going to see what classes you can use to start altering the things on your screen so i'm going to guide you through this in index.html let's go ahead and resize everything we need to make sure that this div has a position fixed so tail and css has a class called fixed that goes ahead and just makes this div fixed we save and refresh well now it's fixed it's overlaid on top of our canvas element issue is it's all black so in order to make the score white and actually contrast from the background we can go ahead and add another class called text white now on refresh our text is white now for styling purposes typically you want the score not to be too big on the screen when you're actually playing the game so we're going to make this text a little smaller by adding a class of text sm text small just really easy stuff from tailwind that looks a lot better and now we need a little bit of breathing room from the left and top hand side of our game so to give it breathing room we use margin left ml dash two that's going to give us ample amount of spacing on the left let's add a little bit of spacing to the top empty dash one and now our score label is in place but one more thing i just want to add a little bit of spacing here between the colon and zero so all i have to do is right after a colon press space refresh there we go our score label is in perfect place now we just need to make sure it's updated whenever we hit an enemy but one more thing before we get there you'll notice if i begin clicking around and shooting that the score label actually lights up and becomes selected we don't really want that at all so this is happening because it has a user select class associated with it so for instance i actually forget what this class is within tail and css all i have to do is go to the docs and type in user select select the first option and now i know exactly what class to use so i'm going to do select none because i want to make sure the user cannot select the score just add it on to our div and then refresh and now when i click around it's not selected we don't get that weird distracting effect so let's go ahead and update our score now to update our score we're going to want to make sure that we can select this right here everything in between these two spans so what i'm going to do is go ahead and give this an id of score l stands for score element copy this make sure you save the html file and then index.js whenever i select an element from my html i like going to the very top of my page similar to like what i did with canvas right here i'm going to go ahead and beneath our canvas code i'm going to create a const called score l select our document because remember our document is everything within this html tag well what tag do i want to select this span right here if i refresh and look at that span again has an id of score l so i'll go ahead and say this is equal to our document query selector and we want to select this by its id so we'll add in pound sign and then we want to select it by its score l id right here so we save console log this out and refresh just to make sure it's working now we have our element zero so now we can begin editing this as we begin to hit enemies on our screen so same deal to find out where we need to go command f slash enter enter when projectiles touch enemy this is where we want to basically increase our score so whenever we hit an enemy how much should we increase our score by probably something like 100 but in order to increase a score we need some sort of let some sort of variable we can alter and actually add values too so to create this let outside of our animate loop right beneath animation id i'm going to add another let called score this is going to be equal to 0 to start and then back where we actually hit our enemy and increase our score this score variable is going to be equal to itself plus a hundred so if we save this and refresh start hitting enemies you might expect the score to increase but it's not what's really happening is the score variable is increasing behind the scene so if i console log this out refresh when i hit an enemy you're going to see the score right here increase to 100 if i hit another enemy twice you're going to see it keeps increasing we need to make sure that this increasing score is actually set to that element we just pulled in through html so as we create our score we want to set our score l's enter html so everything inside of our span tag which is just 0 right here we want to set this equal to our actual score value and we do this and refresh hit an enemy you'll see our score label starts to increase on the top left hand side now let's say we want to add a different value for when an enemy shrinks compared to when we remove it off the screen well this is going to be quite simple so let's go ahead and take this increase our score code cut it out make sure you copy that and then where we are actually shrinking our enemies we'll go ahead and edit our score differently so if we hit our enemy and it shrinks it's pretty big we start shrinking it we're going to increase our score by a hundred but if we remove it from our scene altogether right here move from scene all together then we want to go ahead and increase our score by 250 give the user a little bit of a bonus for completely removing the enemy away so save and refresh and we should see two different score values here so hit a big one 100 remove it from the scene 250. and this works exactly as expected if we end up losing the game well everything pauses but we pretty much just took care of increasing our score label and getting it on the screen so let's look at our checklist we added our score but now it really just comes down to adding a good ui for our game so let's go ahead and look at the reference we have this modal on top of everything that allows you to start the game and then you'll see once the game actually ends once the enemy hits me we're going to get an end game modal that shows our current score and then we can restart as needed so basically we're going to take care of these three all together let's go ahead and create this start game modal so we're going to learn a little bit of html and css to go along with this so within index.html to create this modal like we see right here let's go ahead and analyze it well this is going to be separate from our label up here and as a result we want to create a separate div this div is going to have a background of white you might think but really what we need is a container div to basically hold this white background div in place a little confusing but bear with me and we'll get there so this div is going to have a div inside of it with a class of background white so this is going to be this guy now inside of this white div what do we have well we have a large zero so whenever you want to use large text you can add an h1 class h1 is basically the largest text you can get so we're going to go ahead and use this and say our score is going to go right here so zero beneath it we have a points label so typically for labels uh if they're not associated with a form i just use a p tag a paragraph tag i'll put points in here and then beneath it we have a button now button element i believe it is inline by default which means it's its layout's going to be a little different from that of an h1 p tag or div so what i'm going to do is actually wrap a button inside of a div and this button has the text start game so if we save this and refresh over here now we have basically our white modal but in a lot worse looking form than what we want so same deal this is just being placed above our canvas it's currently in the layout so to take it out of the layout we take our main div our root div right here and add a class of fixed and this is going to take it out of the layout so now when we save it's out of the layout it's overlaid on top of everything but we want to make sure that this is completely centered so to completely center this let's go ahead and inspect what we have right here so right click inspect you can click this little guy right here and really get granular with what you want to select we have our fixed div so what needs to happen is this fixed div right here needs to expand the entire width and height of the browser and to do this with css what we're going to do is set the values of top left right and bottom all equal to zero and it's just going to make the whole thing take up the entire screen so to do this with tailwind we can add a class of inset 0 and it's automatically going to add those exact styles we need so we save refresh now we have this inset zero class and you'll see it adds top zero right zero bottom zero left and when i hover over the element you'll see it takes up the entire screen so next let's go ahead and get our modal actually centered to center this modal we want to add on a class of flex to this div to put it into flex mode which allows us to center things really easily so once this div has a class of flex we can use flex classes such as item center and this is going to center it vertically so save and refresh you'll see now it's centered from the top and the bottom but we also want to make sure it's centered in the middle so we'll add another class of justify center which when used with flex is going to center it in center and now we're starting to get the effect that we have over here but we're not there just yet we want to make sure that this is a specific width now to make sure background white this div right here is a specific width we can give it a class of max width i'm just going to say that there should be a medium size max width save and refresh nothing's going to happen but if we add on a width of full meaning it's going to extend the full width of its max width meaning it can extend past this value right here you're going to see now it has a specific width associated with it hopefully that makes sense so now that we have this max width we need to make sure that we have breathing room here for our values so this is pretty easy all we need to do is add a padding for all the edges of our screen which we can do with tailwind just add a p dash let's start off with six save and refresh looks good to me and now we want to make sure that this looks like we have over here so we're also going to be learning a little bit about design so for our zero we want to make sure that this is the number one thing that stands out this is going to be our main focus because this is what the user cares about to make this stand out we want to make sure that is the largest and boldest thing on our screen but not extremely large so our h1 is going to have a class of text dash four times extra large make it pretty big refresh that's looking good i also want to make sure that this is bold so i had to tell one class of font bold and yeah that's going to be the number one thing that stands out but you'll see points and start game both have the same font which means they both have the same amount of attention as we look on our ui since points is a label we want to make sure that it has the least amount of attention to everything else it's secondary to our score and is secondary to actually starting the game so to decrease the amount of tension we give our points label we'll add a class onto our points tag and what we can do is one we can make it smaller so add text sm that's a good way to start so definitely a little less attention we can also start graying it out start fading the black background give it less contrast so we'll add a text gray a 700 de-emphasize this quite a bit that's already looking a lot better and i think that's really all we need to do so now we know that points stands out from our score and also our start game button let's go ahead and get all this centered so within background white we'll add a text center class refresh now everything is centered and let's start creating our button right here so to create this button within our button element we'll add a class of background blue 500 this is just going to be a mid-tone blue from tailwind looking good we want to make this text white make sure that it has good amount of contrast enough to actually see something that looks good maybe not a lot of contrast but you know it still looks good we want to make sure that this extends the full width of our container so we'll go ahead and add a width full class and now it's extending the full width let's go ahead and give this some padding our py padding for top and bottom is going to be something pretty small so py3 i think that looks pretty good and we want to make sure that this is fully rounded to give it a playful effect typically square borders mean it's more serious that's at least the fact that it gives off we want to make sure this is playful so we're going to round it with rounded full save and refresh and now that's looking very similar to what we have over here now a few edits i would just get points closer to zero and if we inspect zero right here you'll see there's no margin or padding actually pushing points down what's happening here is zero actually has a certain line height associated with it that's pushing points down instead so to give this no line height at all we'll use the class of letting none within h1 so save and refresh and now we get rid of that extra spacing but now points is quite close to start game so within our points tag we'll add mb for for margin bottom four just an ample amount of margin bottom and i think that's pretty good i might actually just the emphasize start game a little bit so what i'll do is make this text sm smaller text and that looks pretty good to me pretty close to what we have over here maybe not perfect but good enough we're matching the same effect so we created the ui but you'll notice in the background that our game is actually starting before we click the start game button so in index.js remember whenever we load this file we're calling animate and we're calling spawn enemies which starts our game we don't want that to happen anymore so we're going to go ahead and cut this out make sure it's copied to your clipboard and then we want this to activate whenever we click on start game so to add an event listener to start game what we want to do is basically emulate what we have right here but instead of attaching this onto our window object which is a hidden remember we want to attach this onto our start game button so we need to go in our index.html and give our button an id start game l start game element and actually to be a little more specific i'm going to call the start game button btn and up at the very top where we are basically creating our score l into our javascript we want to do the same thing for our start game button so start game button is equal to our document we want to select an element with the id of start game button game button so now that we have access to this element we can add on an event listener so we're going to scroll down to the very bottom of our page where we're already adding on an event listener window but instead of adding this onto window we'll select start game button and say add an event listener onto this it's going to be a click event so whenever we click this code should fire and to test this we'll console log out go refresh and then click start game you'll see go is actually firing so instead of firing go whenever we click start game we want to call animate and spawn enemies and on save refresh start game you'll see our game begins to go in the background but we need to remove this modal altogether we need to remove this interface right here when we click our button so same deal we need to select the element within our html the element within our html is this entire thing so we want to add an id of modal l to the entire element that contains everything right here when we do that we head into index.js scroll to the top of our file we can copy this line of code right here say that we want to create not a const and a start game button but what is our id called modal l we'll replace this with that and then we want to make sure we're selecting the element with the id of modal l so now we can select this element which is html within our javascript and whenever we click on start game button we're going to animate and spawn enemies start our game basically but we're also going to take our modal l select all the styles associated with it style and then change its display style equal to none so when we do this it's going to hide all together when we click on start game so refresh click the button it's gone and now we are starting our game now something a little weird there if we refresh you'll see that the whole background is white to start because we're only drawing on our background when the game actually starts so to make sure that our background is black here as well within our style tag in index.html we can set our body equal to a background of black so now on save and refresh everything looks as expected we start the game we hide the modal we start firing at things and eventually the game is going to end when one of them touches us and the game ends well now we need to show that same exact modal with our updated score but first let's go ahead and check our to-do list we actually started with our start game button so we'll go ahead and swap the order of this we'll check this off and now we need to add the game over ui so we're just going to use the same modal that we had basically if the model pops up you know the game is over and you're going to see your exact score so when an enemy hits us we don't want to change the style of our modal l to display none we want to change it back to its original display which if we look in index.html moto l has a display of flex because we're adding a flex class right here so that's what we need to set it equal to whenever we end our game so all we have to do is copy this line of code find out where we end our game and it's going to be right here canceling the animation frame and we're going to paste in that line and set our display equal to flex instead of none so now refresh start the game just wait for an enemy to hit you actually going to hit one just get some points on there and now our modal reappears if we click start game well we need to add restart functionality but first thing first when an enemy hits us we need to make sure that we update that score on the modal because you see if i hit an enemy and it hits us while our score isn't actually updated right here so that's the first thing we need to do we need to make sure that we select this element and then set it equal to our score whenever we end the game so this element is going to be this zero right here we want to add an id of big score l because it's going to be different from score l which is this guy right here we want to make sure that we're also editing the big zero instead so now that we gave it an id we'll head into index.js same deal just scroll to the top of your page select the element from html this is going to be called big score l make sure you're selecting the right one by selecting the big score l id and now when we end the game slash end game right where we reappear this thing with display of flex we're going to edit our big score l's enter html and set it equal to our actual score so now on save refresh start game we hit an enemy 100 points 100 points shows right here so we can go ahead and check off game over ui but now we need to actually restart our game and make sure the scores update correspondingly so to restart our game you might think that if we call this code again where we click on start game button that everything might be just peachy so let's hit it we start the game our display is equal to none we call animate and spawn enemies but nothing is happening all of our previous enemies still show on screen you'll see our particles our score is still there we need to make sure that we reset all of this whenever we click that button so wherever we are initializing values we need to make sure that we put those inside of an init function call that init function on start and then also call that init function i'll start game button click and it's going to reset everything when we do that so we're just going to scroll up to where we initialize all of our arrays that contain all of our projectiles enemies and particles and what we're going to do is we're going to create a function right beneath them called init and in here is where we're actually going to set things such as our player our projectiles enemies and particles so if we want to set these but make sure that they're still accessible and other functions we want to change const to let like so and then we just want to go ahead and copy all four lines right here paste it within a knit and then we can't use let twice so we're going to go ahead and get rid of let right here assign these equal to the same values we assign them to up here and now whenever we call a knit we're going to reset everything and we're going to make sure our canvas is cleared when we click restart well the first thing we need to do is actually call init so whenever we click and restart our game right here we want to reset everything with init so save refresh start the game hit an enemy get that score up and then let an enemy hit you hit start game again well everything clears and now the game is actually restarted because we added that init function so you might notice that our score is 1800 right now and we click start game it stays at 1800 we want to make sure that we reset this every time we reset our game so within init we want to find that init function which command f parenthesis allows us to find it really quickly we want to set our score equal to zero each time we call a knit then on save and refresh start the game let's watch what happens we start increasing our score it's going to be 250 we get hit start the game again while score did not update up here because although we're setting our score value right here remember we also need to update our score within the html because otherwise we're just setting this on the back end basically like hidden within javascript so to set the actual labels we need to select our score l set as inner html eagle score and then remember we need to do the same thing for our big score so we'll select our big score l refresh start the game rack up some points allow ourselves to get hit 350 and now when we click start game we are reset at zero we get a different point value get hit and now our score is showing as needed so now if we exit out of our console full screen this refresh the page and click start game we now have a fully functional game with a start screen a explosions particles firing everywhere and it's still easy but not too hard where this can actually be something that people enjoy playing you always want to find the right balance of making something easy and not too hard so eventually when an enemy hits me if i let it because i'm pretty too good for this game we're going to get our points we can restart as needed and now we have a fully functional canvas game completely from scratch coded by you [Music] everyone thank you so much for watching this video if you enjoyed this and would like to take your game development skills to the next level be sure to check out my full game development course link in the description of this video i basically put this tutorial on steroids showing you how to add over 20 plus features such as player movement power ups and different kinds of enemies there's really so much to learn that i guarantee you'll walk away satisfying knowing that you know all of the basics that you need to create any kind of game otherwise be sure to support the channel with a subscribe and a like and i'll see you in the next one peace [Music] you

Channel: Chris Courses

Views: 150,149

Rating: 4.9680901 out of 5

Keywords:

Id: eI9idPTT0c4

Length: 116min 50sec (7010 seconds)

Published: Mon Sep 21 2020