游戲中的javascript精靈動畫

Question

我正在一個小型Javascript游戲中制作精靈的簡單動畫，一種蚊子在向右飛行時會改變狀態。 這些狀態對應於我的磁貼紙中的兩個不同圖像。

到目前為止，我一直在這樣做，但是動畫非常不規則：

for (var i = 0; i < mosquitos.length; i++) {
  var mosquito = mosquitos[i];

  setInterval (updateAnimation, 500);
  mosquito.update();

  // rest of code non-relevant to animation here...

然后，稍后：

function updateAnimation () {
  next();

  function next () {
    mosquito.state = mosquito.FLYINGRIGHT1;
    setTimeout (previous, 500);

    function previous () {
      mosquito.state = mosquito.FLYINGRIGHT;
    }
  }
}

這兩個狀態當然是FLYINGRIGHT和FLYINGRIGHT1 ...問題是蚊子開始非常快速，非常不規則地活動。 我希望它更改狀態，即每半秒更改一次。 我嘗試了不同的時間段，但效果始終相同。

如果我所缺少的不是那么明顯，我可以對整個事情做個簡單的描述。

感謝您的幫助和見解。

這是我網站上的游戲：

http://www.retroinvaders.net/laurasworld/src/laurasTriviaLevels.html

Answer 1

我認為您應該重新考慮這一部分：

var mosquito = mosquitos[i];
setInterval (updateAnimation, 500);

我想您希望每個新的“ updateAnimation”都獲得不同的蚊子（mosquitos [0]，mosquitos [1] .. mosquitos [i]）。 但是真正發生的事情卻有所不同。 每次您得到相同的蚊子（mosquitos [i]）。 這是因為setInterval（）函數的異步行為。

function updateAnimation () {
  next();

  function next() {
           // every time, mosquito is equal to mosquitos[i]
           // and NOT mosquitos[0], then mosquitos[1] ...
           mosquito.state = mosquito.FLYINGRIGHT1;
           setTimeout (previous, 500);

          function previous()
                  {
                       mosquito.state = mosquito.FLYINGRIGHT;

                  }

      }
   }