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

Lines on the wall

What we are doing

With a plain background you cannot tell you are climbing. Faint lines every 40 world pixels, like lines on a wall, slide down as the camera goes up.

```js
// Faint lines fixed to the world, so you can see the climb even between platforms.
ctx.fillStyle = '#e2e8f0'
for (let y = ((-cameraY % 40) + 40) % 40; y < canvas.height; y += 40) ctx.fillRect(0, y, canvas.width, 1)
```

What it means

• The lines sit at world heights that are multiples of 40, so on screen the first one is at -cameraY modulo 40.
• % 40 of a negative number is negative in JavaScript; adding 40 and taking % 40 again makes it 0 to 39.

Your turn

In draw, under the background, write the comment and the two lines.

Skills: Drawing on a canvas

← A camera that follows How hard should it be? →

All steps

1. The jumper
2. Draw again and again
3. Gravity
4. Bounce
5. Steer left and right
6. Through the sides
7. Half here, half there
8. Touch steering
9. Platforms
10. Land on platforms
11. A camera that follows
12. Lines on the wall
13. How hard should it be?
14. Endless platforms
15. Miss and fall
16. Play again
17. Tap to play again
18. Score is height
19. Best score
20. Kinds of platform
21. Moving platforms
22. Traps
23. It breaks!
24. Build it yourself: springs