Question

功能

当用户点击“点按此处”图像按钮时，它将调用“GameStart（）”功能，这将确保主图像“Star”从页面顶部向下移动页面。星星假设通过使用png序列逻辑进行动画制作，其提议的动画运动是在左右之间旋转，给出“星星”正在攀爬绳索的视觉效果。

我做了什么：

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

ISSUE：

当星星向下移动页面时，不会调用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>

图像不是png序列函数的动画

1 个答案: