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

Kinds of platform

What we are doing

Soon there will be several kinds of platform. Each one gets a kind and a sideways speed vx, and its color is looked up in a table by its kind.

```js
const COLORS = { normal: '#16a34a' }

  platforms = [{ x: 170, y: START_Y, w: 60, h: 12, kind: 'normal', vx: 0 }]

    const platform = { x: Math.random() * (canvas.width - 60), y: highest, w: 60, h: 12, kind: 'normal', vx: 0 }
    platforms.push(platform)

  for (const p of platforms) {
    ctx.fillStyle = COLORS[p.kind]
```

What it means

• COLORS maps a kind to a color; COLORS[p.kind] looks it up.
• The new platform is kept in a variable before it is pushed, so the next steps can change it first.

Your turn

1. Under MAX_GAP, write COLORS.
2. Add kind: 'normal', vx: 0 to the platform in reset, and build the new platform in a variable in fillPlatforms.
3. In draw, pick each platform's color inside the loop.

Skills: Game states

← Best score Moving platforms →

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