Question

我需要帮助来发现如何做到这一点

基本上我试图建立像pacman这样的游戏，我有一个矩阵定义了块，pacman，enemys和球的位置，这是我的矩阵。

   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和块和球之间的关系，我发现＆＃34; - ＆＃34;和＆＃34; o＆＃34;并且每个按键上的移动始终是我在开始创建地图时给出的SCALE例如10，这种方法很有效。但是现在我需要为敌人制作动画片＆＃34; e＆＃34;我希望他们移动就像当我按下一个键然后随机，如果我尝试增加我的动画功能的位置与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变得更慢，但没有改变我想要的位置增量的数量，我有一个动画就像当我按一个键？

Answer 1

现在，每次moveEnemys运行时都会调用anima函数。正如你所提到的，这意味着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发生的频率。

Answer 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);
}

控制敌人的速度RequestAnimationFrame

2 个答案: