5

我正在编写一个 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. 我也想通过增量时间，但我知道该怎么做。

4

3 回答 3

18

只需使用上次更新的时间维护一个变量，并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”。这取决于浏览器。

于 2012-12-22T21:24:27.887 回答
3

这就是我使用的：

let lastTick = performance.now()

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

  update(delta)
  render(delta)

  window.requestAnimationFrame(tick)
}

window.requestAnimationFrame(tick)

于 2018-02-02T16:21:43.083 回答
3

想给我两分钱。通常我在我的游戏中使用这个 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 一样），因此您可以将时间缩放到帧时间。

于 2019-03-06T17:21:19.293 回答