Frame-rate independent movement

Speeds should be per second, not per frame. Moving 4 px every frame means a 144 Hz player moves 2.4× faster than a 60 Hz one. Multiply by the elapsed time (delta time) instead. Good enough for simple games; use a fixed timestep when collisions or physics must be consistent.

#delta-time#movement#game-loop

const SPEED = 240; // pixels per SECOND
let last = performance.now();

function frame(now: number) {
  const dt = Math.min((now - last) / 1000, 0.1); // seconds, clamped
  last = now;

  player.x += player.dirX * SPEED * dt;
  player.y += player.dirY * SPEED * dt;

  render();
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Fixed-timestep game loop

Run physics in fixed steps and render as often as the screen allows. An accumulator carries leftover time between frames, so a 60 Hz and a 144 Hz monitor simulate the same game. Clamp the frame time so a backgrounded tab doesn't try to catch up on minutes of updates. Phaser, Godot, and Unity do this for you; write it yourself when you're on plain Canvas or a renderer like PixiJS.

Frame-rate independent movement

Related

Fixed-timestep game loop