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. It only moves 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 sits in the world. The screen is just another rectangle. The camera costs three lines in draw(). Everything drawn between save() and restore() is shifted by the camera. Everything drawn outside them stays still. That 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, you walk to the start of the level and see empty space beside the world. This is the same two-line pattern from stage 1. There you kept the player on screen. Here you use it on the view.

Up and down: the deadzone

You could centre the view up and down as well. Then the view jumps 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 do not move the view. 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. The bottom of the world is 0 too. 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 the player yet. You can still 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 you used for camera.x. Jump. The whole screen lurches every time. Now replace that line with the deadzone version. Jump again. Trying both versions teaches you more than any explanation.