Time for action – hitting the ball with the paddles

We will use an approach, similar to that of checking the boundary, to check the collision:

1. Open the js/pingpong.js file that we used in the previous section.
2. In the moveBall function, we have already reserved the place to put the collision detection code there. Find the line with // check paddles here.
3. Let's put the following code there. The code checks whether the ball is overlapping with either paddle and bounces the ball away when they overlap:

   // Variables for checking paddles
   var ballX = ball.x + ball.speed * ball.directionX;
   var ballY = ball.y + ball.speed * ball.directionY;
       
   // check moving paddle here, later.
   // check left paddle
   if (ballX >= pingpong.paddleA.x && ballX < pingpong.paddleA.x + pingpong.paddleA.width) {
     if (ballY <= pingpong.paddleA.y + pingpong.paddleA.height && ballY >= pingpong.paddleA.y) {
       ball.directionX = 1;
     }
   }
   
   // check right paddle
   if (ballX + pingpong.ball.radius >= pingpong.paddleB.x && ballX < pingpong.paddleB.x + pingpong.paddleB.width) {
     if (ballY <= pingpong.paddleB.y + pingpong.paddleB.height && ballY >= pingpong.paddleB.y) {
       ball.directionX = -1;
     }
   }

4. Test the game in a browser and the ball will now bounce away after hitting the left or right paddle. It will also reset to the center of the playground when it hits the left or right edge of the playground.

What just happened?

We have modified the ball by making it bounce away when it overlaps with the paddles. Let's see how we check the collision between the ball and the left paddle.

At first, we check whether the ball's x position is less than the left paddle's right edge. The right edge is the left value plus the width of the paddle.

Then, we check whether the ball's y position is between the top edge and bottom edge of the paddle. The top edge is the top value and the bottom edge is the top value plus the height of the paddle.

We bounce the ball away if the ball's position passes both the checks. This is how we check it, and it is just a basic collision detection.

We determine that the two objects are overlapped by checking their position and width/height. This type of collision detection works well in rectangle objects but is not good for circles and other shapes. The following screenshot illustrates the issue. The collision areas shown in the following graph are false positive. Their bounding box collides but the actual shapes do not overlap each other. This is a classic and efficient way to check for collisions. It may not be very accurate but its calculation is fast.

For special shapes, we will need more advanced collision detection techniques, which we will discuss later.

Have a go hero

We have placed two paddles on the playground. How about we make the game more challenging by having an alternative paddle in the middle field? It's like having the goalkeeper and forwards in a soccer machine.