Build Pong

Processing Progress
80%

Today we are going to be creating a game called Pong! I’m sure a lot of you have already seen this game. If not, below is an example

Wait, but that isn’t exactly Pong! You are right. We are going to be making a simple version of Pong with only one player.

Rules of Pong

Before we start coding, let’s look at some of the rules of Pong.

  • If the ball hits the paddle, the ball bounces back
  • If the ball hits the right, top, or bottom wall, the ball bounces
  • If the ball hits the left wall, the game is reset, and the ball is returned to the original position
  • The player tries to hit the ball as many times as they can

Starter Code

You can find the starter code for Pong here. Open it and copy and paste the code into Processing. You will notice several parts. Let’s walk through them.

Before Setup

You will notice this huge block of code

xPos = 300
yPos = 300
speedX = random(1, 10)
speedY = random(1, 10)
paddleWidth = 10
paddleHeight = 150
xPaddle = 50
yPaddle = 225
paddleSpeed = 5
ballHeight = 20
ballWidth = 20

The block of code initializes the variables we will need. They are outside of the setup function because they are global variables (used throughout the rest of the code). Please do not modify ANY of these variables. Once you have gotten Pong to start working, then you can fiddle around with the values, but until then, leave them alone.

Setup

Let’s look at the code for the setup function. Recall, the code in the setup function runs only once, at the start of the program.

def setup():
	size(600, 600)

Nothing too exciting, this code just sets up the screen, as we’ve done before. You won’t be modifying this code, so you can leave it alone.

Draw

Now let’s look at the code for the draw function, which we’ve previously referred to as a draw loop as well. Recall, the code in the draw function repeats over and over again, like an “infinite” loop.

def draw():
		global xPos, yPos
		global inGame
		background(0, 0, 0)
		ellipse(xPos, yPos, ballWidth, ballHeight)
		rect(xPaddle, yPaddle, paddleWidth, paddleHeight)
	
	if keyPressed and keyCode == SHIFT:
    		inGame = True
		
	if inGame == True:
    		paddleMove()
    		ballMove()

What is this?? There is so many lines! Let’s breakdown the lines.

global xPos, yPos
global inGame

These two lines, reference the global variables inside the draw function. Anytime you want to assign a new value/update a global variable from within a function, you must declare 

global variable_name

in the function before doing so.

Want a refresher on global variables? Look back at Lesson 2: Events and Movement or talk to a mentor!

ellipse(xPos, yPos, ballWidth, ballHeight)
	rect(xPaddle, yPaddle, paddleWidth, paddleHeight)

The first line creates the ball, and the second creates the paddle.

if keyPressed and keyCode == SHIFT:
    	inGame = True

Pressing SHIFT starts the game. When SHIFT is pressed, the inGame variable switches to True.

if inGame == True:
    	paddleMove()
    	ballMove()

If inGame is True, then both the paddle and the ball will move. You’ll be filling in the code for paddleMove() and ballMove().

Functions to Complete

In this section, we’ll be talking about the code you need to write into the remaining functions. Currently, they are just empty functions we’ve defined for you to fill with code.

We put pass in each of the functions, which allows for your code to run even when the function is empty. You’ll want to remove them from your functions as you fill them in.

paddleMove()

For this part of code, we want to move the paddle up and down. This section will deal with keyEvents, so those will be useful to refresh. Remember we only want the paddle to move up and down and we can check whether the up and down keys are pressed with keyCode == UP and keyCode == DOWN. Don’t forget, you’ll also need to check for keyPressed.

Tips

ballMove()

What we want from this section, is to have the ball move. This should look familiar, you should have done something similar in Lesson 3: Velocity and Collision. This controls how the ball should move.

Tips

wallCollision()

Now this gets interesting. Remember in Lesson 3: Velocity and Collision how we had the ball bounce around if it hit the wall? Well now we are going to do it again. But remember, if the ball goes out of bounds on the left, it shouldn’t bounce back.

Tips

paddleCollision()

Now here is where the code might get difficult. We want the ball to bounce if it hits the paddle. I strongly suggest doing this after wallCollision(), as understanding how wallCollision() works will help with this one.

Tips

  • Understand how exactly collision works
  • Understand the coordinate system
  • Understand what the rect and ellipse code does exactly
  • Understand if statements

resetGame()

This code should reset the game if the ball goes out of bounds. Look at the code before setUp and try to place the ball and paddle at its original starting location.

Putting it All Together

You may notice that paddleCollision(), wallCollision(), and resetGame() are not actually called in draw(). It is up to you to call these functions in the draw function, where/when they are needed. Think about what each function does and how it affects certain objects and how they should move.

Hints

Key Concepts

There are several concepts that are important for building Pong.

One of the trickiest parts of this project is putting together each of the pieces you learned in Lessons 1-3. It might be helpful to isolate certain functionality to break down the project. Try to test individual parts of your code and make sure a function works before you start working on another. For instance, test if ballMove() is working correctly before implementing wallCollision().

Project Extensions

If you finished the game, here are some extensions you can add to your project as an additional challenge!

  • Two players
  • Score system, every time the ball hits the paddle, increase your score
  • Lives, every time the game resets, take away a life until it is game over
  • Levels, at each higher level, the ball velocity increases/becomes more erratic
← Lesson 3 / Lección 3