图像没有设置png序列函数的动画

Question

功能：

当用户点击"点击此处"图像按钮时，它将调用"GameStart（）"的功能，这将确保主图像"Star"从页面顶部向下移动。假设恒星通过使用png序列逻辑来设置动画，其建议的动画移动是在左右之间旋转，从而产生"恒星"正在从绳子上爬下来的视觉效果。

我所做的：

也就是说，创建function GameStart()，当用户点击"点击此处"图像按钮时，它调用从左到右旋转星形的方法。

问题：

当星号向下移动页面时，不会调用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对代码进行迭代。因此，每次按下"点击此处"图像按钮时，您都会遍历所有图像文件，并且可能只看到文件夹中的最后一张图像。

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

• 点击
• get元素
• 检查底部是否
• 突破所有元素
• 将图像添加到元素
• 递增计数器
• 增加元素上的距离

现在我想你要做的是：

• Get元素
• 单击时
• 迭代
• 将图像添加到元素
• 增加元素上的距离

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

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>