JavaScript Canvas游戏Delta Time始终为0致无动画，求排查指导

Hey there! Let's figure out why your delta time is stuck at 0—this is a super common issue when setting up game loops with Canvas, so we'll get this sorted quickly.

First, let's recap how delta time works: it's the time elapsed between the current frame and the last one, which lets you make animations and movement frame-rate independent. If it's always 0, there's almost certainly an issue with how you're tracking timestamps in your loop. Here are the most likely culprits:

1. You're not initializing or updating lastTime correctly #

Your code snippet mentions a fps variable but no lastTime—this is critical. Delta time is calculated as currentTime - lastTime, so if lastTime is never set or never updated, the difference will be 0 (or a huge number on the first frame, then 0 after that if you forget to update it).

2. Your game loop isn't using the timestamp from requestAnimationFrame #

requestAnimationFrame automatically passes a high-precision timestamp to your loop function. If you're not capturing this value, or you're using a static time source that doesn't change, delta time won't update.

3. Variable scope issues #

If lastTime is a local variable inside your loop instead of an instance property of your class, it will reset to its initial value every frame, making the delta calculation currentTime - initialValue on repeat (which will hit 0 once the times align, or stay stuck if initialValue is 0).

Here's a fixed version of your class with proper delta time handling #

export default class Game {
  constructor(options) {
    // Window Variables
    this.canvas;
    this.ctx;
    this.width;
    this.height;
    this.running = false;
    // Time Variables
    this.fps = 30;
    this.lastTime = 0; // Initialize last frame timestamp
    this.deltaTime = 0; // Store calculated delta time
  }

  // Start the game loop
  start() {
    this.running = true;
    // Kick off the loop with the first timestamp
    requestAnimationFrame((timestamp) => this.loop(timestamp));
  }

  loop(timestamp) {
    if (!this.running) return;

    // Calculate delta time (convert to seconds for easier math)
    this.deltaTime = (timestamp - this.lastTime) / 1000;
    // Cap delta time to prevent huge jumps (e.g., when the tab is inactive)
    if (this.deltaTime > 0.1) this.deltaTime = 0.1;

    // Update lastTime to the current frame's timestamp
    this.lastTime = timestamp;

    // Run your game logic with delta time
    this.update(this.deltaTime);
    this.render();

    // Request the next frame
    requestAnimationFrame((timestamp) => this.loop(timestamp));
  }

  update(delta) {
    // Example: Move a player using delta time
    // player.x += player.speed * delta;
  }

  render() {
    // Clear the canvas and render your game
    this.ctx.clearRect(0, 0, this.width, this.height);
    // Draw your sprites/elements here
  }
}

Key things to check in your existing code: #

• Did you add this.lastTime = 0 to your constructor?
• Does your loop function accept the timestamp parameter from requestAnimationFrame?
• Are you updating this.lastTime to timestamp at the end of each loop iteration?
• Are you calling requestAnimationFrame recursively to keep the loop running?

Once you fix these, your delta time should start showing non-zero values, and your animations will work as expected!

内容的提问来源于stack exchange，提问作者John Manning