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

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";