A Camera That Follows

What this stage does

Walk to the right. The view follows you. Walk back to the start and the view stops at the edge of the world. Jump high and the view moves up, but only after you leave the middle of the screen.

Two sets of positions

The camera is the difference between the two. camera.x and camera.y say where the bottom-left corner of the screen is in the world — the screen is just another rectangle. It costs three lines in draw(). Everything drawn between save() and restore() is shifted. Everything outside stays still, which is what you want for a sky.

// Sky first, not shifted, so it never scrolls
ctx.fillStyle = "skyblue";
ctx.fillRect(0, 0, canvas.width, canvas.height);

ctx.save();
ctx.translate(-camera.x, camera.y);

//   ...draw the platforms and the player at their WORLD positions...

ctx.restore();   // put the camera back, ready for the next frame

Left and right: centre, then limit

// Try to keep the player in the middle of the screen
camera.x = player.x + player.width / 2 - canvas.width / 2;

// Do not scroll past either edge of the world
if (camera.x < 0) camera.x = 0;
if (camera.x > worldWidth - canvas.width)
    camera.x = worldWidth - canvas.width;

Without the two limits, walking to the start of the level shows empty space beside the world. This is the same two-line pattern you used to keep the player on screen in stage 1. Here you apply it to the view.

Up and down: the deadzone

Centring the view up and down as well makes it jump on every hop. That is unpleasant to play. Instead, the camera only moves when the player leaves a band in the middle of the screen. deadzoneY is how tall that band is, above and below the centre. Small hops move nothing. Climbing high pulls the view along.

const playerMiddleY = player.y + player.height / 2;
const screenMiddleY = camera.y + canvas.height / 2;

// Went above the band: pull the camera up
if (playerMiddleY > screenMiddleY + camera.deadzoneY) {
    camera.y = playerMiddleY - canvas.height / 2 - camera.deadzoneY;
}

// Went below the band: push the camera down
if (playerMiddleY < screenMiddleY - camera.deadzoneY) {
    camera.y = playerMiddleY - canvas.height / 2 + camera.deadzoneY;
}

// Do not scroll below the bottom of the world.
// The sky above has no limit, so there is no top edge to stop at.
if (camera.y < 0) camera.y = 0;

The left edge of the world is 0 and so is the bottom, so both limits are the same line of code with a different letter in it.

Build it step by step

1. 1

   Make the world too big

   Add platforms past x: 800 and set worldWidth to 2000. Change the player's limit from canvas.width to worldWidth. Play. You can walk off the right of the screen and vanish. The level is there. You just cannot see it.

2. 2

   Move the view by hand

   Add const camera = { x: 0, y: 0 }. Add the save, translate, and restore lines to draw(). Set camera.x = 400 by hand and reload. The world slides across. Nothing follows anything yet, but you can see how it works.

3. 3

   Follow the player

   Replace your hand-set value with the centring line in update(). The view now follows you. It also scrolls past the ends of the world.

4. 4

   Limit the camera

   Add the two if statements for left and right. Walk to both ends and check that the view stops.

5. 5

   Add vertical follow, twice

   First set camera.y with the same centring line as camera.x. Jump. The whole screen lurches every time. Now replace it with the deadzone version and jump again. Feeling both is worth more than any explanation.