Workshop › Doodle Jump-style Climber › Step 11 of 24

A camera that follows

What we are doing

To climb forever, the world must be taller than the screen. Positions are now in the world, and cameraY is the world height shown at the top of the screen. Everything is drawn shifted by the camera, and the camera moves up when the player gets near the top.

```js
let cameraY = 0 // the world y shown at the top of the screen: the camera

  // The camera only ever moves up, keeping the player in the upper part of the screen.
  if (player.y < cameraY + 200) cameraY = player.y - 200

    ctx.fillRect(p.x, p.y - cameraY, p.w, p.h)

  ctx.fillRect(player.x, player.y - cameraY, player.w, player.h)
  // Half off one side: draw the other half on the far side.
  if (player.x < 0) ctx.fillRect(player.x + canvas.width, player.y - cameraY, player.w, player.h)
  if (player.x + player.w > canvas.width) ctx.fillRect(player.x - canvas.width, player.y - cameraY, player.w, player.h)
```

What it means

On screen, a world height y is drawn at y - cameraY.
When the player is less than 200 pixels below the top of the screen, the camera moves so that it is exactly 200 below.
The camera never moves down: falling shows the player dropping off the screen.

Your turn

Under platforms, write cameraY.
In update, after the landing block, write the camera lines.
In draw, subtract cameraY in the platform and the three player fillRects.

Skills: Game states, Drawing on a canvas

← Land on platforms Lines on the wall →

All steps