Why does the ball in my game not stop at the border and bounce back?

Question

I am making a simple pong game and I want the ball to just bounce around the HTML5 canvas, but stay in bounds. It bounces correctly from the right and bottom borders, but goes inside the top and left borders a little bit.

Code:

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

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




    if(ballX >= WIDTH-10){

        ballSpeedX = -ballSpeedX;

    }


    else if(ballX <= 0){

        ballSpeedX = -ballSpeedX;

    }

Here I change the ball's velocity if it is near the borders. To make it work correctly, I have to change the number in the if statements to 8 instead of 0. Why is that? Here is the JFiddle. I can just fix the issue with changing the 0 to 8, but I want to know why this happens.

Answer 1

It happens on all 4 sides of your canvas, however on the right and bottom you have ballX >= WIDTH-10 and ballY >= HEIGHT-10 respectively.

You need to make the same to the other sides as well, like ballY <= 10 for top and ballX <= 10 for left.

This happens for one simple reason - your ball coordinates counted from its' centre. That is the 0, 0 of your ball, like the 0, 0 of your rectangle is the top left corner.

And when you say ballX <= 0 it means the ball will have to touch the boundary with its center point and for that it has to go inside your left border.

Answer 2

As pointed out in the Answer the ball is drawn from its center and adjusting the left and top tests to account for this will almost stop the ball from going into the wall. But it is just luck that has the ball bouncing of the wall without going in. If you change the width of the canvas to 799 and watch the right edge bounce you will see the problem, the ball will go into the wall 4 pixels.

You move the ball 5 pixels in the x direction and then test it for the wall

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

If the width = 100 and the last ball position is 89 you add 5 to give 94. This causes the ballSpeed to be reversed but the ball is still going to be drawn at 94 (4 pixels to far)

When you do a bounce you need to take care of the time between frames. The ball seldom hits the wall at the start or end of the frame but at some time during the frame. In this time it may have moved many pixels away from the wall.

The correct way to do this is to work out when the ball hit the wall and then move it away from the wall the correct amount. This is very simple for linear motion as the distance into the wall is the same as the distance it will have moved away..

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

The same for the left side

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

And do the same for the top and bottom.