Workshop › Endless Runner › Step 8 of 19

Things that come at you

What we are doing

The runner never really moves forward: the world moves toward it. Obstacles live in a list; every frame each one slides left by speed pixels, and the ones gone off the left edge are dropped.

```js
let obstacles = []
let speed = 6

  for (const o of obstacles) o.x -= speed
  obstacles = obstacles.filter((o) => o.x + o.w > 0)

  for (const o of obstacles) {
    ctx.fillStyle = '#15803d'
    ctx.fillRect(o.x, o.y, o.w, o.h)
  }
```

What it means

• Each obstacle is a box: { x, y, w, h }.
• o.x -= speed moves it 6 pixels left each frame.
• filter keeps only the obstacles whose right edge (x + w) is still on screen.

Your turn

1. Under runner, write obstacles and speed.
2. At the end of update, move and filter the obstacles.
3. At the end of draw, draw them.

Skills: Arrays and objects

← Tap to jump Cacti keep coming →

All steps

1. The ground
2. The runner
3. Draw again and again
4. Gravity
5. Jump
6. Short hops
7. Tap to jump
8. Things that come at you
9. Cacti keep coming
10. Wait for the start
11. Crash
12. Try again
13. Faster and faster
14. Remember the best run
15. The score counter
16. Birds
17. Which keys are down?
18. Duck
19. Build it yourself: jump buffering