how to add a game over screen to your javascript games in under ten minutes

in the last session we created a start screen links are in the description and this session we'll add a game over screen my name is david and i publish videos like this every monday let's get started so the first thing we'll do is we'll open up our game loop class and we'll create a new method called stop so we'll do stop and for now inside that method we'll put a simple console message and the message will be stop game so at the moment we don't really have a game we have a ball bouncing around the screen it's effectively an animation thus we don't really have a game over scenario there is no way for the game to end so we're going to have to mimic a game over scenario and we'll do that by adding a temporary timer that will quit the game after a certain number of frames and the place to add that timer is the index.js file so we'll open that up and at the very top we'll add a new variable called timer and we'll set to zero that timer needs to be initialized and the best place to do that is of course inside the gameloop.init function which we're overriding on line five so let's put timer equals zero now obviously at this point we are setting the timer to zero on line three and then we're initializing the timer to be zero on line six inside our game looping it function and that might seem like overkill however as the game starts running and stopping that timer is going to change so every time we start the game we want to set the timer to zero and the way to do that is inside this init function because that is called before the game starts but of course setting the timer to zero doesn't actually do anything we need our timer to be incremented after every frame and of course the best place to do that is inside our gameloop.update function which we override on line 14. so basically we want to increment our timer in here so let's do that first and we'll also print out a console message so we can see it happening when the game is running and then after the update call we want to add in a condition that checks the value of our timer for this demonstration i'm going to quit the game approximately two seconds after the game starts and because we're incrementing the timer inside the update function we know that runs approximately 60 times per second so if we set a condition to check to see if our timer has reached 120 then we know that is approximately two seconds and at that point we can stop the game so we'll do if timer is greater than 120 that will represent 120 frames i.e approximately two seconds then we'll invoke the game loop dot stop function we'll do game loop dot stop like so so just to quickly go over this what we're doing on line 15 is we're incrementing the timer every time the update function is called so that's going to be approximately 60 times per second we're printing out a console message just so that we can see that for this demonstration purpose we'll remove that later on then after the all update call we've added a condition to check to see if our timer is greater than 120. if it is then we know that the game has run for approximately two seconds and to mimic the game over scenario we're going to quit the game at this point in short if the game has been running for two seconds then end the game so now if we run our game and we click a start button we'll see that the timer is incrementing and then after 120 it starts printing out the stop game however the game doesn't stop and that's because at the moment our stop function is simply printing out a message so let's deal with that next so if we go back to our game loop class and then on line 37 we have our stop function and on line 38 we have the console message that says stop game which we saw when the game was running underneath that console message we'll add clear interval and as a parameter we'll pass this dot loop and actually while we're at we will remove our console message so the clear interval is a javascript function that is used to cancel an action that was previously established with a call to the set interval function in our case that is our loop variable which references our game loop which of course is a call to set interval and again we covered this in previous sessions so if you haven't watched them links are in the description now if i save this and run our game and we click the start button again this time the game loop stops of course this is a terrible way to end the game what we want to do now is add some sort of notification that the game has ended and of course the best way to do that is with a game over screen so let's do that next so we'll need to open up our index.html file and below the canvas element we'll add a new div its id will be game over screen we'll give it a class of screen and the style will be displayed on and we'll close the dev tag and inside that element we're going to add a game over message and a way to restart the game so let's add a h1 tag and our message will be game over and under that we're just going to add the start game button which we have on line 11 so we'll grab that and we'll paste under game over and we'll close that white space like so so now we have a simple game over screen but of course if we run our game we won't see that screen we need to effectively turn our screen on so let's do that next let's open up our game loop class now inside our stop function what we want to do is we want to switch on our game over screen but we also want to make sure that our other screens are closed and at the moment we have the canvas which is what your game runs on and our start screen so we want to make sure they're both off we've already written code that does that online 27 and 28 so we're just going to grab that two lines and then paste them into our stop function so we'll grab these two lines 127.28 and then we'll go back down to the stop function we'll bring it to the middle of the screen and we'll paste those two lines for toggling or start screen and canvas screen and at the moment the canvas screen says true we want to change that to false like so and then we want to add another toggle screen call so we'll do this dot toggle screen but this time we want to switch on our game over screen so we'll do game over screen and we'll set that to true like so so effectively what we've done here is when we stop the game we hide our start screen we hide our canvas and we show our game over screen and then we end the game loop which is done by invoking clear interval on line 41. so now when we run our game and we click our start game button the game will run and when it stops after 120 frames it will display the game over screen but let's make style changes let's change our game over message to be white so we'll do that by going back to our code and we'll open up our index.css file and we'll find our screen class let's bring it to the middle of the screen and above padding we'll just add color and we'll add hash and six f's which is the hexadecimal value for white so now if we run our game and we click the start button when the game ends the message is white however there is a small problem if we click the start game button we'll see that our game over screen is still on the screen which is somewhat distracting let me show you that again so obviously that is not the desired result so let's fix that by going to our game loop class so when we click the start game button it invokes the game loop dot start function so let's find that and inside the start function you can see that there's two calls to toggle screen one is to set the start screen to false and the others to set the canvas to true however that logic is slightly incorrect now because we've added a new screen to the game we have our game over screen so now when we start the game we also need to check to see that our game over screen is false so let's do that under line 28 we'll do this dot toggle screen and we'll do game over screen and we'll set that to false like so so basically now when we start the game we won't only be setting our start screen to false we'll be setting our game over screen to false as well so let's test that theory by running our game and when we click the start button the game will run and then after 120 frames the game will stop it will show our game over message and this time when we click the start game button the game over screen disappears and the game runs appropriately on a side note the viewer with a keen eye might have noticed that the ball moves in a different direction when the game is started from the game over screen let me quickly demonstrate that so it's going down the way and when i click again it goes up the way when i click again it goes down the way if you know why then let me know in the comments again a link to the code is in the description and that is pretty much it if you found the content useful then consider hitting the like button and subscribing to the channel also if you like web games then check out my nova project where i am currently creating a web clone of the 90s macintosh game escape velocity i also have other tutorials that show you how to draw on the canvas api resize the canvas programmatically and a series of videos on how to use canvas api to create games i also do other videos related to programming videos are published every monday and last but not least thanks for watching you

Channel: David Reid

Views: 33

Keywords: how to add a game over screen to your javascript games in under ten minutes, How to add a game over screen to your javascript game in under five minutes, game over screen for javascript game, how to add a game over screen to your web game, javascript game game over screen, html5 game game over screen, javascript game game over screen walk through, javascript game tutorial, javascript game tutorial for beginners, javascript games, javascript gamedev, javascript game development

Id: 9sMau0ZPW5A

Length: 10min 15sec (615 seconds)

Published: Mon Nov 29 2021