Making a game in JavaScript Part 2 : The Game Loop

What differentiates a moment in a game from another? How do we animate the images to show enough animation frames per second and make this animation look smooth and appealing? And how do we ensure that the game is responsive to input from the player and that there is no delay between animation frames, or input and action?

The Game Loop.

We are going to create the files we require and explain how this works as we go.
There is quite a lot of technical background that we could go over in detail, but there is also quite a lot to cover. I will skip some of the less necessary items for this project.

Let’s start with a new project folder.

Somewhere in my PC Folder structure, I will create a new directory and call it ‘GameJS’.


In this folder I will create one file, and two more folders.

\GameJS\images\ << An Images folder
\GameJS\js\ << A script folder
\GameJS\index.html << index.html – the web page containing the canvas, and within, the game.

Note: To create the subfolders, right click in the GameJS folder and select “New Folder”. To create the ‘index.html’ file right click in the folder, select ‘New > Text document’ and save it as index.html. You will need to change the extension of the file to .html from .txt as this will allow it to open and display as a webpage.

With the index.html and the empty folders created, next step is to edit the index.html file.

Opening the index.html file in a text editor, we can add the following html to the document and then save and close it.

<!DOCTYPE html>
<title>JavaScript : 2D Platform Game</title>
<script type=”module” src=”./js/app.js”></script>
<canvas id=”playContext” width=”1280″ height=”680″ style=”border: 1px solid black”/>

I will go through this line by line:

<!DOCTYPE html> // Declares the document to be of type ‘html’.

<html> // The ‘opening’ tag to state that there is HTML elements within.

<head> // The opening page ‘head’ tag – the head contains the page title, script links
// and other page attributes or styling links.

<title>Javascript Sidescroller</title> // Opening title tag, the title, the closing title tag. <script type=”module” src=”./js/app.js”></script> // Opening script tag, closing script tag.

</head> // The closing page ‘head’ tag.

<body> // The opening page ‘body’ tag.

<div> // The opening page body ‘div’ tag

//The Canvas element – contains opening and closing in one tag <canvas style />
//The canvas has an identifier ‘playContext’ (our choice of id), and a width of 1280 and
//height of 680. I have included a border to better define the bounds of the game canvas.

<canvas id=”playContext” width=”1280″ height=”680″ style=”border: 1px solid black”/>

</div> // The closing page body ‘div’ tag.

</body> // The closing HTML page ‘body’ tag.

</html> // The ‘closing’ HTML tag.

You will notice the following structure in all complete webpages:

<!DOCTYPE html >
<html> (opening html tag)
<head> (page head)
</head> (close head)
<body> (page body or display content)
</body> (closing body tag)
</html> (closing html tag)

You can see in the <script> tag that it contains a ‘src’ attribute. This is the file location of the script, or the ‘source’ for your linked JavaScript file. For this project, the original index.html script is pointing to the source ‘./js/app.js’ – so we must create that app.js script.

In the /GameJS/js/ folder right click, add a new text document and save it as ‘app.js’, remembering to ensure the file extension saves correctly as .js instead of .txt.

Opening the app.js file in a text editor. We add the following script code:

let bInitialised = false;

function runApp()
if(bInitialised === false)
bInitialised = true;

setInterval(runApp, 20);

Here, we are setting bInitialised to equal false, as the first time the script code executes it will need to initialise. The function runApp() is set to run at an interval of every 20 cpu cycles. It is called in a continuous loop for the duration of the game, or more specifically for the duration the web page is open.
If the game initialises on the first run through the function, we don’t need it to initialise again as it would reset the data back to the initial values. We want to ensure that the initialise code is only called once, can initialise the data that is required, but then ensure it is not called again by setting bInitialised to true.

Note: Naming conventions – bInitialised because ‘b’ for Boolean (True or False value)
Then adding the name to indicate it is used for initialisation ‘Initialised’
bInitialised = false; then when initialised we set bInitialised = true;

Calling it bInitialised means we will easily remember what it is referring to should we come back and look at this code later, which we will.

This is the main function, the runApp which is called in a repeated loop.

We will add this later, but the next code part will look something like this:

game.Initialise(); //In the initialise segment before bInitialised is set to true
game.Update(); //After the initialise, we want to update the game data for each loop
game.Render(); //After updating the game contents, we want to draw to the canvas.

There are some additional requirements before we add this game code and start drawing to the canvas, we will cover this in the next part.

Brent McEwan

Leave a Reply

Your email address will not be published. Required fields are marked *