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

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;
}

如果宽度= 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;
}

对顶部和底部也这样做。