时间戳

首页 > 解决方案 > 带有 if 的球动画

javascript - 带有 if 的球动画

问题描述

我正在制作一个动画，每次球击中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)它时它会完全正常工作。

标签： javascriptanimation

解决方案

该错误具有逻辑性质，您在每次迭代时增加（或减少）（2）ballY。dy在这个特定的场景中maxY / 2 - imgBall.offsetWidth / 2是 225，这意味着你永远不会满足条件为真。一个快速的解决方法是按如下方式更改检查：

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

即使它越过边界，替换==为您也可以捕获该位置。>=

推荐阅读