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 ...... 问题是蚊子开始非常快速和非常不规则地动画。我希望它改变状态，即每半秒钟。我试过不同的时间段，但总是有同样的效果。

如果我缺少的东西不是那么明显，我可以产生整个事物的jsfiddle。

感谢您提供任何帮助和见解。

这是有问题的游戏，来自我的网站：

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

Answer 1

我认为你应该重新考虑这一部分：

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

我想你想要每一个新的'updateAnimation＆＃39;得到一个不同的蚊子（蚊子[0]，蚊子[1] ..蚊子[i]）。但真正发生的事情是不同的。每次你得到相同的蚊子（蚊子[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;

                  }

      }
   }

游戏中的javascript精灵动画

1 个答案: