游戏中的javascript精灵动画答案

【问题标题】：javascript sprite animation in a game游戏中的javascript精灵动画
【发布时间】：2018-11-21 21:40:00
【问题描述】：

我正在一个小 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

【问题讨论】：

我认为小提琴会有所帮助:)
问题是整个东西有很多资源要上传，声音等等...我会做一个简化的版本，专注于动画问题，但这并不容易.
你好，我上传了游戏并将链接放在原问题中。请让我知道您的想法...
嘿，我看了一下。在 Chrome 中看起来还不错。您是否进行了更改以解决您的问题？或者，它是否特定于某个浏览器？
你好，我可以实现一些随机的蚊子动画，如下所示：在 LoadHandler 函数中： setInterval (updateAnimation, 300);在 playGame() 函数中： findWaitTime = function () { waitTime = Math.ceil(Math.random() * 6); } updateAnimation = function () { findWaitTime();如果（等待时间> 3）{蚊子.state =蚊子.FLYINGRIGHT; } 其他 { 蚊子.state = 蚊子.FLYINGRIGHT1; } } 这是随机的，但还不错。你怎么看？

标签： javascript html animation sprite

【解决方案1】：

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

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

我想您希望每个新的“updateAnimation”都有不同的蚊子（蚊子 [0]、蚊子 [1] ..蚊子 [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;

                  }

      }
   }

【讨论】：

目前实际上只有一只蚊子......我认为问题在于 setInterval 和 setTimeout 的行为和交互方式......如果使用不当会导致混乱......也许有一个优雅而简单的解决方案，但现在我想念它。
我在原始问题中放置了一个指向实际游戏的链接供您考虑。谢谢。