Workshop › Flappy-style Bird › Step 28 of 30

The same speed on every screen

What we are doing

requestAnimationFrame runs once per screen refresh: 60 times a second on most screens, 120 or 144 on many phones. Since update runs once per frame, the bird falls twice as fast there. We keep the physics at exactly 60 steps per second of real time instead.

```js
const STEP = 1000 / 60 // one physics step, in milliseconds
let last = 0
let lag = 0

function loop(time) {
  // Run the physics at a fixed 60 steps per second, whatever the screen's refresh rate.
  lag += time - last
  last = time
  while (lag >= STEP) {
    update()
    lag -= STEP
  }
  draw()
```

What it means

The browser passes loop the current time in milliseconds.
lag collects the time that really passed; while spends it in whole steps of STEP.
On a 120 Hz screen update runs every second frame; on a 30 Hz screen twice per frame. Either way 60 per second.
draw runs once per frame, after the while.

Your turn

Above function loop, write STEP, last and lag, then an empty line.
Change loop as shown: time in the parentheses, and update() inside the while.

Skills: The game loop, Velocity and gravity

← Show the best score No catching up after a pause →

All steps