gpt4 book ai didi

javascript - 如何设置图像对象在特定步骤后停止移动

转载 作者:行者123 更新时间:2023-11-28 01:20:54 24 4
gpt4 key购买 nike

功能:

用户点击“TAP ME”图像按钮,此时主图像(“圆圈”)将从页面顶部移动到页面底部。因此,您点击“TAP ME”图像按钮的速度越快,它垂直向下移动的速度就越快。

我做了什么:

我已经创建了上述功能所需的必要 html、css 和函数。这意味着,当用户快速点击“TAP ME”图像按钮时,用户能够让圆圈垂直向下移动。

问题:

圆圈图像没有停止点,因此当用户点击“TAP ME”图像按钮时,圆圈将继续垂直向下移动。例如,我怎么可能说,为圆形图像设置一个底部限制,这样当用户不断点击“TAP ME”图像按钮时,圆形图像将无法继续向下移动?因此,想将圆形图像设置为在剩余页面的大约 1/4 处停止向下移动

我已附上代码供您阅读:

function GameStart() {
console.log("GameStart");
//Method to enable star to decrease when 'tap' button is tapped
var step = 20,
counter = 0,
timer = 30;
var x = document.getElementById('GameStar').offsetTop;
x = x + step;
document.getElementById('GameStar').style.top = x + "px";

//Set CountDown Function
CounterInterval = setInterval(function() {
counter = counter + 1;
timer = timer - 1;
$('#GameTime').html(timer);
if (counter == 30 && x >= 100) {
clearInterval(CounterInterval);
$("#GamePage").hide();
$("#Congratulations").show();
} else if (counter == 30 && x < 100) {
counter = 0;
timer = 30;
clearInterval(CounterInterval);
$("#GamePage").hide();
$("#GameOver").show();
}
}, 2000)
}
#GameStar {
position: absolute;
top: -6.5em;
left: 500px;
width: auto;
height: 1050px;
z-index: 1;
}
#Tap {
position: absolute;
width: 600px;
height: 650px;
margin-top: 2100px;
margin-left: 670px;
outline: 0px;
z-index: 2;
}
<div id="GamePage" style="background-image: url(lib/Elements/Background.png); background-repeat: no-repeat; width:100%; height:100%;z-index=1;">
<audio src="lib/Elements/happy.mp3" loop autoplay>Your browser does not support this audio format</audio>
<img id="GameStar" type="image" src="lib/Elements/The%20Star.png">
<input id="Tap" type="image" src="lib/Elements/Tap%20here%20button.png" onclick="GameStart()" />
</div>

最佳答案

你能不能只添加一个简单的 if 语句来检查它是否在更新它的位置之前到达末尾?

 var bottomlimit = <1/4 of remaining page>
var x = document.getElementById('GameStar').offsetTop;
if(x < bottomlimit) x = x + step;
document.getElementById('GameStar').style.top = x + "px";

关于javascript - 如何设置图像对象在特定步骤后停止移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33952986/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com