为什么我的比赛中的球不停在边界并反弹？

Question

我正在做一个简单的乒乓球游戏，我希望球只是在HTML5画布上弹跳，但不要超出范围。 它可以从右边界和下边界正确反弹，但在上边界和左边界内会有点跳动。

码：

if(ballY<=0){
     ballSpeedY = -ballSpeedY;   
    }

    else if(ballY>=HEIGHT-10){
     ballSpeedY = -ballSpeedY;   
    }




    if(ballX >= WIDTH-10){

        ballSpeedX = -ballSpeedX;

    }


    else if(ballX <= 0){

        ballSpeedX = -ballSpeedX;

    }

在这里，如果球靠近边界，我将更改球的速度。 为了使其正常工作，我必须将if语句中的数字更改为8而不是0。为什么？ 这是JFiddle。 我可以通过将0更改为8来解决问题，但是我想知道为什么会这样。

Answer 1

它发生在画布的所有4个面上，但是在右侧和底部分别有ballX >= WIDTH-10和ballY >= HEIGHT-10 。

您还需要在另一侧制作相同的内容，例如， ballY <= 10表示顶部， ballX <= 10表示左侧。

发生这种情况的原因很简单-您的球坐标是从其中心算起的。 这是0, 0你的球，像0, 0您的矩形的是左上角。

当您说ballX <= 0这意味着球必须以其中心点接触边界，并且该球必须进入您的左边界内。

Answer 2

正如“答案”中指出的那样，球是从球的中心抽出的，并调整左侧和顶部的测试以解决此问题，这几乎会阻止球进入墙壁。 但是，幸运的是，球没有进来就可以弹跳到墙壁上。如果将画布的宽度更改为799，然后观看右边缘弹跳，您会发现问题所在，球将进入墙壁4像素。

您将球在x方向上移动5个像素，然后对其进行墙面测试

ballX += ballSpeedX;
if(ballX >= width - 10){
    ballSpeedX = -ballSpeedX;
}

如果width = 100并且最后一个球的位置是89，则将5加到94。这将使ballSpeed反转，但是仍然要以94（4像素远）绘制球

弹跳时，您需要注意帧之间的时间。 球很少在框架的开头或结尾处碰到墙壁，但在框架期间的某个时候很少碰到墙壁。 在这个时候，它可能已经从墙上移动了许多像素。

正确的方法是找出球撞到墙壁后再将其移离墙壁正确的距离。 这对于线性运动非常简单，因为到墙壁的距离与它要移开的距离相同。

ballX += ballSpeedX;
if(ballX >= width - 10){
   var dist = ballX - (width - 10); // how far into the wall
   ballX = (width - 10) - dist; // the distance into the wall is the distance 
                                // the ball has moved away from the wall
   ballSpeedX = -ballSpeedX;
}

左侧也一样

if(ballX <= 10){
   var dist = 10 - ballX; // how far into the wall
   ballX = 10 + dist; // the distance into the wall is the distance 
                      // the ball has moved away from the wall
   ballSpeedX = -ballSpeedX;
}

并对顶部和底部执行相同的操作。