控制敌人速度 RequestAnimationFrame答案

【问题标题】：Control enemys speed RequestAnimationFrame控制敌人速度 RequestAnimationFrame
【发布时间】：2016-07-01 21:17:15
【问题描述】：

我需要帮助来了解如何做到这一点

基本上我试图构建一个像吃豆人这样的游戏，我有一个矩阵，它定义了方块、吃豆人、敌人和球在哪里，这是我的矩阵。

   var MeshDataPac =
[
  "------------------------------",
  "-ooooooooooooo--ooooooooooooo-",
  "-o----o------o--o------o----o-",
  "-o----o------o--o------o----o-",
  "-oooooooooooooooooooooooooooo-",
  "-o----o--o----------o--o----o-",
  "-oooooo--ooooo--ooooo--oooooo-",
  "------o------ -- ------o------",
  "------o-              -o------",
  "------o-  ----  ----  -o------",
  "-     o-  -    e   -  -o     -",
  "------o-  ----------  -o------",
  "------o-              -o------",
  "------o-  ----------  -o------",
  "-ooooooooooooo--ooooooooooooo-",
  "-o----o------o--o------o----o-",
  "-ooo--oooooooo--ooooooooooooo-",
  "---o--oooo          oooo------",
  "---o--o--o-----------o-o--o---",
  "-oooooo--ooooo--oooooo-o--ooo-",
  "-o-----------o--o-----------o-",
  "-oooooooooooooooXoooooooooooo-",
  "------------------------------"
];

为了发现我的 pacman 和积木和球之间的碰撞，我发现“-”和“o”的位置在哪里，每次按键的移动始终是我在开始创建地图时给出的 SCALE例 10，这有点效果。但是现在我需要为敌人“e”设置动画，并且我希望它们像我按下一个键但随机地移动，如果我尝试使用与 pacman 相同的方式增加我的动画功能上的位置，那么速度会很快，我想要控制那个速度，但我也希望他总是在我的矩阵上移动 1 个方块，在这种情况下我知道降低速度的唯一方法是降低位置增量，但我不能像我说的那样这样做，因为我希望他每次移动 10 或 SCALE

尝试在我的enemyMove 函数中使用SetTimeout 并尝试为请求动画帧设置一个超时时间，但起初似乎是一种不好的方法，然后它变得有点错误

这是我的按键功能

     function handleKeyPressed(e) {

   var PacMan = scene.getObjectByName('PacMan');
   gameSong.play();
   switch(String.fromCharCode(e.which))
   {
     case "w": if(!detectaColisao(PacMan.position.x, PacMan.position.y + SCALE))
          PacMan.position.y += SCALE;
       break;
     case "a": if(!detectaColisao(PacMan.position.x - SCALE, PacMan.position.y))
         PacMan.position.x -= SCALE;
       break;
     case "s": if(!detectaColisao(PacMan.position.x, PacMan.position.y - SCALE))
         PacMan.position.y -= SCALE;
       break;
     case "d": if(!detectaColisao(PacMan.position.x + SCALE, PacMan.position.y))
         PacMan.position.x += SCALE;
       break;

   }
}

function anima()
{
  moveEnemys();
  var delta=clock.getDelta();
  orbitCamera.update(delta);
  requestAnimationFrame( anima);
  renderer.render(scene, camera);

}

我怎样才能让 moveEnemys 变慢但不改变我想要的位置增量的数量，我有一个动画，就像我按下一个键时一样？

【问题讨论】：

标签： javascript performance animation

【解决方案1】：

现在，每次运行 anima 时都会调用 moveEnemys 函数。正如你所提到的，这意味着moveEnemys 发生了太多次，导致你的敌人移动得太快。尝试用这个替换你的 anima 函数：

var enemyTimer = null;
function anima() {
  if (enemyTimer == null) {
      // The enemy timer has not been created yet
      // Making the second argument 1000 means moveEnemys will get called
      // once per second
      enemyTimer = setInterval(moveEnemys, 1000);
  }
  var delta=clock.getDelta();
  orbitCamera.update(delta);
  requestAnimationFrame( anima);
  renderer.render(scene, camera);
}

这样，第一次调用 anima 时，您设置了一个间隔，导致 moveEnemys 每秒发生一次。根据需要修改 1000 以更改 moveEnemys 出现的频率。

【讨论】：

【解决方案2】：

requestAnimationFrame 回调将当前时间戳作为第一个参数，您应该利用它以所需的帧速率运行您的应用程序。这就是 IMO 大多数游戏的主循环应该是这样的：

var _prevTime = 0.0;
var _at = 0.0;
var _stepSize = SOME_NUMBER;
var _frame = 0;

function loop(newTime){
    newTime /= 1000;
    var tick = newTime - _prevTime;
    _prevTime = newTime;

    tick = Math.max(tick, SOME_MAX_TICK); // important: prevent slow updates from spiraling out of control.

    _at += tick;
    while (_at > _stepsize){
        _at -= _stepsize;
        _frame += 1;
        CALL_UPDATE_HERE();
    }

    CALL_DRAW_HERE();

    requestAnimationFrame(loop);
}

【讨论】：