如何设置图像对象在特定步骤后停止移动
How to set Image object to stop moving after certain step
功能:
用户单击 "TAP ME" 图片按钮,此时主图片 ("Circle") 将从页面顶部移动到页面底部。因此,您点击 "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";
功能:
用户单击 "TAP ME" 图片按钮,此时主图片 ("Circle") 将从页面顶部移动到页面底部。因此,您点击 "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";