游戏中的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;

                  }

      }
   }