After delta time

Fixed timestep

Direct answer: Update game rules on a fixed slice of time, and draw as often as the screen allows. An accumulator holds leftover milliseconds until the next rule step.

Two clocks in one loop

Delta time makes motion smooth. It does not make collisions deterministic. If a ball can travel a different distance each frame, a paddle hit can be missed on a slow frame and caught on a fast one. A fixed timestep keeps the rule update constant:

const STEP = 1000 / 60;
let acc = 0;
let last = 0;

function loop(now) {
    acc += Math.min(48, now - last);
    last = now;
    while (acc >= STEP) {
        acc -= STEP;
        update(STEP / 1000); // always the same slice
    }
    render();
    requestAnimationFrame(loop);
}

The leftover acc is not thrown away. It waits for the next slice. That is the same pattern used in the Snake remake.

Try it and check it

Both boxes fall under gravity. The orange one updates every paint. The green one updates only on a 50ms tick. Watch the green box hop in equal steps even while the screen paints more often.

When to use it

Use a fixed tick for grid games, physics that must not tunnel, and anything you might later record or replay. Use raw delta time for camera pans, fades, and juice. Do not mix both in the same object.

Common mistake: running the while loop without a clamp. After a background tab, acc can be huge and the game will spiral trying to catch up. Cap the catch-up, then reset.

Real game connection

Snake’s official loop measures time, then calls step() only when the accumulator fills. Breakout can live on a simpler per-frame update because the ball is small and the paddle is wide. Platformer gravity becomes more predictable once jumps use a fixed slice.