The Game Loop

What this stage does

Click the game, then press the left and right arrow keys. The red rectangle moves. It stops at both edges of the canvas. There is no gravity yet, so nothing pulls it down.

Which way is up

A canvas counts y downward. At the top of the screen y is 0. It gets bigger as you go down. That is upside down from a ruler, so this game does not do it. Here y counts up from the ground. A rectangle's x and y are its bottom-left corner. So player.y is where the player's feet are.

function drawRect(x, y, width, height, colour) {
    ctx.fillStyle = colour;
    ctx.fillRect(x, canvas.height - y - height, width, height);
}

drawRect does the flipping. It is the only place in the game that has to. Everywhere else up is simply a bigger number. That is true for jumping, falling, platforms, and the camera.

The three functions

Every game in this course is these three functions. They run one after another, over and over.

function gameLoop() {
    update();
    draw();
    requestAnimationFrame(gameLoop);
}

gameLoop();

requestAnimationFrame runs the function again on the next frame. That is about 60 times a second.

How the keyboard works

A keydown event fires once. But holding a key down should move the player on every frame. So the game does not act on the event. Instead it stores which keys are held down. Then update() reads that list on every frame.

const keys = {};

window.addEventListener("keydown", (e) => { keys[e.code] = true;  });
window.addEventListener("keyup",   (e) => { keys[e.code] = false; });

// ...then, inside update():
if (keys["ArrowLeft"] || keys["KeyA"])  player.x -= player.speed;
if (keys["ArrowRight"] || keys["KeyD"]) player.x += player.speed;

Build it step by step

1. 1

   Make the canvas

   Make luigi.html with one <canvas id="game" width="800" height="450"> and a <script src="mario.js"> tag. Open it. You see an empty canvas.

2. 2

   Draw one rectangle

   In mario.js, get the canvas and its drawing context. Then call fillRect once. Reload. The rectangle appears near the top, because fillRect counts y downward. Change the 50 to 300 and reload. It drops.

   const canvas = document.getElementById("game");
   const ctx = canvas.getContext("2d");
   
   ctx.fillStyle = "red";
   ctx.fillRect(100, 50, 40, 50);   // x, y, width, height

3. 3

   Turn y the right way up

   Write drawRect and call that instead of fillRect. Use the same four numbers. The rectangle moves to the bottom of the canvas, 50 pixels up from the floor. Draw the ground the same way. drawRect(0, 0, canvas.width, groundTop, "green") fills everything below groundTop.

   function drawRect(x, y, width, height, colour) {
       ctx.fillStyle = colour;
       ctx.fillRect(x, canvas.height - y - height, width, height);
   }
   
   const groundTop = 50;
   
   drawRect(100, 50, 40, 50, "red");   // 50 pixels up from the bottom

4. 4

   Put the numbers in an object

   Replace the four numbers with a player object that has x, y, width, height, and speed. Nothing changes on screen. That is what a refactor looks like.

5. 5

   Split the code and loop it

   Move the drawing into draw(). Add an empty update(). Write gameLoop(). Nothing changes on screen yet. But the page now redraws 60 times a second. To prove it, put player.x += 1 inside update(). Watch the rectangle slide away.

6. 6

   Read the keyboard

   Add the keys object and the two listeners. Then add the arrow-key checks inside update(). The rectangle now moves when you press a key.

7. 7

   Stay on screen

   At the end of update(), stop the player leaving the canvas. That is two if statements, one for each edge.

   if (player.x < 0) player.x = 0;
   if (player.x > canvas.width - player.width)
       player.x = canvas.width - player.width;