控制敵人的速度RequestAnimationFrame

Question

我需要幫助以發現如何執行此操作

基本上，我試圖建立一個像吃豆人這樣的游戲，我有一個矩陣來定義塊，吃豆人，敵人和球在哪里，這是我的矩陣。

   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-",
  "------------------------------"
];

為了發現我的吃豆人與塊和球之間的細菌，我發現“-”和“ o”的位置在哪里，每個按鍵的移動始終是我在創建地圖時就給出的比例，例如10，這種方法效果很好。 但是，現在我需要給敵人“ e”添加動畫，並且我希望它們像我按任意鍵一樣隨機移動，如果我嘗試以與pacman相同的速度增加動畫功能的位置，則速度要快，我要控制該速度，但我也希望他在矩陣上始終移動1個塊，在這種情況下，我知道降低速度的唯一方法是降低位置增量，但我不能像我說的那樣做，因為我希望他每次移動10或縮放

嘗試在我的敵人移動函數中使用SetTimeout並嘗試給出超時以請求animationframe，但首先似乎是一種不好的方法，然后它有點像馬車

這是我的按鍵功能

     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

現在，每次運行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頻率。

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