Workshop › Endless Runner › Step 2 of 19

The runner

What we are doing

The runner is a box standing on the ground. Its position and size live in an object, so they can change later.

```js
const STAND_H = 44

let runner = { x: 50, y: GROUND - STAND_H, w: 40, h: STAND_H }

ctx.fillStyle = '#334155'
ctx.fillRect(runner.x, runner.y, runner.w, runner.h)
```

What it means

• STAND_H is the runner's height when standing.
• y is the top of the box: GROUND - STAND_H puts its feet exactly on the ground.
• The box is drawn from the object's values.

Your turn

1. Under GROUND, write STAND_H and, after an empty line, runner.
2. At the very end, after an empty line, draw the runner.

Skills: Game states

← The ground Draw again and again →

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