我正在制作一个动画,其中每当球击中maxY
时,它将最后一次跳高一半的高度。但是,当我尝试执行此操作时,它将无法正常工作。
var imgBall = document.getElementById("imgBall");
var count = 0;
var dy = 2;
var dx = 1;
var ballY = imgBall.offsetTop;
var ballX = imgBall.offsetLeft;
imgBall.style.width = 50 + "px";
imgBall.style.height = 50 + "px";
var minX = 0
var maxX = 700;
var minY = 0;
var maxY = 500;
setInterval(ballAnimation, 10);
function ballAnimation() {
if ((count == 0) && (ballY == maxY)) {
dy = dy * -1;
count++;
}
if (ballY == maxY / 2 - imgBall.offsetWidth / 2) {
dy = dy * -1;
}
ballY = ballY + dy;
ballX = ballX + dx;
imgBall.style.top = ballY + "px";
imgBall.style.left = ballX + "px";
}
这是
if (ballY == maxY / 2 - imgBall.offsetWidth / 2)
失败的部分。我试过测试,当我写if (ballY == maxY / 2)
时,它将完全正常。 最佳答案
该错误具有逻辑性质,您每次迭代都会增加(或减少)ballY
(2)的dy
。在这种特定情况下,maxY / 2 - imgBall.offsetWidth / 2
为225,这意味着您永远不会满足真实条件。一个快速的解决方法是按如下方式更改支票:
ballY >= maxY / 2 - imgBall.offsetWidth / 2
将
==
替换为>=
,即使它越过边界,您也可以抓住该位置。