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

对于你的while循环条件应该是（bottom> 600）。不需要＆＃39; =＆＃39;
您正在循环外加载变量bottom。它永远不会改变。如果它在循环开始时为610，则它将保持为610，因为它仅在代码的第2行中分配
虽然循环应该是...... bottom =（bottom - 1）+＆＃39; px＆＃39;;
如果你像这样写一个while循环，它会立即执行10次，你的气球将一直停留在600
要解决问题，请坚持到600＆＃39;问题，你应该使用一个计时器： 想想＆＃34;气球应该多快下降＆＃34;。然后你可以在100毫秒内得到一些像＃＆gt; 5像素的数字＆＃34;。 然后编写一个函数...在计时器上调用该函数。

在这里查看setTimeout函数... setTimeout method

Answer 2

使用do循环并非不可能，但我认为你应该放弃这个显式循环，转而使用javascript的计时器/时间线。查看如何使用window.setTimeout() do循环的主体成为回调函数的主体，以及对window.setTimeout（）的尾随调用再次传递回调，延迟为{{1}毫秒。然后，您还可以在自己的处理程序中处理按键事件以进行有意识的移动。

如果你使用显式循环，你只会获得引力，因为循环永远不会结束（正如引力永远不会停止拉动），因此浏览器永远不会有机会调用按键事件处理程序。

你的超时回调运行一次，再次排队，然后终止。这样可以控制浏览器的javascript引擎来处理事件，或者，如果没有别的话，可以在请求的延迟后再次运行回调函数。

Answer 3

在现代JS实现中，

requestAnimationFrame可能比setTimeout更合适。它通常会为动画带来更平滑的效果。

Answer 4

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

因为它看起来很有趣，所以我给你做了一个简单的例子，说明如何使用计时器为气球下降设置动画： 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);

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

4 个答案: