Workshop › Endless Runner › Step 1 of 19

Endless Runner: The ground

Jump over cacti and duck under birds while the world speeds up. Jump physics, variable jump height, random spawning and forgiving hitboxes.

What we are doing

We are building an endless runner: a runner jumps over cacti while the world rushes by, faster and faster. First the scene: a light sky and a thin ground line.

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

const GROUND = 180 // y of the ground line

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

ctx.fillStyle = '#475569'
ctx.fillRect(0, GROUND, canvas.width, 2)
```

What it means

• canvas is the drawing area, ctx its drawing pen.
• GROUND names the height of the ground once: 180 pixels from the top (y grows downward).
• The first rectangle paints the whole sky; the second is a 2-pixel line across at the ground's height.

Your turn

Write the lines under the comments, then press Run.

Skills: Drawing on a canvas

The runner →

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