How to resize your javascript games in under five minutes

in this session we're going to add resizing to the game loop class that we created in the last session if you haven't seen the last session then both the code and the session are available in the description i'm david and i publish videos like this every monday let's get started so the first thing we're going to do is open up our game loop class and add a new function called resize so let's add that below our start function so we'll do on resize and inside that we'll put a simple console message resizing canvas and inside that function we'll set the canvas dimensions to that of the windows inner dimensions and we already have that code in our prepare canvas method so we'll grab it from there and of course now that we are setting our canvas size in our new onresize function let's replace the resizing code and our prepare canvas function with our new resize function so we'll go up to prepare canvas and we'll delete those two lines and we'll do this dot on resize like so we'll also create a resize function that we will expect the specific game implementation to override just like the update and render functions so let's go to the bottom of our code and under init we'll add our new resize function that we want the game implementation to override let's bring that up to the middle of the screen and inside that we'll put a simple console message that proves that the resize function is being invoked so we'll do console.log gameloop resizing like so and then finally we'll add this new resize function to our own resize function on line 27. this dot resize so now this means when the window is resized the game loop resize function will be triggered and because this resize function can be overridden it means that game specific resizing can also happen when the window is resized and that's pretty much all we have to add to our game loop class the next thing that we want to do is set the window.on resize function in our index.js file so let's do that next so let's bring this up to the middle of the screen and underneath window.onload we'll do window on resize equals function and inside that we'll put gameloop dot on resize and below our overridden game loop dot render function on line 12 we'll add our new game loop dot resize function so game loop dot resize equals function and for the moment we'll override that function with a simple console message and now when we run our game and reload our browser we will see our game resizing message and if we resize the screen we will see that message being triggered over and over again but as a bonus let's create a resize function for the ball class that we created in the last session again all the links are in the description so we'll open up our ball class and inside that class we'll add a new resize function we'll add it underneath the inet function it's going to take a canvas as a parameter and we'll bring that to the middle of the screen and inside that function we're going to do two things we're going to reposition the ball and we're also going to set its dimensions so we already have code for positioning the ball on lines 13 and 14 so we're going to grab that code now and we'll paste it inside our resize function and then to resize the actual ball we'll do this dot size equals cmv dot width times 0.05 so in this demonstration we are only using the width to resize the ball which means if you reduce the vertical size of your browser the ball width won't change it's only when you reduce the width of the browser that we'll see our ball change now you could write some fancy code if you like to change that but in the name of getting things done i'm just going to use the width for this demonstration but now that we have a resize function in place and it's doing the resizing we don't really need that resize code in the init function so let's replace lines 13 and 14 with a call to our resize function so we'll delete these two lines and then we'll do this dot resize cmv like so and that is all the code we need for our ball class so let's head back to our index.js file and we'll add our new ball resize function to our overridden game loop resize function so let's bring that to the middle of the screen and under line 19 we'll add ball dot resize and the ball resize function needs the canvas as a parameter so we'll do gameloop.cmv close the parenthesis like so and when we reload our game and resize our browser the ball will reposition and resize its dimensions 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: 27

Keywords: How to resize your javascript games in under five minutes, resize a browser in javascript games, resize the canvas element with javascript, resize a canvas element programmatically, make the canvas element the same size as the browser window, fullscreen canvas element, resizing the canvas element with javascript, use javascript to resize a canvas element, resize the canvas element when the browser window resizes, resize the canvas element when the document body changes size

Id: Jqkcc8ALl10

Length: 6min 17sec (377 seconds)

Published: Mon Nov 15 2021