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

Doodle Jump-style Climber: The jumper

Bounce from platform to platform and climb as high as you can. One-way platforms, a camera that follows you up, endless platforms generated so they are always reachable, moving platforms and traps.

What we are doing

We are building a Doodle Jump-style climber: a jumper bounces from platform to platform, higher and higher. First the jumper: an orange box whose place and size live in an object.

```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')

let player = { x: 180, y: 460, w: 40, h: 40 }

ctx.fillStyle = '#f8fafc'
ctx.fillRect(0, 0, canvas.width, canvas.height)

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

What it means

• player holds the box's left edge x, top y, width w and height h.
• The first rectangle paints the whole canvas light grey; the second draws the player from its object.

Your turn

Write the lines under the comments, then press Run.

Skills: Drawing on a canvas, Game states

Draw again and again →

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