How to add a start screen to your javascript game in under five minutes

in this session we're going to add a start screen to the vanilla game loop class that we worked on in the last session all links for the previous session are in the description i'm david and i publish videos like this every monday let's get started so the first thing that we need to do is to remove the call to our game loop start function which is currently situated in our window.unload function in our index.js file so let's open that up so we'll just delete line 23. now that we're not preparing our canvas when we load the page we'll need to check the status of our canvas i.e whether it's null or whether it's referenced before we resize our canvas and we do that in our game loop class so let's open that up and the code in question is in the on resize function which is on line 18. let's bring that to the middle of the screen so all we have to do here is add an if statement like so and effectively what we're doing here is saying if the canvas element is referenced i.e it's not null then we can go ahead and resize its dimensions and now if we run our game we will see nothing but a blank html page so the next thing that we need to do is open up our index.html file and add a new development that contains a button this will represent our simple start screen so let's open up index.html and we'll add a div tag we'll give an idea start screen we'll give it a class of screen and we'll set the style to display block we'll close out the div and inside the div we're going to add a button and we'll add an on click event and that will point to a function called start game which we haven't created yet and the button will say start game and finally we'll close off the button tag so as i mentioned the button contains a start game function which we haven't implemented yet and we've also set the div element style to display a block this means the div will be displayed when the page loads we don't really need to do this because obviously a div is by default displayed but we're going to do this for consistency which will make more sense as we move along so the next thing we're going to do is we're also going to add a style to the canvas element but this time we're going to set the display to none this means our canvas element won't be displayed when we load the page and we can prove this by loading our page and seeing at the top corner of the screen that we have a start button but we have no canvas element so we have our start button but at the moment if you click it it doesn't do anything so let's change that next so we'll open up our index.js file and at the bottom of that page we'll add a new function called start game let's bring that up to the middle of the screen and for the moment inside that function we're just going to set a simple console message start game now if we reload our page and we open up the console tools when we click start we'll see our console message but obviously we need more than a console message in there so let's move on to the next step which is to create a toggle screen function and we'll create that function inside our game loop class so let's open that up and under the start function we'll create a new function called toggle screen let's bring that up to the middle of the screen first and then we'll do toggle screen and we're going to pass two parameters the first is the id which will be the id of the element that we want to show and the second will be a flag which we'll call toggle and that will be a boolean flag that will represent whether or not we want to show the screen associated to the specified id parameter and inside that function we're going to do let element equals document dot get element by id and we'll pass through our id that we accepted as a parameter and then we'll do let display equals and then here we'll do toggle which represents our boolean flag and we'll use a ternary statement to decide whether or not to set the display to block or none and then finally we'll set the style on our element like so so now that we have a toggle screen function we need to use that function to decide which screen to display so let's go up to our start function on line 27 we'll do this dot toggle screen we'll do start screen and we'll set that to false and then on line 28 we'll call the toggle screen again this time our id is canvas which represents our canvas element which the game runs on and we'll set that to true so effectively what is happening here is that when the start function is invoked first of all what we do is we hide the start screen and then we display the canvas element which is what our game runs on and at that point we can go ahead and prepare the canvas initialize all the game objects and start the game loop but at the moment we're not invoking our start function because we removed that from the window.onload function in our index.js file so to get that to work what we need to do instead is add a call to the gameloop start function inside our new function called start game which is triggered when the button is clicked so let's go back to the index.js page and let's bring this up to the middle of the screen and on line 31 we'll add gameloop.start like so and while we're at it we'll get rid of our console message and when we load our page and click our start button the game will start and that is effectively it but as a bonus let's add some style to our start screen so the first thing that we need to do is create a new file called index.css so let's spin open a terminal and we'll do touch index.css we'll close that and if we open up our tree and we refresh it we'll see our index.css file the next thing that we need to do is add that as a reference in our html page so let's open that up and under line six we'll add our link tag which references our index.css file like so so now that we have our index.css file referenced let's open up the file and the first thing that we want to do is change the color of our screen and to speed things along i'll paste that code in now again all the code for the session is available and the links are in the description after that we need to add some styles for our button and again for speed i'll paste that code into and all we're doing here is we're giving the button a particular style and then on line 27 we have a style that changes the button when we hover over it and on line 26 there is a transition that happens when the style changes from normal state to hover state and finally we'll add some style that puts a start screen in the center of the page like so and when we reload our page we have a nice simple start screen and when we click our button the game will start and that my friends is that 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: 129

Keywords: How to add a start screen to your javascript game in under five minutes, start screen for javascript game, how to add a start screen to your web game, start screen for web game, use html and css to create a start screen for your javascript game, javascript game start screen, html5 game start screen, javascript game start screen walk through, javascript game tutorial, javascript game tutorial for beginners, javascript games, javascript gamedev, javascript game development

Id: FwLMz7jMRac

Length: 8min 6sec (486 seconds)

Published: Mon Nov 22 2021