Я работаю с анимацией, где каждый раз, когда мяч достигает 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
of dy
(2) на каждой итерации. В этом конкретном сценарии maxY/2 - imgBall.offsetWidth/2
равно 225, это означает, что вы никогда не удовлетворите условию как true. Быстрое исправление заключается в том, чтобы изменить проверку следующим образом:
ballY >= maxY / 2 - imgBall.offsetWidth / 2
заменяя ==
на >=
вы можете поймать позицию, даже если она проходит через границу.