游戏中的JavaScript精灵动画

javascript sprite animation in a game

本文关键字：精灵 动画 JavaScript 游戏      更新时间：2023-09-26

我正在制作一个简单的 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...问题是蚊子开始动画的速度非常快，而且非常不规则。我希望它改变状态，即每半秒一次。我尝试了不同的时间段，但它总是相同的效果。

我可以制作整个事情的jsfidd，如果我缺少的东西不是那么明显的话。

感谢您的任何帮助和见解。

这是我的网站上有问题的游戏：

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

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

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

我想你希望每个新的"更新动画"都有不同的蚊子（蚊子[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;
                  }
      }
   }
相关文章：