Enhanced Functionality:
Upon clicking the "Tap Here" image button, a function called "GameStart()" is triggered. This function ensures that the main image "Star" descends down the page from the top through an animated sequence using png logic. The proposed animation includes a rotation between left and right to give the impression that the "Star" is descending down a rope.
Action Taken:
I have successfully implemented the function GameStart(), which executes the desired rotational movement of the star when the user taps on the "TAP HERE" image button.
Challenge Faced:
The png sequence does not display as intended while the star moves downward on the page. There are a total of 83 png files located within the folder named "TheStar".
What could possibly be causing this issue? Your assistance is greatly appreciated. I have included the code snippet for your review below.
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>