A game is state evolving through time

First, build a mental model

The world is a notebook of facts: position, velocity, health, phase. Update computes the next page from the previous page, input and elapsed time. Render draws that page. Drawing the same page twice must not secretly move the player twice.

1. requestAnimationFrame asks the browser for a callback before a repaint; it is not a promise of 60 updates every second. Use its timestamp to measure elapsed time, convert milliseconds to seconds, and make units explicit.
2. Velocity has units of distance per second. Multiplying it by seconds produces distance. If the player moves 120 pixels/second, a 16 millisecond update requests 1.92 pixels of travel.
3. Variable-step updates use the measured delta directly. Fixed-step updates accumulate elapsed time and consume it in equal simulation slices. Rendering can interpolate between snapshots. Fixed steps help repeatability but do not automatically make every physics engine deterministic.
4. A hidden tab can resume after a long gap. Choose a policy: pause, limit catch-up, or simulate bounded slices. Clamping a delta intentionally discards some elapsed time; it is a gameplay trade-off, not exact wall-clock simulation.

function update(world, input, seconds) {
  if (!Number.isFinite(seconds) || seconds < 0) return world;
  const speed = 120; // pixels per second
  return { ...world, x: world.x + input.moveX * speed * seconds };
}
const previous = { x: 10, health: 3 };
const next = update(previous, { moveX: 1 }, 16 / 1000);
console.log(next.x);     // 11.92
console.log(previous.x); // 10: the previous snapshot survives
// A browser loop samples input, calls update, resolves collisions,
// draws the result, then requests another animation frame.

1. Read

   The previous world says x = 10. Input requests positive horizontal movement. No canvas pixels determine authority.

2. Integrate

   120 px/s × 0.016 s = 1.92 px. The next x is 11.92. The health field is carried forward.

3. Present

   A renderer draws the accepted next state. Skipping one drawing can reduce smoothness without changing a fixed sequence of simulation updates.