анимация мяча, если

Question

Я работаю с анимацией, где каждый раз, когда мяч ударяется о 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), это будет работать совершенно нормально.

Answer 1

Ошибка имеет логический характер, вы увеличиваете (или уменьшаете) ballY из dy (2) на каждой итерации. В этом конкретном сценарии maxY / 2 - imgBall.offsetWidth / 2 равно 225, это означает, что вы никогда не выполняете условие как истинное. Быстрое решение состоит в том, чтобы изменить чек следующим образом:

ballY >= maxY / 2 - imgBall.offsetWidth / 2

заменив == на >=, вы можете поймать позицию, даже если она переходит границу.