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

Endless platforms

What we are doing

The six fixed platforms give way to endless random ones. fillPlatforms keeps adding platforms above the highest one until the screen (plus a margin) is full; the gap grows with the difficulty but never beyond what a bounce can reach. Platforms that fall below the screen are forgotten.

```js
// A bounce rises about JUMP * JUMP / (2 * GRAVITY) = 172 pixels, so a gap must stay well below that.
const MAX_GAP = 110

let platforms = [{ x: 170, y: START_Y, w: 60, h: 12 }]
let highest = START_Y // world y of the highest platform so far

// Add platforms above the highest one until the screen (and a little more) is full.
function fillPlatforms() {
  while (highest > cameraY - 100) {
    const d = difficulty(highest)
    const gap = 45 + Math.random() * (MAX_GAP - 45) * (0.4 + 0.6 * d)
    highest -= gap
    platforms.push({ x: Math.random() * (canvas.width - 60), y: highest, w: 60, h: 12 })
  }
}

  fillPlatforms()
  platforms = platforms.filter((p) => p.y < cameraY + canvas.height + 20)

fillPlatforms()
```

What it means

• The loop runs while the highest platform is still lower than 100 pixels above the top of the screen.
• The gap is at least 45; at the start at most 45 + 65 × 0.4 = 71, growing to 110 at full difficulty.
• x is random, keeping the whole platform on screen.
• After the camera moves, new platforms are added at the top and those below the screen dropped.

Your turn

1. Under START_Y, write the comment and MAX_GAP.
2. Replace the list of six platforms with the one-platform let platforms, and write highest under cameraY.
3. Under difficulty, write the comment and fillPlatforms.
4. In update, under the camera line, write the two lines.
5. Call fillPlatforms() above requestAnimationFrame(loop) at the bottom.

Skills: Loops, Game states

← How hard should it be? Miss and fall →

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