动画示例表现不稳定

Question

我是初学者，所以我经常使用 w3schools 示例。他们的优势是提供完整的代码，从 html 到 /html。但是这次失败了。

我尝试使用下面的例子来实现一个适合小孩子的游戏。 https://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

在我的游戏中，用户必须在 object（本例中为红色方块）到达底部之前点击正确的位置。

重复点击按钮会产生不稳定的行为。起初，红色方块会回升，但有时不会，有时会到达底部并反弹回来。如果你点击它几次，相当快，你就会明白我的意思了。

我正在使用 Mozilla Firefox 来测试游戏。

我认为问题出在以 non-linear 方式解释代码这一事实。我尝试使用 while(1) 休息一下，我尝试使用全局变量并在每次移动指令之前进行测试，如 :

if (finished == 1) return;

就好像某处有一个线程突然想到“嘿，我正在向下移动这个东西。让我们再把它发送到屏幕的一半，这样我就可以把它放下了”。即使“finish = 1”也是如此。

我尝试使用计时器，如：

setTimeout(function () {
  if (finished == 1) return;
  }, 100);

没有任何帮助。我没有尝试将游戏的当前状态保存在一堆 cookie 中并重新加载页面。也许我应该这样做，但是没有更好的方法吗？

Answer 1

这里我把timer id设置成全局的，在重新开始之前清除它。换句话说，我停止了之前的动画并开始了一个新的。

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>

<p><button onclick="myMove()">Click Me</button></p> 

<div id ="container">
  <div id ="animate"></div>
</div>

<script>
var id = null;

function myMove() {
  var elem = document.getElementById("animate");   
  var pos = 0;
  clearInterval(id);
  id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++; 
      elem.style.top = pos + "px"; 
      elem.style.left = pos + "px"; 
    }
  }
}
</script>

</body>
</html>

动画示例表现不稳定

Animation example behaves erratically

javascript

multithreading

settimeout