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

Question

功能：

用户单击 "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>

Answer 1

你能不能只添加一个简单的 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";

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

How to set Image object to stop moving after certain step

html

javascript

jquery

onclick