javascript - 具有长时间步长的重力(使用 javascript)

Question

我想创建一个简单的重力动画(http://jsfiddle.net/2pcr9/4/ 在 chrome 和 firefox 中测试)。我正在使用 Canvas 在 Javascript 中执行此操作。使用 (:46) 的可变时间步长计算重力和速度:

this.realDelta = (now - this.prevTime) / 1000;
this.realTime += this.realDelta;

每个球都有用于计算速度和位置的代码 (:148):

this.vy += this.gravity * time.delta;
this.x += this.vx * time.delta;
this.y += this.vy * time.delta;

现在，当您查看窗口时，此原型(prototype)可以正常工作。

但是如果您隐藏当前窗口(切换到浏览器的另一个选项卡)，window.requestAnimationFrame 将停止。如果您等待 5 秒，然后打开窗口，window.requestAnimationFrame 将恢复。问题是 realDelta 现在是 5 秒并且使速度太大。

我可以添加一个检查以不允许 realDelta 大于一秒 (:46):

this.realDelta = (now - this.prevTime) / 1000;
if (this.realDelta > 1) {
    this.realDelta = 1;
}
this.realTime += this.realDelta;

但这并不能真正解决问题。

现在我不明白如何真正解决这个问题。我是否应该检查窗口是否被隐藏并暂停计时器(并在窗口再次可见时恢复计时器)。还是我计算的速度有误？其他 html5 游戏如何解决“dt”太大的问题？

谢谢

Answer 1

在您的绘图函数中，您可以通过多次运行您的函数来弥补丢失的帧:

var TIME_INTERVAL = 1000/60;
var timeElapsed = 0;
requestAnimFrame(draw, TIME_INTERVAL);

function draw() { 
    timeElapsed += now - this.prevTime;
    this.prevTime = now;
    while(timeElapsed > TIME_INTERVAL)
    {
        timeElapsed -= TIME_INTERVAL;
        // Run Draw
    }

    requestAnimFrame(draw, TIME_INTERVAL);
}

当然，如果用户按 Tab 键的时间过长，他们可能会返回进行大量计算。您还可以考虑运行备份以防 RequestAnimFrame 不可用:

var TIME_INTERVAL = 1000/60;
var timeElapsed = 0;
var backup = setInterval(draw, TIME_INTERVAL*5);
requestAnimFrame(draw, TIME_INTERVAL);

function draw() {
    clearInterval(backup);

    timeElapsed += now - this.prevTime;
    this.prevTime = now;
    while(timeElapsed > TIME_INTERVAL)
    {
        timeElapsed -= TIME_INTERVAL;
        // Run Draw
    }

    backup = setInterval(draw, TIME_INTERVAL*5);
    requestAnimFrame(draw, TIME_INTERVAL);
}