How to create a vanilla gameloop class for your JavaScript games

in this session we will show you how to create a vanilla game loop class for your javascript games this session builds upon what we did in the previous session let's get started in the last session we showed you how to create a game loop for your javascript games in this session we'll take what we learnt there and use it to create a vanilla game loop class which can be used as a start point for many simple javascript games if you didn't watch the last video the link is in the description it's not required watching but this session will make a lot more sense if you watch the previous video first but enough talking let's get coding so to get started we need three files we need index.html index.js and gameloop.js now that we have our initial files in place let's zoom into the project and the place that we want to start is index.html to move things on quickly i'll add the code and briefly go over the relevant parts the really important lines are lines 4 and 5 which contain our references to our game loop and index.js files respectively and then on line 8 we have our canvas element which will be used to draw our game other than that it's a pretty standard html page the next thing we need to do is create a game loop class to do that we'll open gameloop.js inside that file we'll add the initial class and inside that class we'll add a constructor and inside that constructor we'll add four properties one for our frames per second value that will be set to 60 which means 60 frames per second one for our canvas reference one for our context object which we'll do the actual drawing on and one for our loop reference which will contain the function that runs our game loop and then finally we'll need a function for preparing our canvas which i will copy now essentially our prepared canvas function sets our canvas reference and context object it then removes the padding and margin from the html body element and finally it sets the canvas dimensions to that of the body element next we want to create three functions that will eventually be overridden with game specific code those functions are the init function which we need to initialize all our game objects before the loop starts the update function which we use to update all our game objects such as their state position etc etc and finally the render function which we use to draw all our game objects on the screen but of course in order to take advantage of these functions they must be invoked and the invocation will happen inside the start function so let's do that next we'll start by creating the start function then before we start the actual game loop we'll prepare the canvas ie we will call the function that we created earlier then we'll initialize our game objects which in the vanilla version is none however we want to assume that the function has been overridden and now at this point we want to actually add our loop so let's move this code up this screen slightly so we can get a better view of what's going on so we start by setting a reference between our loop variable and the javascript set interval function which we discussed in the last session the set interval function takes two arguments it accepts a function to execute and an interval period that determines the frequency at which we execute the aforementioned function if you're unsure what's going on here then take a look at the last video where i discuss game loops and the set interval function in more detail again all the links are in the description otherwise i'll assume you're up to speed and continue with the next step which is to add an anonymous function as a parameter so we'll add in parentheses then we'll do a big fat arrow and then we'll have the open and close brackets and inside that anonymous function we're going to invoke our update function and our render function and finally we'll set our last parameter which is the frequency at which we want to run our anonymous function i.e the function that contains our update and render functions that frequency is 1000 nanoseconds divided by our fps variable which of course is 60 and thus state that our function will run approximately 60 times per second so it's 1000 divided by fps and that's our start function complete so effectively what happens when start is invoked we prepare the canvas ie we make the canvas the same size of the screen we then initialize any game objects which is done on line 32 and then on line 33 we trigger the set interval function which takes two parameters the first is an anonymous function which will call or invoke our update and render functions and the second parameter is basically a frequency i.e how often do we want to run this function and in our case that is 60 times per second and that is effectively our start function complete however in order for us to see the fruits of our labor we must first instantiate our game loop class and then invoke our new start function and we will want to do all of this inside our index.js file so let's open that up so inside our index.js file the first thing that we want to do is create an instance of our game loop class so we'll do that first so that is let game loop equals new game and then what we'll do is we'll create an onload function and the onload function will run as soon as we load the html page so we do window dot unload equals function and finally inside that onload function we will trigger our dot start function by doing game loop dot start and that is all we need to do here to get our game loop running so now assuming we've coded it properly when we load our index.html file and open up the browser's console terminal we'll see our game loop rendering message being printed 60 times per second and at this point our game loop class is effectively done however let's quickly demonstrate how we override our init update and render functions so let's override the inet function first so we'll do gameloop.init equals function and inside that function we'll print out a simple console message console.log to do init game objects so basically what we've done here on line seven is we've said look we want to set our game loop init function to the function that we just created here on line seven eight and nine and we're basically going to do the same for update and render so again here on line 11 we're basically saying we want to set our game loop update function to the function that we are specifying from line 11 through to 13. and finally surprise surprise we do the same on line 15 for the render function ie we override game loop render with our own specified function which is on line 15 through to 17 and this time when we reload our page instead of our game loop rendering message we'll see our console terminal go absolutely bananas as it tries to print the messages from our overridden functions however as a bonus let's do something a little bit more interesting let's have the ball that we coded in the last session moving around the screen using our new game loop class so let's spin open a terminal i will create a new file called ball.js we'll exit that and if we open up our tree and we refresh it we'll see our new ball file let's open that up and then inside that file i'm going to basically add a copy of our ball code that we created in the last session like so the only difference here is that i've converted our ball from an object which is what we used in the last session to a class which is more relevant for this session however it still has the same functions i.e the init the update and the render functions again if you need a refresher or you're not sure about this code then watch the previous session links are in the description but before we can use our ball class we need to add it as a reference in our html page so let's do that next and we'll copy line 4 and then we'll update line 4 to be our ball like so so now we have the ball class and we've also added it as a reference in our html file but we're still not using it so what we need to do next is instantiate the ball class and add it to our override functions in the index.js file so let's open up that file next and we'll create a new reference like so then we'll add the ball and net function to our init function here on index.js and as a parameter it needs a reference to the game loops canvas object so we'll pass that through here like so and then we need to do pretty much the same thing for the update function and the ball's update function also needs the canvas object passed through as a parameter and for a render function if i bring that to the middle of the screen the first thing that we need to do is draw the background so i'll copy that code in now and basically what we're doing here on line 20 we're setting the game loops context object fill style to a nice calming blue and then on line 21 we are again using the context object to draw a rectangle which is the same dimensions as the canvas which effectively means that we fill the screen with our nice calming blue color and then lastly we need to add our ball dot render function and our ball render function needs the game loops context object passed through as a parameter like so but before we check this let's get rid of our console messages and now when we reload our page we'll see our ball moving around the screen and that is pretty much 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: 19

Keywords: javascript gameloop class, create a javascript gameloop class, javascript games, code a javascript gameloop, how to create a javascript gameloop, javascript gameloop class tutorial, david reid, code a web games gameloop, how to create a gameloop class for your web games, how to code a gameloop class for your web games, web games gameloop, canvas api javascript gameloop class, How to create a vanilla gameloop class for your JavaScript games, how to code a javascript gameloop class

Id: eu6wIa8P4wA

Length: 11min 13sec (673 seconds)

Published: Mon Nov 08 2021