Goal: Let’s create Pong!
About !
Pong is one of the first computer games ever created. It is a simple game that involves
a ball and a paddle. The goal is to use your paddle, which you control by sliding up and
down on the left side of the screen, to hit the ball back in the direction it came from. If
the ball misses your paddle, you lose. Below is a screen shot of the Pong game we’ll
create.
To start the game, we’ll click the green flag and the ball will start bouncing wildly. To
avoid losing the game, we need to use the blue paddle to ricochet the ball back. If the
ball touches the gray area, the game is over.
Before we get started!
Before we get started, let’s understand a few things.
This exercise uses Scratch, a programming environment designed by a school called
MIT, which stands for Massachusetts Institute of Technology (it’s a really good
1 of 12
university). The exercise uses Scratch 2.0, which runs in your web browser. The Scratch
environment is found at: http://beta.scratch.mit.edu/projects/editor/.
What you see should look like the figure below. Areas of the screen are marked with
names. This is important, since we’ll be using these names throughout this exercise.
There are a few main areas we need to know about:
• Menu area: At the top left is the Menu Area. This is where we’ll save our work and
open projects that we’re currently working on.
• Game area: This is the Game area. When we play
What is a Sprite
our game, this is the area where we’ll play it.
A sprite is a computer graphic
• Sprites area: This is the Sprites area. Here, we see that may be moved on-screen
a list of graphics used in our program.
and manipulated.
• Tabs area: At the top middle is the Tabs area. Here,
we’ll switch Work areas to do different things, like
draw new Sprites and create commands.
• Work area: This is the area where we’ll tell the Sprite what to do. This is our
programming area.
• Script area: The Script area is where we’ll choose different kinds of commands and
build a script that tells our sprites what to do.
• Command area: The Command Area is where we’ll use specific commands to create
scripts that control our program.
Tabs
Menu Area
These tabs allow you to switch to
different Work areas, including to
create scripts, create new Sprites, and
new sounds.
The Menu Area is where
we'll save our work and open
projects we're working on.
Script Area
Game Area
The Script Area is where you'll
choose different types of
commands that tells your Sprite
what to do.
This white area is the Game Area
where your program runs when you
click the Green Flag.
Work Area
This large gray area is the Work
Area for the Sprite selected in
the Sprites area. You can see
the current Sprite selected in
the top right corner of this area.
Here, you will create commands
to control the Sprite in the
Game area.
Sprites Area
The Sprites Area contains the
graphics that you'll manipulate in
your program.
Command Area
The Command Area is where you'll
use specific commands to tell the
Sprite what to do. Many commands
create a script.
Important Note
After each step (ideally more often), I strongly encourage you to save your work. To do
this, go to the Menu area, select the File menu, and choose “Export to local drive.” Enter
2 of 12
a filename and select ok. This way, if for some reason your browser crashes, you won’t
lose everything you’ve done.
Step 1 - Create the background!
By default, every new scratch program begins with the Scratch Cat. We don’t want to
use Scratch Cat for this game, so let’s delete him. Simply right click on the Scratch Cat
in the Sprites area of the screen, and select delete, as shown.
Next, we’ll create our own background. Click on Stage in the Sprites area right next to
the Scratch Cat you just deleted. You can see the Stage area in the diagram above.
Then, in the Tab area at the top of the screen, click on the Backdrops tab, as shown.
Now, we can draw our background, which will be gray on the left side of the screen and
white on the right side.
To do this, first click on the rectangle in the toolbar tab (circled in red). Next, we need to
change the color to gray so we draw a gray rectangle. In the color palette at the bottom
of the screen, you see a paint can and a pencil with two color boxes next to them. First,
click the paint can and then from the color palette on the right, select one of the gray
colors. Second, click the pencil and then from the color palette on the right, select the
same gray color. This is shown in the diagram.
3 of 12
Now we want to draw our rectangle on the left side of the screen. Be sure the rectangle
in the toolbar is still selected. Now, in the big white area to the right of the toolbar, draw
a rectangle. When you’re finished, you should have something that looks like what’s
show below. When you’re finished, the Game area should look like what you see below.
4 of 12
Step 2 - Create the Sprites!
Now we’re going to create the Sprites for the game. First, let’s create the blue paddle.
1. In the Sprites area, click the paintbrush next to “New sprite:”, as shown below. In the
Work area, you’ll notice it looks the same as when we created the backdrop, except
now this area is called “Costumes.” We are going to create a new Sprite.
2. Click the rectangle in the tool palette. Change the color of the rectangle to blue, by
selecting the pencil at the bottom of the page and choosing a blue color from the
color palette.
5 of 12
3. Making sure the rectangle is selected in the tool palette, draw a rectangle. When you
do this, you’ll see the blue rectangle appear in the game area. Make it whatever size
you want.
4. Before we create the ball, we have to center the rectangle to make sure we can
control it properly. In the tool palette, click the center icon. You’ll see the Work area
has two black lines. Simply click directly in the center of the blue rectangle. This is
shown below.
In the figure below, you can see how the paddle is now perfectly centered. If you didn’t
center the paddle, you may not be able to control is accurately. When we’re finished,
uncenter it to see what happens.
5. Next, let’s create the ball. Follow the step 4 steps above, except draw a green circle
instead of a rectangle.
6. Finally, in the Game area, drag the clue rectangle and green circle to where you
want them to be placed when you start the game. The figure below shows this.
Finally, we’re ready to start programming.
6 of 12
Step 3 - Create the Paddle Script!
To start the game, we’re going to click the green flag in
the Game area. When we do this, we want the ball to
start bouncing. We also want to control the paddle
using the mouse. Whenever we move the mouse up
and down, we want the paddle to follow. To do this, we
have to build a simple script.
About a Script
A script is a small computer
program that tells the computer
to do something. Building the
script is like building with
Legos. You snap pieces of
script together. These pieces of
1. In the Sprites area, click on Sprite1 (the blue
a script are called commands.
paddle)
As you drag commands onto
2. In the Work area, click the Scripts tab.
the Work area, be sure they
snap into place where you want
3. Build your script to look like the following by
dragging commands from the Command area onto them.
the Work area. Note that the colors for each of the
commands correspond to the colors in the Script area. This should help you find the
commands you need.
7 of 12
4. Now, we can run our program. Click the green flag in the Work area. Move the
mouse. You should see the blue paddle move with you.
Step 4 - Create the Ball Script!
Now we want to make the ball bounce when we start the game. For the ball, we need to
do two things. First, we want to make the ball bounce around the screen and if it
touches gray, we want the game to end. Second, if the ball touches the paddle, we want
it to bounce off the paddle in the opposite direction.
Let’s get the ball bouncing.
1. From the Event script, drag the “When <Flag> clicked” into the Work Area.
2. Position the ball where you want it to start when you click the green flag. From the
Motion script, drag go to x: y: and snap it to the green flag command, as show
below. Now, click the green flag to run the script and you’ll notice the ball will start in
the same position. I chose 168 and -18.
3. Now we want the ball to start bouncing randomly. To do this, we’ll point the ball in a
random direction by adding a new Motion command, as shown in the figure. To
make sure the ball bounces back and forth, not up and down, we’ll pick numbers
between 45 and 135. Try changing the numbers to see how the ball will start
bouncing differently.
8 of 12
4. Now, let’s add some motion. We want the ball to bounce until it hits the gray area. So
we need to create what’s called a loop. A loop tells a program to do something,
forever, until something happens. In this case, we want the ball to bounce forever
until it touches the gray area. So add the following commands.
A. Create a forever loop.
B. Inside the forever loop, move the ball 8 steps. (Increase this number to make it
bounce faster or decrease it to make it bounce slower.)
C. if the ball hits an edge, tell it to bounce.
D. Create an if statement.
a. if the ball touches gray then
b. say “You Lose!” for 2 seconds
c. and stop the script
When you’re finished, the script should look like what you see below. Click the green
flag. Yeah! The ball bounces and the paddle moves. But the ball doesn’t bounce off the
paddle yet, and you always lose your game.
Next, let’s make sure the ball bounces back when it hits the blue paddle. Make sure the
ball sprite (Sprite2) is still selected. We’re going to add to the script.
1. Add an if statement to the Work area.
A. If the ball touches Sprite1 (the paddle) then
9 of 12
B. point in some other direction. In this case, the other direction is 360 minus it’s
current direction. That will make the ball bounce back the same way it came.
Why? 360 is the full radius of a circle. So if we take 360 minus its current
direction, we’ll send it back in the opposite direction. This is shown below.
C. If you play the game for a while, you’ll notice it’s not very fun because the ball
follows a consistent pattern. To make it a bit more interesting, we’ll add some
randomness each time the ball bounces off the paddle. Remember, when we
started, we told the ball to bounce in some direction between 45 and 135. Now,
each time the ball hits the paddle, let’s tell it to once again bounce in some
random direction between 45 and 135. The new script is shown below.
10 of 12
When you’re finished, the script should look like what you see below. Click the green
flag. Yeah! The ball moves and bounces off the paddle. A real game of pong.
Step 5 (Optional) - Keep Score!
Congratulations. You’ve created your first computer program. The Pong game. If you
want to experiment further, have the game keep score each time the ball hits the
paddle. To do this:
1. Click the Data script and click Make a Variable. Name the variable score.
2. Directly under “When <Flag> Clicked”, add “set score to 0.”
3. In the if statement you wrote when the ball touches Sprite1 (paddle), add “change
score by 1”, as shown below. Run the script and you’ll see your score.
Congratulations! You’ve created Pong.
11 of 12
Step 6 (Optional) - Experiment!
Here are some things to experiment with if you’re interested in adding to your game of
Pong.
1. Add another paddle and make it a two paddle game.
2. Make Pong a two player game. Hint: To do this, get rid of the gray area, move the
blue paddle to the far right, and create a new paddle on the far left. Instead of using
the mouse to control either of the paddles, move paddles up and down using keys
on the keyboard.
3. For the single game version of Pong, add extra balls once you hit a certain score,
such as 10. Hint: You’ll need to use the clone command for the ball sprites.
12 of 12