Now that we have written and tested the code for the paddles, we need to write code to move the ball. We will be changing the location of the ball with some of our code, and we will create something called collision detection.
First, we need to be constantly calculating the x and y coordinates of the ball based on the velocity of the ball that we set in the global variables. This allows us to make constant updates as long as we are playing the game. To make sure that the x and y coordinates of the ball update as the ball moves, you will type the following lines of code, starting from line 74:
# location of ball is updated ball_x += ball_xv ball_y += ball_yv
Our next job is to code something called collision detection. This means that we can program the computer to know when two objects are hitting one another. We can also tell the computer what we want it to do when the objects collide. In Tiny Tennis, we have three kinds of collisions that we want to detect:
- Collision of the ball with the top and bottom of the screen
- Collision of the paddle with the top and bottom of the screen
- Collision of the ball with the paddle
Next, we will use our if statement to define what happens if the ball hits the top or the bottom of the screen. Basically, we want the ball to bounce back if it hits the top or bottom of the screen. Type the following code starting from line 77 of your tiny.py file:
# collision of ball with top/bottom of screen if ball_y - ball_r <= 0 or ball_y + ball_r >= screen_height: ball_yv *= -1
The first line, beginning with if, basically says If the radius is subtracted from the y coordinate and that is less than or equal to zero OR if the radius is added to the y coordinate and it is greater than the number of the screen height (400), then do something about it.
The second line of the code that comes after the colon tells us what to do: the velocity of the y coordinate of the ball should be in the reverse direction. The second line of code, ball_yv *= -1, means that the velocity of the y coordinate gets reversed because it is multiplied by -1. Any number multiplied by -1 becomes opposite to its original sign, and, in this case, reversing the sign means reversing the direction of the ball.
So, why does this code work? Let's think about it. The top y coordinate is zero. If the ball tries to move past the top, its y value will be less than zero, which means that it will be out of the screen. To make the ball stay on the screen, we change its direction when the y coordinate value is less than zero.
The bottom y coordinate is 400. So, if the ball's y value is greater than 400, then we change the direction of the ball to go back up. We make these directional changes by multiplying the velocity of the ball by -1, resulting in a directional change.
Before moving on, compare your code to this code:
We want the paddle to stop when it reaches the top or bottom of the screen. To make this happen, we need to create a code that will recognize the y value of the paddle and then stop the paddle from moving beyond the two y values that create the screen borders. These two values are 0 for the top of the screen, and 400 for the bottom. Copy the following lines of code into your program, starting from line 81. Check to make sure that your indent level is correct:
# collision of paddle with top/bottom of screen if paddle1_y < 0: paddle1_y = 0 elif paddle1_y + paddle1_h > screen_height: paddle1_y = screen_height - paddle1_h if paddle2_y < 0: paddle2_y = 0 elif paddle2_y + paddle2_h > screen_height: paddle2_y = screen_height - paddle2_h
This code works differently from the ball code because we do not want the paddles to bounce around! Instead, we want the paddles to stop when they hit the top or bottom of the screen. So, you will notice that whenever paddle 1 or paddle 2 goes beyond the barriers of the screen (0 and 400), the value of the paddle is reset to EQUAL the boundary values of 0 or 400, depending on WHERE the paddle is located (is it at the top of the screen or the bottom?). Save your work once you are done with adding this code.
The collision of the ball with the paddles will determine what happens when the ball hits the paddle. There are two paddles, and it will be helpful if you add some comment code using a hashtag to keep track of the code for the left-hand side paddle (paddle 1) and the right-hand side paddle (paddle 2).
Now that we have done some collision detection, let's think about the ball and paddle. When the ball hits the paddle, we want the ball to appear as though it has bounced off of the paddle. Therefore, we need to make sure that the result of the collision between the ball and the paddle is that the ball reverses itself and goes in the opposite direction. This is actually the same behavior that we used to make the ball bounce off the edges of the screen, except now we need to outline all the pieces of paddle 1 and paddle 2. Copy these lines of code into your file:
# left paddle if ball_x < paddle1_x + paddle1_w and ball_y >= paddle1_y and ball_y <= paddle1_y + paddle1_h: ball_xv *= -1 # right paddle if ball_x > paddle2_x and ball_y >= paddle2_y and ball_y <= paddle2_y + paddle2_h: ball_xv *= -1
Take a look at this screenshot, and compare your code:
