Workshop › Endless Runner › Step 4 of 19

Gravity

What we are doing

The runner gets a vertical speed vy. Every frame gravity adds to it and the speed moves the runner; when the feet reach the ground, it stops there.

```js
const GRAVITY = 0.6

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

function onGround() {
  return runner.y + runner.h >= GROUND
}

function update() {
  runner.vy += GRAVITY
  runner.y += runner.vy
  if (onGround()) {
    runner.y = GROUND - runner.h
    runner.vy = 0
  }
}

  update()
```

What it means

vy is how many pixels the runner moves down each frame (negative = up).
Gravity adds 0.6 each frame, so a fall speeds up.
onGround checks whether the feet (y + h) are at or below the ground; then the runner is put back on it and stops.

Your turn

Under GROUND, write GRAVITY; add , vy: 0 to runner.
Under runner, write onGround and update.
In loop, call update() before draw().

Skills: Velocity and gravity

← Draw again and again Jump →

All steps