Intro to Game Development with JavaScript - Full Tutorial

hey guys welcome to a new series that I'm super excited to get started it's the introduction to game development in this series we're going to cover a lot of basic topics like collision detection the game loop handling different frames per second all kinds of cool issues that we're gonna get into it's all gonna be in this vanilla JavaScript no third-party libraries of framework all we're going to use is the html5 canvas and we're gonna be drawing it directly on the browser so if you know just a little bit of JavaScript you should be able to follow it just fine have fun and enjoy series so we're going to be using code sandbox that I owe for this project this would be a good way to use multiple JavaScript files in one project let's go ahead and get started here I will say create sandbox I'm just going to do a vanilla app here alright let's get rid of this div here let me update my preferences here let's go to editor let's make line height larger let's make the font size larger all right should be good so we have a empty app here we have our index.js file let me go ahead and delete everything in there and we have our project setup first thing we want to do is create our html5 canvas let's give it an ID I call it game screen the canvas is going to be what we draw our game in that's uh let's create some styling here I'm just gonna throw it up here real quick because all we need is we need to say game screen let's give it a border of one pick solid black and let's give the canvas itself a width and a height so let's do width of 800 pixels and a height of 600 pixels there you go now you can see we have our game screen here and this is what we will draw our game in so we now have our canvas here let's get rid of this guy let's learn how to draw something on the canvas let's go into our index.js file let's let's first grab the canvas so let's do let canvas equals document dot get element by ID and we're looking for the game screen and we need the context of the canvas so next we'll say let context equal canvas get context and we're going to be using two-dimensional context here the context gives us a rendering context for actually drawing to the canvas I'm gonna rename this to CTX just because we're gonna be using it a lot in this project and context is kind of a long word just keep typing over and over again now I'll simply just draw a square onto our canvas so they say CTX dot fill rect so we're going to fill a rectangle we're gonna start it at coordinates of 2020 so 20 on the x-axis 20 on the Y and how big do we want it we want to say the width will be 100 and the height will be 100 there we go simple square if we want to change the color we can tell the context let's fill the style equal to this value let's make it red so f00 now we have a red square now do note that once you set the fill style every time you make a new drawing it's gonna use that same fill style so if we do CTX dot fill rect let's do another one at 200 200 and make it a little bit smaller 50 by 50 that square is also going to be red if you want it to be blue we have to update the fill style to 0 0 F and now that one is going to be blue so the fill style sets the fill style and then you're gonna fill a rectangle with that style that you've recently specified next let's talk about clearing the screen if you notice here we're drawing these two squares on here if I update this let's let's move it to 220 you see that it turned into like a rectangle it kind of stretched live to 40 same thing now it's not actually stretching what's happening is every time you redraw onto the canvas what was previously on the canvas is still there so when you're working with a game where objects are moving around on the screen you want to make sure you clear what was previously there before so all we want to do is we're just gonna say T C T X thought clear right so it's gonna clear everything on the screen but you have to give it an area that you want it clear so we're gonna start at 0 0 and we're gonna do the whole screen which was 800 wide by 600 tall so now if something gets updated 350 360 this is actually going to move on on the screen you're not gonna have what was previously there so this is going to be a very important part of our game to make sure we clear it between every frame now we know how to draw to the screen let's first start working on our paddle the paddle will be at the bottom and you'll be able to move it left and right in order to catch the ball and bounce it back up towards the bricks so let's go ahead and get rid of these squares we're drawing here and let's create a class to handle all the aspects of a paddle let's go into source create a new file I'm just gonna call it paddle j/s and we'll have a class of paddle you might need a constructor and we're going to need a method for drawing the paddle now the draw method is gonna need the context so we'll pass that in and we're gonna need some attributes for this paddle so let's set some things up here when this paddle is created let's set a width I'm just gonna guess here what we can always update this later I'm gonna say 150 let's set the height equal to I don't know maybe 30 pixels and we need to position so they should probably know how big the game screen is so that way if we update the game screen later we can just set it in one place so in our index let's have a constant here of game with 800 and a constant of game height 600 and we will pass this in-game hiked there we go we'll pass this into our paddle class when we want to create it so our paddle is going to take a game width and a game height so the position of the paddle needs to be in the center of the screen so let's see here I'll say this top position equals and I like to make the position an object that way we can say position X is you know this position position Y is this position and then we can just update this by saying something like this stop position X and you can update it so let's go with this right now why we're gonna be at the very bottom of the screen but a little bit above it so we want to say game height - this dot height - how much do we want off the bottom let's just say 10 pixels I'll explain this in a little more detail once we finish it we want to start in the middle of screen so we'll say game width / 2 - this dot width / - now let's just draw this up and then I can better explain how this is working so we'll say CTX dot fill rect we want to say it's gonna be in this top position got X this top position dot Y and the size of it is this thought width and this dot height so now we have our draw function let's go back into index J s we're gonna say we're gonna have a paddle here it's going to be a new paddle and it takes in the game width and game height so game with game height and we just need to say paddle dot draw now it's giving us an error because it doesn't know what paddle is so on our paddle class we need to export this export default class paddle so now we're exporting this so in our index.js file we can import paddle from source paddle alright so now that this class knows what or this file knows what paddle is we're instantiating it and then we're gonna save draw the draw needs to have the context of our game there we go so we have our paddle drawn now let me go back and explain how we calculated this so we want this to be in the middle of the screen let's think about the the y position first the squares drawn from the top-left corner so if we want this to be at the bottom of screen but off the page by about 10 pixels what we need to do is when you take the game height so 800 which will be right down here at the bottom move it up the height of the square which is 30 and then subtract 10 to give it just that little bit of buffer so game height minus this height minus 10 puts it right here off the bottom of the page for the x position we want to Center it between 0 and 600 so in order to do that we take the game width and divide it by 2 that puts us at 300 which would be right in the center but since the square is built from the top-left corner we need to move it to the left by half of the width and that gives us our center position here working with classes like this allow us to know that this file is the paddle we can adjust the height maybe do it by 20 that looks a little better and we also want to set the knee style remember the the context was set by that last time we did the fill style so let's do CTX dot fill style equals I don't know let's just do let's just do a green how about a light blue all right that works now your next step is probably going to want to be moving the paddle or moving things on the screen but in order to do that we need to establish a game loop a game loop is something that runs every frame updates all the objects redraws them in the new position and and then moves on to the next frame so let's see what that would look like now you would think you could just do a you know a simple while loop and and iterate over everything redraw the paddle but in reality that's not going to work well because you have to think about all the computers running at different speeds a very powerful computer is going to run this while loop a lot faster than a much slower computer so what we're gonna do is we're going to create a new function I'll call it game loop and inside of here we're going to want to clear our canvas we're going to want to update our paddle which let's just put that in here real quick so update the update function let's just for for now let's just say this position dot X plus equal 5 now we want to change it 5 pixels per per second so the update function needs to bring in a delta time or you might see it as DT and a lot of other games what is called Delta time that means the change in time how much time has changed since the last time this has been updated so we're going to update this we're gonna say 5 divided by the Delta time so it means it's gonna go 5 pixels divided by how much time is in past so let's go get that Delta time inside our index.js function we need to know what the last time was so we're going to start at 0 now this loop needs to bring in a timestamp and we need to do pedaled drawl fasten the CTX and we need to calculate how much time has passed so we will do here but delp's of time Delta time equal timestamp - last time so how much time has passed and now we need to set the last time equal to the current timestamp so where does the timestamp come Pam come from we're going to request an animation frame from the browser and give it the game loop so every time this runs it'll say hey when the next frame is ready call this game loop again and pass it the timestamp and we'll calculate the Delta time pass it into our paddle to update function and continue so just to get this thing to start let's just call game loop once another reason this isn't working is because on our very first frame we're not passing a timestamp at all which is fine because we're starting at zero but the paddle is expecting to divide by the delta time error which is going to be zero so we can just put in here if not dealt the time returned so if no delta time is passed in we'll just return and now you can see that our paddle is moving across the screen all right so let's just remove this and we'll handle actually moving the paddle with inputs and another episode in the future so just as a quick recap we have our game loop that runs every frame it calculates how much time has passed it clears the screen it updates the paddle and then it redraws the paddle and then again it calls the game loop again with the next frames timestamp now let's create a simple input handler to listen to a couple key events for moving the arrows left and right these will be used to move the paddle left and right on the screen let's create a new file call it input J s and then here we'll have a new class of input handler and let's give it a constructor and let's export this so now in our index J s file we can simply import it there we go alright so what should this thing do let's just add an event listener for listening to a keydown event on the arrow keys document dot event listener we're gonna listen to queue down and we're going to give it a function that passes the event and let's just alert the event key code in our index.js file all we need to do is instantiate it before the game loop so new input handler so I push the left arrow key we get 37 if I push the right arrow key I get 39 that's great so now we just need to make a little switch here event.keycode so we're gonna do different things based on the key code so if we have 37 this is going to move left and if we have 39 we're going to move right we can get rid of this alert all right let's check it out so left arrow key move left right arrow key move right next we need to tell the paddle how to handle these movements next let's actually move the paddle with a key down here so let's remove this alert and we're going to say we want to we want to call the paddle and we want to say moved left we don't know what the paddle is so let's let's put it in our constructor and in our index.js file let's pass the paddle to our input handler all right now we need to create the move left function on our paddle so let's say here and move left and what's gonna happen here let's say we have the paddle has a max speed let's set it to 10 and the current speed that it is moving is zero all right so when we move left we want this speed to be equal to negative max speed so it'll be moving at negative ten pixels per second in our update function we now want to say this stop position dot X plus this speed so when we tell it to move left the speed becomes negative ten and then when we update the x position gets moved a minus ten amount let's try it out there we go so the paddle is moving I want to slow it down a little bit here maybe move it to seven and the other issue is once it gets to the edge of the screen it keeps going we want to make sure that it cannot leave the bounds of our game so what we'll say here is we'll say if this stop position dot X is less than zero this stop position dot X will be set to zero there we go now it stops when I hit the edge of the screen now all we have to do is do our move right and we'll be done so right here will say pedal dot move right go into our paddle class make a move right function just speed equals this dot max speed so sets it to the positive seven we have here whoops let's refresh that so there we go we can move it left we can move it right but again just like with the left bounds we need to make sure that it can't go off the right side of the screen so if this stop position dot X plus this dot width is greater than the game width which do we have here we do not have so let's let's save this here just that game wit goes game width and this die game well we don't need the height here so let's just stick with the game width if the position plus if the x position plus the width of the paddle is greater than the game width then this stop position dot X is equal to this game width minus this dot width now does that make sense let's move it to the right so if the exposition plus the width of the paddle is past the edge of the game screen we set the exposition right here where the exposition plus the width will line up perfectly with our game screen alright now let's work on stopping the paddle when the player releases a key so let's just copy this real quick but instead of key down we're gonna do key up and let's just change this to stop so if we release one of these keys we're gonna stop the paddle let's just create a quick function in here stop this speed equals zero now let's try it out alright that works great but here's the problem if I'm pushing left and then I push right and I live release the left key it kind of stops for a second so what we need to do is we need to make sure that it's moving in the same direction that we're releasing so if we release the left key we need to say if paddle speed is less than 0 if it is traveling left we will stop if we release the right key we need to check if the paddle speed is greater than zero so if it is traveling right and we release the right key it'll then stop let's try it there we go no stuttering now it works as intended alright next let's learn how we can draw an image onto our canvas first we need an image so let's go and create a new directory called assets and maybe in there we'll create a new folder called images and in here let's go ahead and upload a file see I have a bald PNG file Here I am a terrible pixel art so please forgive me alright so we have our bowl now we need to load the image into HTML so let's go in here and let's just say image source equals assets images vol dot PNG all right so we have our ball showing up on our page but we want to in our canvas so let's give it an ID of image ball and let's also just hide it from the web page so all images will be display:none all right so now that we have it here even though you can't see it we can grab it using this ID so let's go into our index j s file let's see here let's just put a spot here images will say lit ball I'll say image ball equals document dot get element by ID and we'll pass it the ID we gave it here so we have the image now whenever we want to draw it we can just say CTX draw image image bowl and the position and there you go now maybe this size doesn't work for us maybe we want to bump it up to maybe 16 by 16 so let's specify that here so we have the image the position x position Y and the width and height of our ball now let's just simply refactor this into its own class so let's create a new file here ball a s and here we will explore a default class of ball we're going to need a constructor and we're also going to need a draw function and later we will also do an update function that is to do later all right so the constructor when you do get the image so we'll say this dot image equals and then we can grab this document get element by ID pop that in there we can get rid of this and we can also grab this draw image and move it into our draw function we need to pass it the context and this will be this dot image so when we create the ball class it'll grab the image from the page and every time we want to draw it will draw it here well so inside index we will import ball from source ball and let's say that ball equal new ball then in our game loop we need to draw the ball and there it is and now we have a new clean class that we can use to change the position of the ball as it moves around in our game world before we start moving the ball around on the screen let's just clean up a couple issues real quick in our index.js file we have a couple hard-coded values down here should be the game width and this should be the game height also instead of just calling the game loop like this we can use the requestanimationframe and that will give us a valid time stamp which means we can go to our paddle JS file and in our update function we can get rid of this check here let's make sure everything still works all right let's move on to moving the ball let's go to our ball class our update function is going to take a delta time so we can know how far to move let's set the speed and let's just hard code it for now and we'll adjust it based on which direction it's moving later let's give it an X speed and a Y speed all right now on the update function we can just say let's see here we also need a position so let's do this top position let's give it an X of 10 and a Y of 10 now in our update function we can say this dot position dot X plus equals this dot speed X and this dot position dot y plus equals the stuff speed del Y and in our draw function we need to update it so that it is drawn at this stop position X and this dot position dot y let's go back to index let's make sure we're we're not updating it so let's say bald update pass in the Delta time and there we go we have our ball moving all right now let's clean up these extra hard-coded values right here so let's give the ball a size set up to 16 and we'll set both of these to this dot size whoops there we go so we're gonna draw the image with its position and its size now if there's any power-ups that might change the size of the ball we can simply just change the value and it will draw it at a different size now we need to worry about bouncing off the walls just like the paddle we'll need to take in the game width and the game height so we know where the walls are at so back in our index J s file when we instantiate the ball we're going to give it game width and game height all right so now the ball knows how big the game world is let's talk about the collisions here in our update function we need to say if this stop position X so it's already been moved if it's greater than this that game width or if this stop position X is less than zero we need to reverse the speed on the x axis all right now when you do the same thing for y if the position Y is greater than a game height which later will change this to either B the game over or you lose your try and if the position Y is less than 0 the speed Y gets reversed when you change this to speed X alright let's see if it bounces off the bottom wall here there we go I can't quite see the edge of the canvas all right we need to adjust this just a little bit on the Y we need to say if this position Y Plus this dot size is greater than the height there we go same thing on the right if the position X plus this dot size let's let's bump up the speed a bit all right looking good let's do a little bit of refactoring right now we're passing two parameters to both the bowl and the paddle we're passing the game width and the game height if we're gonna pass more parameters like the ball might need to know where the paddle is we're starting to just chain on more and more parameters to these constructors that is a sign that things need to be refactored and cleaned up a bit so let's take care of that let's go ahead and create a new file we'll call it game J s export default class game alright so this guy is going to be in charge of managing all this for us let's go to index J s let's get rid of the ball paddle and input Handler and let's move it out to this new class so let's give it a constructor we're gonna need to pass it the game width and the game height so right here will say this duck game width equals game width and this duck game height equals game height all right now instead of passing the ball and the paddle the game width and game height will just pass it an instance of this let's move this out into a new function the car call it the start function so we're ready for our game to start we will instantiate these objects we'll have our ball we'll have our paddle and we'll have our input handler now let's go ahead and import these guys so our paddle and play Handler and ball now let's refactor our paddle and ball class instead of taking game width and game height we're just going to take the game object our game width will be our game game with a game-high twig in game height same thing for our paddle we'll just take in a game object game dot game width game game height and this needs to know the game that game with as well alright now let's create our game object game equal new game past the game width pass the game height game to start that'll instantiate it and we need to import it alright next we have this game loop trying to update and draw our objects so let's let's take this out and what if we just said gamed update and game dot draw those functions don't exist yet so let's let's take care of that so we'll do an update and a draw function now what we have before is we had paddle update paddle draw so let's just move these around it's update we're going to update this paddle and then we're going to draw the paddle and this function same thing with our ball let's update the ball and let's draw the ball next we need to know the Delta time so let's just pass it in and let's pass in our context let's go back to index J s and we'll pass in the Delta time and the context now let's take a look at our errors here ah the paddle and ball don't exist on the object so let's just change this to this there we go all right back to where we started now as we make more and more objects such as all the bricks we don't want to have to say this brick dot update we're just writing the same thing over and over again so let's let's clean this up a little bit let's do this dot game objects this is going to be an array we could just say here this ball pit stop paddle and then in here instead of doing each of these we can just say this game objects for each object object update Delta time o because we need to remove these guys same thing with draw this game optics for each object object draw CTX so now any object we make all needs to do is have an update and a draw method and we can just add it here so if we add 40 bricks we just add the 40 bricks to this array and the rest of this game class takes care of it automatically for us so a quick review our end XJS file just starts a new game by instantiating a game object telling it to start and then in our game loop we clear our screen and then we tell the game to update and draw and our game class now passes its own instance to the object so that they can get any information they need so the ball can get information as to where the paddle is located on the screen then we just put all the game objects into an array and we have an update and a draw function that handle updating and drawing all of our game objects in our world now that we have our refactoring out of the way and we have everything wrapped up into a game class let's handle the collision between the ball and the paddle inside of our ball class we're given the game let's just make sure we have it here available for the ball to use now we can use the game within any of our other functions just to prove a point inside of our update function let's do a console log this dot game dot paddle dot position dot X so now every update we're gonna log where the paddle is even though we're currently looking at the ball object as I move the paddle left and right you can see the position is being printed out at the current value our update function currently updates the position of the ball and checks to see if it is hitting a wall on the left or right of the screen and we also check to see if it hits a wall on the top or bottom so now let's check with the paddle now the ball is always going to collide with the paddle with the bottom of the ball hitting the top of the paddle so let's say bottom of ball equals this dot position dot y plus this dot believe it sighs yes this size and let's do the top of paddle equals this dot game dot paddle dot position dot y now that we have this information we can start with our collision check if the bottom of the ball is greater than or equal to the top of the paddle so we're hitting the paddle we want to reverse the speed we also want to set the ball so it's just touching the paddle so the position Y is equal to this game paddle position Y minus the size so now if we take a look when the ball comes down and it hits the paddle it'll bounce right off of it all right now here's an issue all we're doing right now is checking where it's at on the y axis so if it's left of the paddle it still bounces off so we need to know if the ball is actually hitting within the bounds of the paddle let's do left side of paddle is this game that paddle dot position X and let's do right side of paddle equals this game paddle position X plus this game paddle width so now we know where the left and right sides of the paddles are let's extend our if statement here so if the bottle the ball is greater than the top of the pedal and this position dot X is greater than or equal to the left side of the paddle and if this dot position dot X plus the size is less than equal to the right side of the panel get rid of that let's try it out I'll see if we can still bounce the ball off the paddle we can now let's see if it goes to the left side of the paddle all right it does pass through and hit the the ground which will in the game now let's check the right side of the paddle just to make sure that is working as well all right so we now have a basic collision between the ball and the paddle working and we can bounce the ball back towards the bricks that we will build soon alright let's introduce some bricks to the game as you can see I've already loaded a brick PNG file here into our images folder let's load that into our index.html now let's create a new class class we need a constructor it will need an update function and a draw function alright let's just copy some code from our ball class here pass on the game going to get image brick you'll need this we will set the position in the constructor will not have a speed because it's not moving and instead of size will have a width just say 52 and a height of 24 and our draw function will need to take the context we will draw the image the position and the width and the height all right now let's start adding these bricks to the game in our game class alright let's first import the brick now let's create a new brick for an example give it a position and let's add it to our game objects all right so we now have a brick loaded into our game let's just see how easy it is to make lots of bricks our brick width was 52 so let's do this the bricks equal a new array let's do a loop of ten times and for each one we will push a new brick object position of X will be I times 52 and the Y position will be let's say 30 now to add an array to an existing array we can just use a spread operator all right so that's all it's needed to have a bunch of bricks displayed into our game world now this is not a whole lot of fun and building a loop and manually pushing these bricks we want to have different levels with different arrangement of bricks so let's go ahead and take care of that now let's create a new file and let's define what a level looks like it's a level one it's going to be an array number of arrays so let's just write it out and then I'll explain what we're doing here so decided I want to do 10 bricks per row so as you can see here we have four arrays within the level array each one corresponding to a row with ones and zeros so what I'm gonna do here is anytime there is a one that'll become a brick a zero is just going to be an empty space so for this first level we'll have you know three rows of full bricks and then the top row will just have some bricks here and there now we need a function to actually turn these levels into the bricks so we'll need to know about a brick and we'll also need a function that will build it now this function needs to know what level you're using so you'll pass at the level and they will create a bunch of bricks all right so let's start working on this so let's loop through our level to get each row and then for each row we'll will get a brick and now we will create our brick so let's take a look at our brick constructor brick takes the game and the position so we'll need to also pass that in the game here all right so if the brick equals one so if it is set to be added to the game we will say bricks push new brick passes the game and the position we need to create the position just leave that as a placeholder for now so our X&Y what are we going to do here so our full game width is 800 we're doing 8 bricks per row so let's change our brick size to 80 so 80 times 10 is 800 we have the height of 24 so if we go back to our levels x will be 80 times a brick and X the Y let's start it at 20 from the top plus 24 times the row index all right let's check it out see if it works let's go into our game let's get rid of this let's import our level so we have build level and level one that we're going to import from levels now our bricks we're going to say build level I'm going to pass it the game and level one and we need to remember that we should return the bricks back to the game they're our first level has been built and now we have a simple place that we can go in here and we can modify our level so we could change it a little bit just change this top row son and now you have a completely different look let's move the bricks a little further away from the top of the game so let's go into our create levels let's bump this up to 50 maybe 75 there we go now we have room once you break through to have it bounce up against the ceiling there and we have our level creator complete so we now need to detect the collision between the ball and each brick of the game now right now our ball class has some collision detection between the ball itself and a paddle which is a rectangle just like a brick so I'd like to reuse this code but it's best not to copy and paste it let's put it someplace reusable let's copy this let's create a new file I'll call it collision detection now it's just export a function and we'll need the ball and a game object let's go ahead and paste our code in here so we have the bottom of the ball we're also going to need the top of the ball we have the top of the game object we have the left side of the game object and we have the right side of the object we also need the bottom of the object all right now instead of this we need to refer to the ball and instead of the game paddle we need to refer to the game object itself all right now let's update our if statement if the bottom of the ball is greater than or equal to the top of object and the top of the ball is less than or equal to the bottom of object and the ball position X is greater than or equal to the left side of object and the ball position X plus the ball size is less than or equal to the right side of the object then we're going to do whatever we need to do so instead of this we're just going to return true otherwise we'll turn false this function is only telling us if there's a collision and not what to do with it now let's go back into our ball file let's import this function at the top called the function and detect collision now down here at our where we're doing our collision detection will remove all of this and instead say if detect collision I'm going to pass it the ball which is this and the paddle game dot paddle let's make sure that still works alright does so that's a successful refactor now it'll be easy for us to detect collision with the bricks let's go into the brick class go into our update function here first we need to import our function and we will just say if detect collision between the ball and the object which is the brick itself let's tell the ball to reverse the Y speed let's check that out as you can see it's bouncing off the bricks here at the top of our screen now we need to just remove the brick from the game once it's been hit so I'm going to add a property here called marked for deletion once it's been hit we will mark it true now our game is going to be responsible for removing these bricks from the game so we in our games update function we're going to update all the objects then we're going to filter it down to the ones that are not marked to for deletion and there we go we have successfully made it so that the ball can bounce off the bricks and destroy them work with pausing the game first let's update the ball so it doesn't start above the bricks but down here so that it's not trapped let's go into our ball file let's set the Y position to 400 and let's set the speed to a negative two there we go all right now let's go into our input handler we're going to need a new input here kikyo 27 is the escape key that's what we're gonna use to pause the game so we'll do here as we'll say game dot pause or let's say toggle pause because they could unpause the game as well so this class doesn't know what the game is so let's pass it into the constructor all right now let's go into our game class this is where we'll do the remaining of the work all right so our input handler we need to pass in the game which is this and we need a new function called toggle pause so we're gonna introduce here is game States a game state is going to tell the game where it's at is it paused is it running is it at the title screen the game over screen we're gonna be working with this for a few episodes let's go ahead and create here a constant and we're going to define all of our states so we'll have paused give that a value of 0 running 4 when the game is running the menu and also game over all right so we're all gonna work with pause and running for today when we start a game we want to set the game state equal to game state running later we'll start the game at the menu but for now we're going to keep it the way it's running right now next we need to toggle pause so if this game state is paused we're going to set the game state to running so if it's paused and they click the pause button it'll unpause the game otherwise we're going to pause the game now right now it's not doing anything because we're not selling the game to stop running when we hit the pause button so inside of update function let's just say if this game state is pause we're not gonna update anything so right there I just hit the Escape key and the game is frozen hit it again and it starts running again alright now let's do a little display to show that the game is actually paused and not frozen it's inside of our draw function we still want to draw everything even though the game is paused let's first shade the whole screen so it's a little darker so let's see here we have our context let's create a rectangle that covers the whole screen let's fill it let's do an RGBA so we can do black but with 50% opacity so you can see through it and let's fill it so there we go but we only want this to show when we're paused so let's just do if this game state is paused and now if I pause the game it shades it gray unpause it and goes back to white let's add a little bit of text as well let's create a font of 30 pixels Arial let's fill it fill it white looks a line at center and let's let's let's fill it and position it so we say fill text pause and we're going to put it 50% on the x-axis and y-axis so the X will be our game width over 2 and the y will be our game height over 2 let's pause the game and unpause it alright now we can pause and pause the game so the next thing we need to do is add a menu screen here so that if the game will not just start right away but the user will be able to hit the spacebar and start the game so we already have our game state menu set up here so let's start the game when we start the game we'll start it at a menu next we need to go down to our update we don't want to update anything if it is paused or if this game state is at the menu let's change these to triple equals there we go next in our draw function we have our pause state drawing here let's make a new one for the menu let's update these comparators let's make it a solid black and in our text instead of pause we will say press spacebar to start there we go now we need the input handler to trigger the start of the game let's go into our files let's go into input case 32 I believe is a spacebar game that start now we're going to need to modify our game a little bit so when we start this is when the game is actually going to start when the game is created we need to set up some things so we'll move this stuff up to our constructor the bricks will be built when the first level is loaded the game objects will be loaded when the game is started input handler needs to be moved up here let's clean this up a little bit alright so that should be everything we need to start the game let's go ahead and try it mmm nothing happens oh yes the last thing we need to do here is when we start the games we need to change the game state to running let's refresh all right now what is also calling this dart here let's go look at our index.js file oh yes we're immediately calling the game start when we load the page let's remove that now we have an air on our draw function issue is that the game objects has not been initialized yet so let's do that here set it equal to an empty array alright we now have our menu screen if I hit space the game will start and everything works we expect it I hit space again though you'll notice that it actually rebuilds the level so let's fix that real quick if this game state is not equal to the menu then we will return so only the menu can trigger the start of the game let's try this again there we go it doesn't rebuild the level automatically let's now handle the GAMEOVER state all right so the game should have a number of lives or balls or or tries I'm gonna call it lives I'm gonna just set it to one for now so we can test this now let's go down to our update function if this dot lives equals zero this game state will be equal to game over so we run out of lives we in the game and we don't want to update anything else if is game over so there we go once we hit game over the update will stop running now we just need to draw our game over screen let's just copy this here from our menu and we will say game over just need to add an extra brace there there we go so we have our game over screen built let's just test it real quick to see what it looks like there we go so you to fix some brackets let's format the document this is what it'll look like now we need to actually get the game to go to the game over state once the game is lost so let's change this back to menu now inside of our ball class we're checking collisions with both the top and the bottom we just want to check a wall on top so if the position of the ball is plus the size is greater than the game height that's the bottom of the game so let's cut this out if we hit the bottom of the game do we have access to the game here we do this game dot lives - - all right let's try it out I'm going to start the game I'm going to purposely let it hit the bottom here game over perfect now what's going to happen when the ball gets below the game now we're going to lose a life but it's immediately going to game over even though we have three lives set here that's because the ball is never being reset let's grab this here I want to pull this out and I'm going to create a function called reset so that'll reset our position and speed so down here whoops when we lose a life we will call reset let's try it out so it should go below the screen it'll reset so now we're down to two lives and a reset we have one life remaining game over now the last thing we're going to do in this series is allowing the player to complete a level and move on to the next level I'll see how we can do that right now we have a bunch of bricks loaded into our level and I've updated my level here so we only have one brick that's easy to clear and we can move on to the next level and make sure everything works the problem is since the bricks are loaded into these game objects we don't know when all the bricks have been destroyed so let's create a new array for the bricks and let's just load them in here so if this top bricks is build level will pull the bricks out of our game objects now in our update function we still want to loop over all of our game objects and update them and the same for our draw we want to go over all of our objects and update them or draw them so what we can do is we can have an array here called dot dot dot this game objects and dot dot this dot bricks so that's going to spread the game objects and the bricks together into one array and then we can do the same thing here we did before let's make sure that works it does for the update but let's make sure we can draw as well so instead of this game objects we're going to spread the game objects as well as the bricks let's take it up all right so we're able to bounce off the brick just fine however it's not clearing the brick it's not clearing the brick because our check here to remove any objects that are marked for deletion is only checking the game objects we really just need it to check the bricks rename this to brick see if that works there we go we cleared our brick now let's check to see if all the bricks are gone so inside of our update we can say if this stopped bricks length equals zero new level will need to be loaded in here let's take a look once the brick is destroyed our console is logging so that is working now how do we actually load the new level well let's create a new level real quick I'm just going to make it a duplicate of level one and call it these so we have our level two instead of our game let's import this guy and let's create an array of our levels so this style levels is going to be level one and level two and this current level is going to be the index so remember arrays start at zero so the current level at zero will be level one once the level reaches level current level of one the array at index one is level two that'll be loaded we will say this the current level plus plus so we'll increment the current level and then we will need to run the start function again now a start function needs to know what current level we are on so we'll say this levels at this current level see if that works all right so our level did not increment now last check here is we're checking to see if the game is at the menu if not it returns so that is why the new level is not being loaded so what we can do is we can make a new game state here let's just say a new level so in our start we will return if it's not equal to the menu or if the game state is not equal to new level there we go we also want the ball to be reset let's make sure we have that in here we do have a reset function that we built last episode so I'll reset the ball set the game objects get the bricks the last thing we need to do is before we call start we will say this dot game state equals game state dot new level let's check it out you change this too and we have a new level and that's all it takes to load in a second level after completing the first I hope you've enjoyed this game dev series I've hope it's taught you a lot on how to build a game and notices the very basics there's some bugs there's a lot of things that we can do with this game but I wanted to keep it simple so that we could go over the basic understanding of game development if you enjoy the series make sure you hit the thumbs up and subscribe for more videos

Channel: freeCodeCamp.org

Views: 431,159

Rating: 4.9362445 out of 5

Keywords: game development, intro to game development, game development tutorial, game development course, game dev, gamedeve, game development in javascript, javascript games, make javascript games, javascript tutorial, game development for beginners, javascript course, javascript tutorial for beginners, html, html canvas, brick breaker, brick breaker game

Id: 3EMxBkqC4z0

Length: 76min 15sec (4575 seconds)

Published: Thu Oct 11 2018