Coding Snake in JavaScript Complete Tutorial Every Step Explained with HTML5 Canvas

[Music] in this tutorial we're going to be creating the game snake using javascript now you might have played a variant of this game in a nokia phone back in the late 90s or early 2000s or maybe on some other popular console if you haven't let me give you a quick breakdown of how this version of snake works you the player move around a lion aka the snake as you eat various items your snake body gets longer the objective is to keep eating the red dot and avoid hitting your own body or the edges of the screen otherwise it's game over it's your basic last as long as you can game get the highest score using your quick reflexes through this tutorial you'll learn about adding audio every time our snake eats an apple there is an audible gulp sound we'll also learn about collision detection which occurs whenever you hit an apple hit the edge of the screen or crash into your own snake body we'll be taking keyboard input to move the snake around on the screen lastly we'll also be adding text to our canvas by displaying a high score and our game over screen if you like my videos please subscribe like and share i just wanted to show you that in addition to the version of snake that we're going to be creating here you can create another version and in this version our snake has smooth animations each of the snake parts behind it animates one after another he eats various food items tacos oranges and apples and then when this snake gets a game over his body disintegrates and disappears so other cool things that you can look forward to in future videos let's get started with our project so what i have here on my right i have my browser which is chrome and left is my visual studio code all i've done is open up just a blank folder so you can see that i'm just have snake open over here and there's no content within this folder we're just going to need two files for this project an index dot html for our html and index.js for our javascript inside of our index.html we just want to create a default html template and in order to do that all we have to do is put an explanation inside of our visual studio code here and hit tab and then what we're going to get is this default html template from this default html template all we have to do now is go ahead and we're going to link our script to our page so let's go ahead and add that src and since our script is right beside our file right here if they're right next to each other all we have to do is put index.js now for this project as i'm coding i'm going to want my browser to continuously refresh so i'm going to be using an extension called live server now if you click on these four block type thing over here extensions what you'll get is your extensions tab where you can go ahead and install live server if you want to the live server over here you just find it click install and then once we're inside our project over here all you're going to have to do is right click on this file and click open with live server the live server is now started at port 5500 and if i go ahead and just put in h1 and i type snake and just hit save it's going to refresh this browser over here now this would be extremely convenient as we're developing and making changes so we can see our changes immediately to get started let's go ahead and implement our html now we want our page to look like this we want our canvas centered and we want our title at the top now if you haven't really done game development before well we're going to be using something called a canvas and the canvas allows us to draw to the screen that's that black area where our game is we're going to give it a width of 400 and a height of 400 just to make it similar on each side close that canvas over there and let's just make sure to put our quotes around all of these items over here just for consistency there we are we have our canvas we have our script we're not showing anything yet because that canvas doesn't have a background color or anything like that and then what we're going to do is we're just going to go ahead and add a little bit of css over here and let's also close this we have much more room to work with so since everything is aligned in the middle let's go ahead and just quickly get these styles out of the way side of our head we're go ahead and add our style tag our style tag let's go ahead and style that body we're just going to go ahead and set the margin to zero pixels the padding to zero pixels you know just kind of removing all this extra stuff that we don't need we're going to use something called display flex don't worry too much about it but it's a way of arranging your items on the screen we're going to say the direction of our flex is column so we're going to stack our items one on top of another we're going to say justify all of that content to be center aligned align those items so that they're center so we need our vertical and horizontal centering done and then you'll see when i click save snake will go in the middle and then canvas so like if i had another item down here and i just wrote hello you can see that it goes below snake and it's centered we'll get rid of that because we don't need that on the screen and then for our canvas over here we're just going to add a little bit of styling as well as you might have noticed the canvas that we have on the previous screen has this shadow that makes it look a little bit more 3d so let's just get that out of the way real quick a box shadow set that to black set that to 20 pixels set that to 10 pixels and set that to 50 pixels which is going to be our little bit of blur behind it so there you go so now we have a canvas and we have a border around it and you can see it's slightly elevated we haven't applied a background color yet but we're going to do that within our javascript code next let's jump into our javascript and make sure that's working properly what we can do is can go ahead and open up our index.js so just using quick little tip for visual studio code you can always get to all your files by clicking on these two documents over here and then clicking on the file that you want to look at so i have both of these open now in tabs above me over here as you can see these two tabs so i'm just going to close this and just keep referring to these two tabs to jump back to them in inside index.js all i want you to do is type console.log and hello now what this is going to do is just confirm that our index.html and our index.js are working together properly what we can do then is open up our developer tools click on the three dots in chrome go to developer tools and then from here select console and you can see we printed out the word hello so now we know our javascript is working and we can continue this tip is not only really helpful for junior developers but just for any developer to make sure that your stuff is always working as you move forward so now that we have our page over here let's go ahead and actually get our canvas so from our javascript we're going to use document.getelementbyid and we're going to find that canvas on the page and we're going to find that canvas by the identifier right there called game do we find game right there and then we're just going to define a variable we're going to call it a const and we're call it canvas equals in order to draw on the screen what we're going to have to do is get a context from our canvas we're going to call that ctx and then we're going to ask the canvas as follows to get the context and we're going to ask for a 2d context there are other contexts available for example if you want to draw in 3d you would ask for a 3d context for the sink game all we need is 2d so right over here we get the canvas ask the canvas for the context and then we can use this context the first thing that we're going to set up for our snake game is the game loop the game loop is what's going to continuously update the screen we're going to call it draw game now three ways that we can do this is request animation frame set interval which will give a function and just say continuously call this function every one second every half a second or set timeout which only gets called once but then we could call again now the reason we're going to use settimeout which is maybe a little bit different what's interesting about snake is that as you get more apples and eat more apples your snake body gets longer and the game actually gets quicker which increases the difficulty the set timeout is going to give us an opportunity to change how often our screen gets updated at the top of our screen over here let's define a variable called speed i'm going to say speed is equal to 7 then instead of our draw game function what we're going to do is we're going to call set i'm out and we're going to give it the draw game function which is ourselves over here and draw game takes milliseconds in so we're going to say 1000 which is equal to 1 second so 1000 milliseconds is equal to one second and divide that by our speed then what we'll do is just to show that this is working we're going to say console.log and we'll just print out draw game to our console then our very last step that we need to do is to actually call draw game to get this game loop going we go into our console over here and we go to our more tools and we go to our developer tools and open that up and just keep that at the bottom of the screen and we just click save over here and just get rid of that draw there click save you'll see nothing on the console window but as soon as i call draw game over here you're going to see it start drawing the game over and over and you see how slow that's ticking up so we're only refreshing the screen 1000 divided by seven but if i increase that number to 15 you'll see that number goes up much much faster or even faster if i go 60 there it just goes up infinitely faster so let's go back to 7 because we want our game to be refreshing a little bit slower as our snake ticks along the screen by updating our screen 7 times a second this will allow our players to easily adjust to how the snake moves before we move on to more difficult levels let's go ahead and draw our background so in order to draw our background what we're going to do is inside draw game which is our game loop we put a little comment there so that's our game loop what we're going to do is create another function called clear screen and clear screen's only job is to go ahead and clear that screen let's do that so clear screen we're going to use that context now that context allows us to draw to the screen we're going to say that it's fill style which is kind of like a paint brush we're going to say your paintbrush is the color black now take that paint brush and go ahead and draw a rectangle and fill it with that color that you have and start at position zero x and zero y now that's from this top corner here in the top left and make the width of that rectangle that you're going to draw the same as our canvas and the same as our height of our canvas as well our canvas at height click save and there we go we have our black background our canvas size is 400 by 400. so for this particular game what we're going to do is we're going to establish that our tile count across is 20 and 20 down so imagine little squares that you're moving through across the screen and there's gonna be 20 going horizontally across and 20 going down in order to do that we're going to define a variable over here called tile count and we're going to set that to 20. then for our snake we're going to create a variable called head x which is going to be the x position of the head of our snake and we're going to set that to 10 so it's in the middle of the screen and then we're going to set our head y to 10 as well now you can't really see these tiles but if we imagine that there were 20 of them across and 20 down for x we would count 1 2 3 4 5 and then until we get to 10 and then we would count 10 down and that would put us in the middle of the screen for the head of our snake all right so we just need one more variable before we can draw our snake over here so we have our tile count included with our tile count we're going to have a tile size so that's going to mean when we draw our snake or apple on the screen we don't want it to take up the full 20 of that tile what we'd like to do is have it more like 18 but if we ever want to change these numbers in the future what i'm going to do is just say if our canvas start width over here divided by our tile count so that will create appropriate number and then take that tile count and minus 20. so canvas width divided by telecount is giving us 400 divided by 20 which is 20 and then we're just going to minus 2 to make it just a little bit smaller now we can go ahead and draw our snake to the screen to do that let's go ahead and add a draw snake function inside of draw game so add that function there and we'll go ahead and define drawsnake and what drawsnake does is it takes the context ctx sets a fill style which is like a paintbrush and that paint brush will be equal to the color green and we're going to represent our snake as a rectangle or as a square on the screen so we're going to use fill rect give it the x and y position so this is the important part the x right there and we're going to go times the tile count so that will position it within our tile map and then we do head dot y times the tile count and then we have two more properties those two more properties are the width and the height of our rectangle remember we said that's going to be our tile size so then i can grab our tile size and say the width is 18 and the width here is 18 because remember this is 400 divided by 20 minus 2 so that sets it to 18. then we click save and we have our snake right in the middle of our screen let's actually make the head of our snake the color orange and the rest of the body will be green to move our snake on the screen we're going to do is go ahead and set two variables the two variables that we're going to set are an x velocity and a y velocity in order to change those values we're going to be using our keyboard so whenever you click the left arrow the right arrow the up arrow down arrow we're going to either increase or change the velocity of your snake now if you get left in snake that means your snake will continue to move left until you either hit up or down you're technically not allowed to hit right because then you would go into your own snake body let's go ahead and implement some keyboard listeners for this so what we're going to do here at the bottom of our file is we're going to say add an event listener on the body so add event listener or an event called key down it's all lower case then we'll create a function called key down so lower k capital d and that function that we're creating we'll just define right here and the key down function will listen for any key presses and it will take in an event as one of its argument from that event we'll be able to determine which key was just pushed one way we can do that is with a key code and these you can just google and find out what each key code is so for the arrows various arrows here the one i'm implementing is up the up arrow has an event key code of 38. when you push the up key what we're going to want to do is change your y velocity your y velocity will be equal to and we're going to say minus 1 because your y will increase if you go down but if you go minus 1 it will decrease so we're going to say your velocity of minus 1 which technically we just want you to move one tile at a time up this way then also if you were moving in an x position so along the horizontal plane left or right all of a sudden you're going to stop moving left or right and only start to move up so we set x velocity to zero hitting the up arrow on our keyboard won't do anything just yet sure it'll change the y velocity but we're not using that value to change our snake position to do that right before we draw our snake let's create a new function called change snake position so change snake position call right here then we'll go ahead and define our change snake position and change snake position will change the head and the y position so head x will be equals head x plus the x velocity which could either be a negative number or positive number so if i say head x which could be let's say three and then it says plus minus one well that mean it will be equal to the value two this is perfect this value can be a negative or a positive to move our snake head left or right let me do exactly the same thing for the head y over here say head y plus y velocity and save that then if we come back over here hit the up key our snake continues to move up let's scroll down over here to our key down event and go implement the down arrow so in order to implement the down arrow the only difference is we need to make our y velocity positive like that and we need to change the key code to the down arrow so go ahead and change that 38 to a 40 and that is our down arrow key go back to your canvas over here and click down push up and now i can move our snake up and down on the screen for the left and right all we have to do is change those x velocities and set the y to zero so let's go ahead copy down over there change that key code so we're going to implement let's go ahead and implement left left is key code 37 and then for our x because we're going to be moving left well we want to set our y to zero and our x so x goes this way which is negative so negative one then for our right might as well do that one right away go ahead and implement that one put our right key code here we got right the code is going to be equal to 39 then make that one a positive now if we go back to our screen and i push left push right push up push down it's perfect now our snake can move around on the screen of course once we have our snake body we're not really allowed to move up and down so if we're already moving down we're gonna have a body behind us we shouldn't be able to crash back into our own body so let's go implement some guards to prevent us moving in the opposite direction let's take the up key event over here if our character is moving down you shouldn't be able to move up because then you crash into your own snake body so to prevent this movement all we have to do is say hey if you want to move up but you're already moving down that's not allowed so to prevent that we check if the velocity is equal to one if the velocity is equal to one we return and we just say you're not allowed to do this by calling return you're going to exit the key down function we can test that over here so that if i'm moving down and i'm pushing up nothing is happening and then we can do the same thing if you're asking to move down but you're already moving up so all you have to do is copy this if statement over here put it here and invert that value to a negative one so now that if i'm moving up and i try down that's not allowed then if i am moving right i shouldn't be able to go left to prevent that it's exactly the same but just on the x plane so x velocity equals equals one then we go over here so now i'm not allowed to go left if i'm already moving right we'll do exactly the same thing for the right key over there and then we just set that to negative one now it doesn't make as much sense when you don't have a snake body like this you don't have any green items behind you but normally in snake you will have items behind you there we go we've implemented some guards and made this more true to snake let's get an apple on the screen so that we have something to collide with and grow our snake in order to do that let's go ahead and add some more variables so kind of like our head x and head y we're going to have an apple x and an apple y let's do let apple x equal to 5 and we'll do let apple y position also equal to five inside a draw game we'll add a function called draw apple go define draw apple below so function draw apple and actually i'll move that over here away from change snake position so there we have we have draw apple and what we do once again is we use ctx we use fill style this time we're going to say fill style is set to red and we're going to define our apple just like we defined our snake as a square so we're going to use fill rectangle we're going to use position apple x and then position apple y then what we'll do is we'll set the width and the height and that's just going to be our tile size so just like our snake so tile size and our tile size click save and now we have an apple on the screen but remember that apple that we just placed there is an x in y position we need that to be within our tile count of 20 across and 20 down so to make that work what we do is we take our apple x over here and we say hey your times the tile count and that moves us over to position five in our tile count and then for apple y do the same thing times tile count which will move us down on the vertical plane over here so we're position five 5 on the tile count and the snake is at position 20 20. next we want to check if our snake collides with the apple as you can see right now when the snake goes over the apple nothing happens in order to do that we're going to create a new function called check apple collision this function will go after we change well after we clear the screen after we change the snake position but before we draw that apple what we'll do is we'll do check apple collision copy that function name check apple collision and we'll go implement that below over here so function check apple collision and what we're going to do is we're going to say if the apple x is equal to the head of the snake's x position and the apple y is equal to the head of the snake as well then what we're going to do is change the apple x and y position and draw a new apple in a new spot which effectively makes it look like our apple disappears to do this let's set our apple x position equal to some random number we're going to use math.floor to round down and then math.random to give us a random number between 0 and 1. we take that number times it by our count which will be the max number that we can get which is 20 because our tiles across our account of 20 tiles and then our y we're gonna do exactly the same thing instead of apple x we do apple y click save now when i move my little snake here and i hit the apple you'll see that the little red dot keeps changing positions whenever they're the same we've just implemented collision detection with our apple with collision detection implemented our next goal now is to increase the length of our snake to track the length of our snake we're going to use a class that we're going to create called snake part snake part will define right here at the top of our file and we'll just call it snake part and snake part will take a constructor that has an x position and a y position and then in the constructor we'll just set those values and then we're going to set up an array so in addition to tracking our head and x over here for the snake we'll just define a little array called snake parts that's equal to an empty array like that and we'll make it constant because we never remove this ray we only modify the contents of it let's also create another variable over here after snake parts called tail length now this will be the length of our snake tail even though we have our snake parts array you'll see why this comes in handy over here and let's set that to two so when our snake gets moving he'll automatically have two tail pieces using this new tail variable we're also going to go into our check apple collision over here and if there is a collision with the apple what we're going to do is we're going to increase that tail length so tail length plus plus let's go ahead and draw the parts of our snake going up into our draw snake method those body parts that we're going to be drawing are going to be the color green so remember our fill styles kind of like a paint brush let's change that color to green then when we loop over these items over here what we're going to do is just do a little for loop we're going to say let i is equal to zero well i is less than our snake parts because those are all the parts of the stake the length of that array and increment that i then what we're going to do is draw those sneak parts now it's almost like this over here so we could just copy that ctx fill but first thing we need to do is we're going to say let art equal to snake parts we're going to get the item from that array so this represents our part and then we could do ctx dot fill rectangle and we're going to give it the part dot x and remember because our snake comes from this class the snake part and it has an x value and a y value so back in our draw snake over here we can say part.x times our tile count and part dot y times our tile account then the size of this remember is just our tile size that we use for the width and the height now here's the part that's going to seem a little bit like magic so when we move our snake there are no parts right no parts are being added to our snake at all even though our tail length is two now the way this is going to work every time we draw this snake we are going to go ahead and push a snake part on one snake part at a time now that snake part that we're going to push on we're going to say snake part stop push and do new snake art and we're going to put it in the position of where the head x was is look we've already drawn our head over here when we're pushing this part on we're finished drawing the parts and now we're pushing this on so the next time we come here and draw it it's going to be where the head was not where it currently is we give our snake part a head x and head y so that's the x and y position of where the head was then the important part is well depending on how we build this game and the way we're building it here is we could just do an if statement and if we could say that we could say that if our snake parts dot length is greater than our tail length right now then remove that snake item so we could say snake parts and what we're going to do is we're not removing the last item in the list we're going to remove the first item in the list the first item in the list is going to be the oldest item it's going to be the furthest way item from the head every time we put new items into our list they are being drawn kind of in reverse it's the very last item in the list that's always next to the head because we push it on here so what we do is we put an item at the end of the list next to the head then down over here we remove the furthest item from the snake parts if we have more more than our tail size so this can be demonstrated right here just as we start moving our snake on the screen and one of the issues we have is that just turned green which is not what we want that's because the last item that gets drawn on our screen is your snake piece to correct that we would do is we would take our head over here and draw that at the very end right here so then our head is always on the top now what's happening is when we draw this snake as i mentioned you have this for loop so we loop over all the parts initially we have none but as soon as i start to move left once it draws and then it says next time you draw add this snake part so that's why they all kind of collapse out of this one area over here as you move left upper right so if i move left you see they slowly appear two of them because it's just shifting one over then once we have the right number of pieces on the screen what happens over here is this if statement kicks in and says oh you have one too many items shift off the last one and this little mechanism over here allows the pieces to move with the head of the body another thing you could do instead of an if statement you could do a while statement if you were implementing a game where your snake as soon as you crashed into a wall or ate yourself then it would penalize you and make your snake back to its original size if you were to reset that tail length so interesting instead of doing an if statement you can do a while you'll have the same effect right here but it opens up you to new gaming possibilities with your snake in the future one quick little visualization that we can do over here to see how our snake is being drawn is to go ahead and just make our set timeout so it's every one second the screen will only be drawn every one second if i push left over here you'll see it adds one piece at a time and there's always one behind the head one behind that and what's happening behind the scenes it's always removing an extra item that we have that gets drawn let's go ahead and implement that score text that we had so for score we're just going to create a variable over here and set it to zero then we'll create a function called drawscore and that function drawscore we'll be using the ctx to the draw to the screen but this time it's going to draw text we just do ctx dot fill style and fill style is going to be equal to the color white because remember that's kind of like our paint brush then we have a ctx font which we could make equal to a font size and a font type so we're going to use 10 pixels and we'll use verdana then we will also do ctx.fill text to set that text and we'll set it to store put a space put a plus then use that score variable from up over there then we need to position it so we need to give it an x position and a y pivot position we say canvas dot width because we're going to put it up in the corner over here and then we're going to minus a number and i played around with this earlier and 50 looked pretty good and then y position we're going to set that at n then when i click save you can see that now we have a score over here on our screen whenever we eat an apple we'll need to increment that score scroll scroll down to your check apple collision and just increase that score by one so score plus plus now whenever we eat an apple our score will increase let's implement our game over logic the way this is going to work is inside our draw game we're going to move the change snake position to the very top first thing that we do before we clear the screen then after we change the snake position we're going to check if any game over events occurred did you hit a wall did you hit yourself if you did we're going to stop the game and we're not going to draw or remove anything from the screen we're going to show you where you went wrong and then display the text game over this is what the logic will look like that we're going to implement we're going to create a result and we're going to get this from a function called game over if that result is equal to true which means it's game over we're going to return this means that we'll stop looping we're no longer going to draw our game and you're going to see the last thing that occurred on the screen let's go ahead and create that function so function is game over and then inside is game over what we're going to do is define a little variable called gameover because we're going to be checking a few different conditions so gameover is equal to false by default and then we're going to check a whole bunch of conditions so first let's check those walls if i'm hitting let's say left and our x position becomes less than zero then i'm going to say that's a game over and then game over equals through and at the end of our function over here we'll just return game over and then if i move our snake over here now my game pauses i can't hit left i can't go upright i can't do anything right now the game is paused and it's game over but as a player i don't really know that so let's show some text on the screen this return statement that we have over here returns and then when it returns it just stops execution of the draw game method but before we do that we're just going to put some text on the screen if it's game over now i just pasted this in you don't need to put all this crazy stuff here but what this is doing is just doing a nice little gradient so instead of making our fill text white what i'm going ahead over here is adding a gradient which is going to make our text look really nice so if i remove that and save what you'll see is if we get that game over event it's going to show that text on the middle of the screen just in white like that and what we're doing is we're taking our canvas and i just took this arbitrary number of 6.5 i took the width of our screen divided by 6.5 to kind of figure out where to put this and then for the height of our game over where to put this text what i did as well is i just took half of the screen height and kind of arbitrarily put it there the font size is 50 pixels it's for danda and the color is white but if you want to make this look kind of retro and 80s like add this gradient over here and what this gradient does is it adds just different colors at different levels so it starts with magenta shows some blue and then shows some red and then instead of using a fill style of white we use a fill style of gradient so now when we get that game over screen you get this really cool effect let's implement the rest of those wall boundary checks that we need to do so if your head x is greater than and we want to go to the greater than right over here well we have tiles we know that there's 20 tiles across so if you're greater than the tile account that means that you are that it's game over so over here we'll say tile count if you're greater than the tile count we'll say game over equals true so let's give that a try and if we go over our game pauses just a little bit late so we could say if game over is greater than or equal to and then do that and that works just perfectly and stops us at the right time additionally why do greater than when we can just check if it's just equal to that number and go over and it stops there then we can implement our y positions and we'll change this to an if else because there's no point of checking them another time elsif and then we'll just do our head so we're gonna check our boundary position when you're moving up so if you are less than zero then what we'll do is we'll go ahead and say game over is equal to true and now just like our head x when we're moving downwards it's the number of tiles is 20. so we could really just kind of copy that and change that to head y and then that boundary condition would work as well if we head on up we crash right there and it's game over we head on down we also get game over and the important thing to note is we can see the last thing that we did we know where the head was pointed right before we went wrong another aspect of snake is that you can't crash into your own body when you collect enough pieces your body length becomes longer and you're not supposed to be able to go through your own body or collide into it right now i can and there's no consequences but it should be game over let's go ahead and implement that after our wall check what we're going to do is go ahead and loop over all distinct parts let me say let i is equal to 0 i is less than the number of snake parts that we have and then just increment that i and then what we'll do is grab one of those parts so let part equal to grab that part and this is the most important part right here is we're going to check if that part x position is occupying that head x position so where the snake head is and if that part.y position is also occupying the same space where the head y position is and since they're both numbers we can use triple equals then what we do is we say game over is equal to true and to break out of this for loop we call break so we stop looping now if i click save what you're going to notice is we automatically get game over well our tail size right now is two so as soon as we start drawing the game technically one of our tail items is still occupying the same space our head is but the game hasn't really started well how do we know if the game is started the game only starts when we have a velocity so here at the top we can check if our velocity our y velocity and x velocity are both equal to zero if they're both equal to zero that means that the game hasn't actually started if the game hasn't started we can say that game over is equal to false and we'll just put those in curly braces as well like that and move that there if that happens you can see we're no longer getting a game over now we can go ahead eat a couple apples and see if we're able to collide into our own body you can see i was about to collide into my body over here so we got a game over every time our snake eats an apple we want it to make a sound in our case we wanted to make a gulp sound so i have this gulp mp3 that i've added to our project now it's sitting beside our index.html and index.js and what javascript allows us to do is create an object called audio so we can create this audio object over here with our variables and give it the path to our mp3 in this case it's sitting right beside it so we can just call it mp3 like that and we can assign it to a variable since it's never changing we can make it a const and we can make this a sound and we'll name that variable gulp sound so gulp sound over here whenever we want to play it all we have to do is call play well in our code when we check our collision and we go down to our check collision method we can play that sound so after we increase the tail length after we increase that score play that sound and all we have to do is call play we go back to our game we go over that apple and it plays that gulp sound every single time it makes the game just a little bit more enjoyable adding sound a high score and you have to be careful not to hit those walls or you get game over and then when you do get game over it shows you where you went wrong what your score was and the state of that game one last thing that we could do is increase the difficulty depending on your score to do this will make the snake move faster now how do we do that well we control the snake's speed with set timeout right now we just draw the screen seven times every one second because our speed is set to seven if we increase that speed we're going to draw the screen more times every second which means that our snake will move faster what we can do over here in our draw game is we could say if our score is greater than 2 then what we'll do is we'll increase that speed to 11 and then if our score is greater than five then we'll increase that speed to 15. we'll save that then i'll give it a try over here so right now my score is one and we're moving at that seven times a second and then i will get a bit of a speed boost right now as you can see i'm moving faster and we'll hit that apple and then if i hit this apple we're still going to move the same speed and then there you go now i'm moving really fast and this is where it becomes a little bit harder to control but 15 still seems to be a manageable number you can play with what numbers you think are appropriate which levels your speed increases you can flash something on the screen to say speed increase as that occurs and yeah it's just a fun little thing that you can do to make your snake game a little bit more challenging and a little bit more difficult in addition to react in javascript i plan to make more videos about creating games in javascript i look forward to creating tutorials on pacman and tetris and smaller videos about various gaming mechanics if you like to see more of these videos please subscribe like and share [Music]

Channel: Coding With Adam

Views: 67,565

Keywords: javascript, javascript game, snake javascript, snake, snake game, game snake, game loop, collision detection, keyboard input game, javascript game snake, javascript game loop, learn snake javascript, learn snake, code snake, snake sound, add sound to javascript game, code a game, code game, snake code, how to code game, coding a game, easy game to code, easiest javascript game, easy game, code easy game

Id: 7Azlj0f9vas

Length: 47min 56sec (2876 seconds)

Published: Fri Oct 23 2020