GAME LOOP
game-loop.ts
Fixed-timestep game loop with interpolation, pause/resume, and frame budgets.
StarkWHAT THIS PATTERN TEACHES
How to implement a deterministic game loop with fixed physics timestep, visual interpolation for smooth rendering, pause/resume controls, and frame budget tracking.
WHEN TO USE THIS
Any real-time game that needs consistent physics independent of frame rate.
AT A GLANCE
class GameLoop {
tick(dt: number) {
this.accumulator += dt
while (this.accumulator >= STEP) {
this.update(STEP)
}
}
}FRAMEWORK IMPLEMENTATIONS
TypeScript
const FIXED_STEP = 1000 / 60; // 60 Hz physics
class GameLoop {
private accumulator = 0;
private lastTime = 0;
private running = false;
start() {
this.running = true;
this.lastTime = performance.now();
requestAnimationFrame(this.frame);
}
private frame = (now: number) => {
if (!this.running) return;
const dt = now - this.lastTime;
this.lastTime = now;
this.accumulator += dt;
while (this.accumulator >= FIXED_STEP) {