永远循环并提供增量时间

时间:2012-12-21 19:45:41

标签: javascript html5 loops timedelta

我正在编写一个HTML5游戏开发Javascript框架,我想为用户提供最后一个滴答与当前滴答之间的时间差异。

setInterval(tick, 16.6666666);

function tick() {
  update();
  draw();
}

这就是我所拥有的,但我想拥有:

while (true) {
  /* Calculate delta time */

  tick(dt);
}

function tick(dt) {
  update(dt);
  draw();
}

我试过,使用date.getTime();计算增量时间,但Firefox说脚本崩溃了。显然,无限循环会崩溃。我有什么建议可以解决这个问题吗?

我想要一个无限循环,可以使用break停止。我也希望通过delta时间,但我知道该怎么做。

4 个答案:

答案 0 :(得分:10)

只需使用上次更新的时间维护变量,并计算tick本身的已用时间/增量时间。

var lastUpdate = Date.now();
var myInterval = setInterval(tick, 0);

function tick() {
    var now = Date.now();
    var dt = now - lastUpdate;
    lastUpdate = now;

    update(dt);
    render(dt);
}

这是一个JSBin,虽然我不认为它真的需要...... http://jsbin.com/okimam/10

修改: 我必须指出setInterval(tick, 0)并不一定意味着将立即调用tick,两次调用之间的间隔为“0ms”。这取决于浏览器。

答案 1 :(得分:1)

这就是我使用的:



var lastTick = performance.now()

function tick(nowish) {
  var delta = nowish - lastTick
  lastTick = nowish

  update(delta)
  render(delta)

  window.requestAnimationFrame(tick)
}

window.requestAnimationFrame(tick)




答案 2 :(得分:0)

想给我两美分。通常我会在游戏中使用这种deltatime方法:

const perfectFrameTime = 1000 / 60;
let deltaTime = 0;
let lastTimestamp = 0;

function start() {
    requestAnimationFrame(update);
}

function update(timestamp) {
    requestAnimationFrame(update);
    deltaTime = (timestamp - lastTimestamp) / perfectFrameTime;
    lastTimestamp = timestamp;

    // YOUR FRAME CODE HERE!

}

start();

这确保您将拥有完美的deltatime(如Unity deltaTime),因此您可以将时间缩放为帧时间。

答案 3 :(得分:-1)

你在想它吗?

var myInterval = window.setInterval(calculateForDeltaHere , 20);

function calculateForDeltaHere () {
    /* Calculate delta time */
    dt = Math.random();
    tick(dt);
}

function tick() {  
  update();
  draw();
}

当你想要停止间隔时

window.clearInterval(myInterval);