This tutorial is the third tutorial in a series of five Pygame tutorials:
- Pong Tutorial 1: Getting Started
- Pong Tutorial 2: Adding the Paddles
- Pong Tutorial 3: Controlling the Paddles
- Pong Tutorial 4: Adding a Bouncing Ball
- Pong Tutorial 5: Adding a Scoring system
- Extra: Pygame How To’s?
Our aim is to add the bouncing ball to our Pong game. To do so we will create a new class called Ball.
Bouncing Algorithm
To understand how to implement a bouncing algorithm, it is essential to understand how the computer controls the trajectory of a sprite (e.g. ball) on the screen. Arcade games are based on a frame based animation where the screen is refreshed every x milliseconds. Moving sprites are positionned using (x,y) coordinates and have a velocity vector (Vx,Vy) which specifies the delta in pixels to apply to the (x,y) coordinates of a sprite between two frames:
- frame n: Sprite Coordinates: (x,y)
- frame n+1: Sprite Coordinates: (x+Vx,y+Vy)
As the sprite moves across the screen, it may need to bounce against another sprite or against the edge of the screen.
Let’s investigate how the velocity vector is affected when the sprite bounces against vertical and horizontal walls/edges.
Right Wall/EdgeLeft Wall/EdgeTop Wall/EdgeBottom Wall/Edge
Ball Class
Below is the code for the Ball class. You will need to copy this code in a new Python file called ball.py. The update() method of this class will be called for each frame of the main program loop. It moves (changes the (x,y) coordinates of) the ball using its velocity vector.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
import pygame from random import randint BLACK = (0,0,0) class Ball(pygame.sprite.Sprite): #This class represents a ball. It derives from the "Sprite" class in Pygame. def __init__(self, color, width, height): # Call the parent class (Sprite) constructor super().__init__() # Pass in the color of the ball, its width and height. # Set the background color and set it to be transparent self.image = pygame.Surface([width, height]) self.image.fill(BLACK) self.image.set_colorkey(BLACK) # Draw the ball (a rectangle!) pygame.draw.rect(self.image, color, [0, 0, width, height]) self.velocity = [randint(4,8),randint(-8,8)] # Fetch the rectangle object that has the dimensions of the image. self.rect = self.image.get_rect() def update(self): self.rect.x += self.velocity[0] self.rect.y += self.velocity[1] |
Adding the ball to the game
In the main.py file, we will first import the Ball class. (See line 4) We will then create an object called ball using the Ball class. (See lines 25 to 27) We will add this object to the all_sprites_list group of sprites. (See line 35)
We will also apply the bouncing algorithm to check if it needs to bounce against any of the four walls. (See lines 67 to 75)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
# Import the pygame library and initialise the game engine import pygame from paddle import Paddle from ball import Ball pygame.init() # Define some colors BLACK = (0,0,0) WHITE = (255,255,255) # Open a new window size = (700, 500) screen = pygame.display.set_mode(size) pygame.display.set_caption("Pong") paddleA = Paddle(WHITE, 10, 100) paddleA.rect.x = 20 paddleA.rect.y = 200 paddleB = Paddle(WHITE, 10, 100) paddleB.rect.x = 670 paddleB.rect.y = 200 ball = Ball(WHITE,10,10) ball.rect.x = 345 ball.rect.y = 195 #This will be a list that will contain all the sprites we intend to use in our game. all_sprites_list = pygame.sprite.Group() # Add the paddles and the ball to the list of objects all_sprites_list.add(paddleA) all_sprites_list.add(paddleB) all_sprites_list.add(ball) # The loop will carry on until the user exits the game (e.g. clicks the close button). carryOn = True # The clock will be used to control how fast the screen updates clock = pygame.time.Clock() # -------- Main Program Loop ----------- while carryOn: # --- Main event loop for event in pygame.event.get(): # User did something if event.type == pygame.QUIT: # If user clicked close carryOn = False # Flag that we are done so we exit this loop elif event.type==pygame.KEYDOWN: if event.key==pygame.K_x: #Pressing the x Key will quit the game carryOn=False #Moving the paddles when the use uses the arrow keys (player A) or "W/S" keys (player B) keys = pygame.key.get_pressed() if keys[pygame.K_w]: paddleA.moveUp(5) if keys[pygame.K_s]: paddleA.moveDown(5) if keys[pygame.K_UP]: paddleB.moveUp(5) if keys[pygame.K_DOWN]: paddleB.moveDown(5) # --- Game logic should go here all_sprites_list.update() #Check if the ball is bouncing against any of the 4 walls: if ball.rect.x>=690: ball.velocity[0] = -ball.velocity[0] if ball.rect.x<=0: ball.velocity[0] = -ball.velocity[0] if ball.rect.y>490: ball.velocity[1] = -ball.velocity[1] if ball.rect.y<0: ball.velocity[1] = -ball.velocity[1] # --- Drawing code should go here # First, clear the screen to black. screen.fill(BLACK) #Draw the net pygame.draw.line(screen, WHITE, [349, 0], [349, 500], 5) #Now let's draw all the sprites in one go. (For now we only have 2 sprites!) all_sprites_list.draw(screen) # --- Go ahead and update the screen with what we've drawn. pygame.display.flip() # --- Limit to 60 frames per second clock.tick(60) #Once we have exited the main program loop we can stop the game engine: pygame.quit() |
Collision Detection
The next addition to our game is to detect when the ball hits/collides with one the two paddles. If it does, we will make it bounce using a random new direction.
So first, let’s add a new method called bounce() to our Ball class.
Then, in the main program loop, let’s add some code to detect if the ball sprite collides with the paddleA or paddleB sprites. If it does we will call the bounce() method of the Ball class.
ball.pymain.py
We have added the bounce() method on lines 30 to 32.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import pygame from random import randint BLACK = (0, 0, 0) class Ball(pygame.sprite.Sprite): #This class represents a ball. It derives from the "Sprite" class in Pygame. def __init__(self, color, width, height): # Call the parent class (Sprite) constructor super().__init__() # Pass in the color of the ball, and its x and y position, width and height. # Set the background color and set it to be transparent self.image = pygame.Surface([width, height]) self.image.fill(BLACK) self.image.set_colorkey(BLACK) # Draw the ball (a rectangle!) pygame.draw.rect(self.image, color, [0, 0, width, height]) self.velocity = [randint(4,8),randint(-8,8)] # Fetch the rectangle object that has the dimensions of the image. self.rect = self.image.get_rect() def update(self): self.rect.x += self.velocity[0] self.rect.y += self.velocity[1] def bounce(self): self.velocity[0] = -self.velocity[0] self.velocity[1] = randint(-8,8) |
We have added on lines 77 to 79 the code to detect a collision between the ball and the paddles.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
# Import the pygame library and initialise the game engine import pygame from paddle import Paddle from ball import Ball pygame.init() # Define some colors BLACK = (0,0,0) WHITE = (255,255,255) # Open a new window size = (700, 500) screen = pygame.display.set_mode(size) pygame.display.set_caption("Pong") paddleA = Paddle(WHITE, 10, 100) paddleA.rect.x = 20 paddleA.rect.y = 200 paddleB = Paddle(WHITE, 10, 100) paddleB.rect.x = 670 paddleB.rect.y = 200 ball = Ball(WHITE,10,10) ball.rect.x = 345 ball.rect.y = 195 #This will be a list that will contain all the sprites we intend to use in our game. all_sprites_list = pygame.sprite.Group() # Add the paddles and the ball to the list of sprites all_sprites_list.add(paddleA) all_sprites_list.add(paddleB) all_sprites_list.add(ball) # The loop will carry on until the user exit the game (e.g. clicks the close button). carryOn = True # The clock will be used to control how fast the screen updates clock = pygame.time.Clock() # -------- Main Program Loop ----------- while carryOn: # --- Main event loop for event in pygame.event.get(): # User did something if event.type == pygame.QUIT: # If user clicked close carryOn = False # Flag that we are done so we exit this loop elif event.type==pygame.KEYDOWN: if event.key==pygame.K_x: #Pressing the x Key will quit the game carryOn=False #Moving the paddles when the use uses the arrow keys (player A) or "W/S" keys (player B) keys = pygame.key.get_pressed() if keys[pygame.K_w]: paddleA.moveUp(5) if keys[pygame.K_s]: paddleA.moveDown(5) if keys[pygame.K_UP]: paddleB.moveUp(5) if keys[pygame.K_DOWN]: paddleB.moveDown(5) # --- Game logic should go here all_sprites_list.update() #Check if the ball is bouncing against any of the 4 walls: if ball.rect.x>=690: ball.velocity[0] = -ball.velocity[0] if ball.rect.x<=0: ball.velocity[0] = -ball.velocity[0] if ball.rect.y>490: ball.velocity[1] = -ball.velocity[1] if ball.rect.y<0: ball.velocity[1] = -ball.velocity[1] #Detect collisions between the ball and the paddles if pygame.sprite.collide_mask(ball, paddleA) or pygame.sprite.collide_mask(ball, paddleB): ball.bounce() # --- Drawing code should go here # First, clear the screen to black. screen.fill(BLACK) #Draw the net pygame.draw.line(screen, WHITE, [349, 0], [349, 500], 5) #Now let's draw all the sprites in one go. (For now we only have 2 sprites!) all_sprites_list.draw(screen) # --- Go ahead and update the screen with what we've drawn. pygame.display.flip() # --- Limit to 60 frames per second clock.tick(60) #Once we have exited the main program loop we can stop the game engine: pygame.quit() |
Next Step?
The final touch consists of adding a scoring system:
Pong Tutorial using Pygame:Adding a Scoring System
LMC Simulator
Flowchart Studio
Python Syntax