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

Draw again and again

What we are doing

The picture will change every moment, so the drawing goes into draw and a loop runs it about 60 times a second.

```js
function draw() {
  ctx.fillStyle = '#f8fafc'
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  ctx.fillStyle = '#f59e0b'
  ctx.fillRect(player.x, player.y, player.w, player.h)
}

function loop() {
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)
```

What it means

• draw paints the whole picture, background first, which wipes the old one.
• requestAnimationFrame(loop) asks the browser to run loop again before the next screen refresh.

Your turn

Wrap the four drawing lines in draw, then write loop and start it.

Skills: The game loop

← The jumper Gravity →

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