使用do和while循环将图像移动到屏幕上

Question

我正在学习JavaScript，并一直在开发一个简单的游戏，它本质上是一个气球，你可以在屏幕上移动。在很多帮助下，我成功地完成了按键等操作，气球的动作非常完美。

现在我想要模拟重力，如果气球图像高于一个值，让气球在屏幕上移动一个像素，我尝试使用以下do while语句来实现这一点：

var balloon = document.getElementById("balloon");
var bottom = parseInt (balloon.style.bottom, 10);

do {
    balloon.style.bottom = bottom + 50 + 'px'; 
}
while (bottom = bottom > 600) // Gravity

我想要做的是，如果底部值小于600，检查代码是否工作，让气球在页面1像素上移动。

我已经删除了所有我用来使气球移动的代码。

如果我能看到气球慢慢地在页面上移动，我会非常高兴，因为至少我知道，当我把这个运动加回来时，我可以换个值。

Answer 1

其他答案解决了使用显式循环尝试动画的问题。正如他们所指出的，你应该使用计时器。

因为它看起来很有趣，所以我给您做了一个简单的例子，说明如何使用计时器来动画气球坠落：http://jsfiddle.net/dmuu9w97/。

关键代码如下：

// Make balloon fall 1px every 10ms
setInterval(function() {
    var bottom = getBalloonBottom();
    if (bottom > 0)
        balloon.style.bottom = bottom - 1 + "px";
}, 10);

Answer 2

1. 对于while循环条件，应该是(bottom>600)。不用'=‘
2. 您正在将变量底部加载到循环之外。它永远不会改变。如果循环开始时是610，则保持610，因为它仅在代码的第2行中分配。
3. 循环可能是....bottom =(底部- 1) + 'px'；
4. 如果您编写了这样的while循环，它将立即执行10次，而您的baloon将始终停留在600。
5. 为了解决‘困在600’的问题，你应该使用一个计时器：想一想“气球落得有多快”。然后，您可以得到一些数字，如“在100毫秒内5像素”。然后编写一个函数.在计时器上调用这个函数。

检查这里的setTimeout函数。setTimeout法

Answer 3

使用do循环并不是不可能的，但我认为您应该放弃这个显式循环，转而使用javascript的定时器/时间线。了解如何使用window.setTimeout()，其中do循环的主体变成回调函数的主体，以及对window.setTimeout()的尾部调用，以延迟1000/your-chosen-framerate毫秒的方式再次传递回调。然后，您还可以在自己的处理程序中处理按键事件，以进行有意的移动。

如果使用显式循环，则只会得到重力，因为循环永远不会结束(就像重力从未停止拉出一样)，因此浏览器将永远没有机会调用keypress事件处理程序。

超时回调运行一次，再次排队并终止。这将控制返回到浏览器的javascript引擎来处理事件，或者，如果没有其他的，在请求的延迟之后再次运行回调函数。