图像没有动画到 png 序列函数

Question

功能：

当用户点击“Tap Here”图片按钮时，会调用“GameStart()”函数，保证主图片“Star”从页面顶部向下移动。假设星星使用 png 序列逻辑进行动画处理，其建议的动画运动是在左右之间旋转，从而产生“星星”正在沿着绳索攀爬的视觉效果。

我做了什么：

即创建function GameStart()，当用户点击“TAP HERE”图像按钮时，它会调用从左到右旋转星星的方法。

问题：

当星星向下移动页面时，不会调用 png 序列。 “TheStar”文件夹中有83个png文件

出了什么问题？？请帮助我已附上代码供您参考

function GameStart() {
  console.log("GameStart");
  $("#Tap").click(function() {
    x = document.getElementById('GameStar').offsetTop;
    if (x < bottomStarLimit) {
      for (var i = 0; i < 100; i++) {
        if (i >= 0 && i < 10) {
          $("#GameStar").attr("src", "lib/Elements/TheStar/Star_0000" + i + ".png");
          x = x + step;
          document.getElementById('GameStar').style.top = x + "px";
        }
        if (i >= 10 && i < 100) {
          $("#GameStar").attr("src", "lib/Elements/TheStar/Star_000" + i + ".png");
          x = x + step;
          document.getElementById('GameStar').style.top = x + "px";
        }
      }
    }

  })
}

#Tap {
  position: absolute;
  width: 600px;
  height: 650px;
  margin-top: 2100px;
  margin-left: 670px;
  outline: 0px;
  z-index: 2;
}

<div id="GamePage" style="width:100%; height:100%;z-index=1;">
  <img id="GameStar" style="position: absolute; top:-6.5em; left:500px; width: auto; height: 150px, z-index:1;" type="image" src="lib/Elements/TheStar/Star_00000.png">
  <input id="Tap" type="image" src="lib/Elements/Tap%20here%20button.png" onclick="GameStart()" />

</div>

Answer 1

您的代码中存在逻辑错误。

在你的点击函数内$("#Tap").click(function()
您使用 forloops 来迭代您的代码。 因此，每次按下“点击此处”图像按钮时，您都会遍历所有图像文件，并且您可能只会看到文件夹中的最后一张图像。

让我展示一下你的代码现在的样子：

• 点击
• 获取元素
• 检查是否底部
• 遍历所有元素
• 向元素添加图片
• 增加计数器
• 增加元素上的距离。

现在我认为你正在尝试做的是：

• 获取元素
• 点击时
• 迭代
• 向元素添加图片
• 增加元素上的距离

这里有一些代码可以帮助你：

var player1 = $('#character'); //out player sprite
var iteratecount = 0; //needs to be outside
$('#move').click(function() { //on clicking the button
  iteratecount++; //the same as iteratecount = iteratecount + 1;
  player1.css('top', (iteratecount * 10) + 'px'); //times 10 because it looks better
  //player1.attr("src", "lib/Elements/TheStar/Star_000" + i + ".png");
});

#character {
  border-radius: 20px;
  background-color: firebrick;
  position: absolute;
  top: 0;
  width: 100px;
  height: 105px;
}
.game {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="move">Move</button>
<div class="game">
  <img id="character" href="" />
</div>