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.为什么？ Here是JFiddle。我可以通过将0更改为8来解决问题，但我想知道为什么会发生这种情况。

Answer 1

它出现在画布的所有四个边上，但是在右下角分别有ballX >= WIDTH-10和ballY >= HEIGHT-10。

你也需要对其他方面做同样的事情，例如ballY <= 10代表top，ballX <= 10代表左派。

出现这种情况的原因很简单 - 您的球坐标从其中心开始计算。这是你球的0, 0，就像你的矩形的0, 0是左上角一样。

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

Answer 2

正如答案所指出的那样，球从中心抽出并调整左侧和顶部测试以解释这将几乎阻止球进入墙壁。但这只是运气，让球在没有进入的情况下反弹。如果你将画布的宽度改为799并观察右边反弹，你会看到问题，球将进入墙壁4像素。 / p>

您将球沿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;
}

并对顶部和底部做同样的事情。

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

2 个答案: