Javascript游戏循环-如何知道循环外的函数经过了多少时间

Javascript Game Loop - How to know how much time has passed in an function outside the loop

本文关键字：循环 函数 过了 多少 时间 游戏 何知道 Javascript      更新时间：2023-09-26

你必须知道，我对这个用javascript开发的新游戏还是个新手。

首先我有这个游戏循环

GameLoop = {
  //Insert more members here if needed
  id : null,
  run : function(options) {
    var now,
        dt       = 0,
        //last     = timestamp(),
        last     = Date.now(),
        slow     = options.slow || 1, // slow motion scaling factor
        step     = 1 / options.fps || 60,
        slowStep = slow * step,
        update   = options.update,
        render   = options.render;

    function frame() {
        //now = timestamp();
        now = Date.now();
        dt = dt + Math.min(1, (now - last) / 1000);
        while(dt > slowStep) {
            dt = dt - slowStep;
            update(step);
        }
        render(dt / slow);
        last = now;
        this.id = requestAnimationFrame(frame, options.canvas);
    }
    this.id = requestAnimationFrame(frame);
  },
  pause : function() {
      cancelAnimationFrame(this.id);
  }
};

我用互联网上的一些文档和教程创建了它。我想知道的是，我怎样才能得到一个函数，每1秒或每60帧改变一个状态变量。例如，我可以在Draw方法中包含以下内容：

//Moves enemy towards the player 30px every second
function moveEnemy() {
    if(one Second Has Passed Since Last Time We Moved) {
        enemy.xPosition += '30px';
    }
}

这只是我想要实现的一个假设例子，我希望有经验的人能帮助我。如果你需要更多信息，请告诉我，或者如果我出于某种原因需要更新我的问题。

谢谢！

如果你的要求是每秒移动敌人一次，那么不需要在帧循环内。

var enemyMoverInterval = setInterval(
    function moveEnemy() {
        enemy.xPosition += '30px';
    }
}, 1000);

编辑：如果你真的想把它放在游戏循环中。。。

var enemyLastMoved = new Date();
GameLoop = {
    // ...
    function frame() {
        // ....
        if (now - enemyLastMoved > 1000) {
            enemy.xPosition += '30px';
            enemyLastMoved += 1000;
        }
        // ...

或者一种混合方法：

var enemyMustMove = false;
setInterval(function() {
    enemyMustMove = true;
}, 1000);

在游戏循环中：

        // .... 
        if (enemyMustMove) {
            enemyMustMove = false;
            enemy.xPosition += '30px';
        }

PS enemy.xPosition += '30px'可能无法执行您想要的操作。

相关文章：