PLAY BREAKOUT
Start Scratch
Download Instructions
Need Help?
How to Play
Click the Green Start flag.
Press the space bar to start the ball moving. When the ball hits a block, the block disappears,
then the ball bounces back toward the bottom of the screen and you score 10 points.
Move the paddle with the arrow keys to block the ball. Don’t let the ball get past the paddle or the
game is over!
If the ball hits two blocks they both disappear and you get 20 points.
Score as many points as you can before the ball gets past the paddle.
1
Now, flip the page and build this game for yourself!
BREAKOUT!
Breakout is a classic game
that has been around for
thirty years.
What You Will Learn
q Use the Broadcast Function to cause
one sprite to tell others what to do.
q Use the Clone function to make game
pieces (Sprites) multiply when the game
starts.
q Use if, then , else blocks when forever
blocks cannot be used.
The broadcast block sends a message like
“DoSomething” to every sprite and to the
system itself. The When I receive block tells
a sprite that it should act when it receives a
particular broadcast message.
2
DoSomething
DoSomething
BREAKOUT! OVERVIEW
This project has two parts.
Part One is setting the
background and creating
sprites. Once this is done,
the scripts for the sprites
can be written in Part Two.
PART 1 – SET UP THE GAME
When you finish the set up the stage will
look like this.
STEPS for setting up the game.
1.  Create the end of game background
2.  Create the paddle sprite
3.  Create the end of game sprite
4.  Create the ball
5.  Create the block(s)
PART 2 – BUILD THE SCRIPTS
There are 11 scripts to build for this game.
1.  Two scripts for the paddle sprite
2.  One script for the bottom sprite
3.  Five scripts for the ball sprite
4.  And three scripts for each block sprite
3
ADD BACKGROUNDS
In this game there are two
separate backgrounds.
One for regular play and
one for signaling the game
is over.
START HERE
CREATE THE GAME OVER BACKGROUND
q Below the stage, to the left of the
sprites, click on the Stage area.
q On the backdrop tab, click on the ‘Paint
new backdrop’ icon. This will create a
second backdrop.
q Click the ‘Text’ button.
q Click on the red square in the color
grid, place the mouse anywhere in the
painting screen and begin typing.
q Type “Game Over!!! Try Again!”
4
ADD GAME ELEMENTS
In this game you need the
following Sprites:
a Paddle, a Ball, a bottom of the
stage, and a Block sprite.
SET UP PAINT TO CREATE THE PADDLES
To start, you need ot set up the paint tool.
q Click the Paint new sprite icon.
q To make the size of the paddle very
precise, follow these next few steps:
o  In the bottom right corner of the
sprite painting screen, click the
‘Convert to vector button. The
buttons to create a sprite in this
mode will appear on the right
side of the screen.
o  Also in the bottom right of the
screen is a zoom button. Click
this button twice to zoom to
400% so you can easily see the
drawing grid.
5
ADD THE PADDLE SPRITE
To draw the paddle use the paint
tool bar!
DRAW THE PADDLE
q On the tool bar, click the Rectangle
button.
q In the color palette, select the black or
one of the darker gray colors.
q Click and drag to create a rectangle
that is about eighteen blocks long and
one-half block high
q Name this Sprite ‘Paddle’.
6
The Paint
Tool Bar
ADD THE BALL SPRITE
Now add the ball using the same
techniques you used for the
paddle.
ADD THE BALL SPRITE ELEMENT
q Once again, click the Paint new sprite
button, then click the Convert to vector
button.
q This time you do not need to click the
zoom (make sure the zoom level says
(100%).
q Customize your game by picking a color
of your choice for the ball.
q Click the Ellipse button. A feature of this
button is that if you hold the SHIFT key
while you draw your shape, it will
automatically cause the shape to be a
perfect circle. So hold the SHIFT key
down and draw a circle approximately the
size of the circle shown here.
q Name this Sprite ‘Ball’.
7
ADD THE END GAME SPRITE
Now draw a sprite to determine
when the game has ended. This
is similar to the goal sprite
created in Penalty Kick.
ADD THE END GAME SPRITE ELEMENT
q As with the paddle, click the Paint new
sprite button, then click the Convert to
vector button. Again, make sure you
are zoomed to 100%.
q Click the color pallet so both of the
squares to the left are black
q Now, simply draw a rectangle that is
about four squares high. Draw it so
long that it extends off of the edge of
the drawing area (and the stage as
well).
q Then, on the stage, click and drag the
rectangle to the bottom of the stage.
q Name this Sprite ‘Bottom’.
q When you are finished the stage
should look like this.
8
ADD A BLOCK SPRITE
The last game element are the
blocks. When you finish the
stage will look like this.
ADD THE BALL GAME ELEMENT
q Finally, using almost exactly the same
steps used to create the paddle, create
a single game block.
q Click the Paint new sprite button.
q In the bottom right corner of the sprite
painting screen, click the Convert to
vector button. The buttons to create a
sprite in this mode will appear on the
right side of the screen.
q Also in the bottom right of the screen is
a zoom button. Click this button twice
to zoom into the drawing grid (zoom to
400%).
q Draw the sprite white initially and we
will color it next using a new technique.
q Using the Rectangle button, draw the
sprite approximately eight squares long
and three squares high.
9
ADD A BLOCK SPRITE
The last game element are the
blocks. When you finish the
stage will look like this.
FINISH THE BLOCKS GAME ELEMENT
q Color the sprite
o  Click the Color a shape bu1on on the right side of the screen. o  Click red in the color pale1e. o  Then go up to the white rectangle and click inside of it. The rectangle should turn red but have a thin red border around it as shown. And a red block should appear somewhere on your stage. 10
Part 2 - Build the Scripts
PART 2 – BUILD THE SCRIPTS
There are 11 scripts to build for this game.
-  Two scripts for the paddle sprite
-  One script for the bottom sprite
-  Five scripts for the ball sprite
-  And three scripts for each block sprite
11
ADD PADDLE CONTROLS
POSITION THE PADDLE TO START THE
GAME AND MAKE THE PADDLE MOVE
LEFT AND RIGHT
START HERE
INSTRUCTIONS
q Just as with PONG and Penalty Kick, the
player must control a paddle to try and hit
a ball.
q Click on the Paddle sprite.
q Create a script to make the Paddle move
to the Right.
q Create a script to make the Paddle move
to the Left.
HINT: For this game use 15 steps (or -15
steps) in the Move block.
q Wrap the scripts in a Forever block and
add the When Clicked block to enable the
script.
q After you’ve built the scripts, test it! Does
the paddle move to the left and right?
q Finally, this script will position the paddle
for the start of each game.
q Add blocks to the existing script to move
the paddle to the start position, x = 0 and
y = -140.
12
BLOCKS YOU WILL NEED
ADD PADDLE CONTROLS
CREATE A “BROADCAST” MESSAGE
INSTRUCTIONS
The broadcast message lets other sprites
know that the something has happened. For
this game, other sprites need to know when
the ball hits the paddle.
q To do this you must create the broadcast
message. Drag a broadcast block to the
script area, click on the black down arrow
and click ‘new message…’
q Type in ‘Ball has hit paddle’ and click OK.
q Now, create a script so that a message is
broadcast “Ball has hit the paddle” when
the ball hits the paddle.
Note: Start this when the Space Key is
pressed to start play.
13
BLOCKS YOU WILL NEED
ADD CONTROLS FOR BOTTOM SPRITE
CREATE A BROADCAST MESSAGE
INSTRUCTIONS
q There are other sprites that also need to
know when the ball hits the bottom of the
stage.
q Make sure you select the bottom sprite.
q This broadcast message script is just like
the one created for the paddle. Drag a
broadcast block to the script area, click on
the black down arrow and click ‘new
message…
q Type in ‘Ball has hit bottom’ and click OK.
q Now, create a script so that a message is
broadcast “Ball has hit bottom” when the
ball hits the bottom sprite.
Note: Start this script when the Space
Key is pressed.
14
BLOCKS YOU WILL NEED
ADD CONTROLS FOR THE BALL
THERE ARE 5 SCRIPTS NEEDED TO
CONTROL THE BALL:
1)  POSITION THE BALL AND
BACKGROUND TO START THE GAME
2)  MAKE THE BALL MOVE
3)  END THE GAME WHEN THE BALL HITS
THE BOTTOM SPRITE
4)  BOUNCE THE BALL WHEN IT HITS THE
PADDLE
5)  BOUNCE THE BALL, MAKE A SOUND,
AND CHANGE THE SCORE WHEN THE
BALL HITS A BLOCK.
START THE GAME
INSTRUCTIONS
q Make sure you select the ball sprite.
q Create a script to show start the game.
The script must:
•  Ensure that the main game background
is showing (the white screen named
backdrop 1)
•  Make the ball show
•  Center the ball at the bottom of the
screen over the paddle ( x = 0, Y = -120)
•  Point the ball up.
HINT: Point in Direction 10, do NOT use
direction 0.
15
BLOCKS YOU WILL NEED
ADD CONTROLS FOR THE BALL
MAKE THE BALL MOVE
BLOCKS YOU WILL NEED
INSTRUCTIONS
q Create a second script to launch the ball.
The script must:
•  Start the ball moving when the space
key is pressed.
•  Bounce off of all of the stage’s edges.
END THE GAME
INSTRUCTIONS
q In an earlier step, you created a script that
will broadcast a message if the bottom
senses it has been hit by the ball. Now
create a script that:
•  Receives the broadcast message “Ball
has hit bottom”
•  Hides the ball
•  Changes the background to the ‘Game
Over’ background
•  Broadcasts a message ‘Game Over’
•  Stops play
16
BLOCKS YOU WILL NEED
ADD CONTROLS FOR THE BALL
BOUNCE THE BALL OFF THE PADDLE
INSTRUCTIONS
q Earlier, you created a script that
broadcasts a message if the paddle
senses it has been hit by the ball (the
player hit the ball!). Now create a script
that: makes a sound and changes the
direction of the ball (makes the ball bounce
off the paddle) when it receives the
broadcast message “Ball has hit paddle”, .
q To make it more real, set the script so that
if the ball is coming down from the left of
the screen (direction greater than 90 but
less than 180), it bounces randomly back
up to the right. And if the ball is coming
down from the right (direction greater than
-180 but less than -90, make it bounce
randomly up to the left.
17
BLOCKS YOU WILL NEED
ADD CONTROLS FOR THE BALL
BALL HAS HIT A BLOCK
BLOCKS YOU WILL NEED
INSTRUCTIONS
q There are 4 parts to this final script.
1.  Senses the broadcast message “Ball
has hit a block” (create message now)
2.  Make a noise
3.  Change the score by 10
4.  Bounce the ball away from the block.
q Think about how you managed the ball
bouncing off the paddle as you attempt to
create this script.
q Sometimes the ball can get up behind the
blocks and hit them from above, so this
script should also change the direction of
the ball whether the ball hits the block from
below or from above. This is challenging
so here are some guidelines to form your
script:
•  If the ball hits the block from the bottom
left, direction 0 to 90, bounce the ball in
direction 135.
•  If the ball hits the block from the bottom
right, direction 270 to 360, bounce the
ball in direction 225.
•  If the ball hits the block from the top right,
direction 180 to 270, bounce the ball in
direction 315.
•  If the ball hits the block from the bottom
left, direction 90 to 180, bounce the ball in
direction 45.
18
Ball approaches from lower le>, block disappears and ball bounces off at direcAon 135 Ball approaches from upper right, block disappears and ball bounces off at direcAon 315 ADD CONTROLS FOR THE BALL
BLOCKS YOU WILL NEED
BALL HAS HIT A BLOCK
There are 4 cases to consider 1
0 DirecAon between 0O and 90O Change to 135O 270 90 Case 1 is when the ball is traveling upward in a direcAon between 0O and 90O. To make the ball bounce, point the ball in the direcAon of 135o 180 The last 3 cases are below 4
1 0 DirecAon between 270O and 360O 2 Change to 225O 270 90 Change to 45O Change to 315O DirecAon between 180O and 270O DirecAon between 90O and 180O 2
3
19
3 180 4 ADD CONTROLS FOR THE BLOCKS
CLONE THE BLOCK
BACKGROUND
q In Part One of this project, you only
created a singe red block. Cloning gives
you the ability to copy this one sprite and
create a row of red blocks.
INSTRUCTIONS
q Using the blocks to the left, create a script
that, at the start of the game:
•  Places the sprite at position x=-200 and
y=40
•  Then creates 8 clones of the sprite, each
time changing the x-position of the sprite
by 40.
HINT: You will use the repeat loop for this
function.
20
BLOCKS YOU WILL NEED
ADD CONTROLS FOR THE BLOCKS
BROADCAST “BALLHAS HIT A BLOCK”
BLOCKS YOU WILL NEED
INSTRUCTIONS
q Now, create a script that, when the space
key is pressed, tells the blocks to be ready
for the ball to hit it and then broadcast a
message when it does.
END THE GAME
INSTRUCTIONS
q Finally, create a script so that when the
‘Game Over’ message is broadcast by the
ball, the remaining blocks are hidden.
21
BLOCKS YOU WILL NEED
TEST THE CLONE SCRIPT
TESTING YOUR WORK IS AN
IMPORTANT PART OF BUILDING YOUR
GAME.
TEST
INSTRUCTIONS
q Go to the red block sprite. Click on the
script that begins with the green start flag
and creates the clones. Red blocks should
appear across the stage. (OR, click the
green flag!)
q If they do not appear approximately as
shown, please make sure that the red
block was drawn per the directions and
that the script to create the clones looks
exactly like this:
22
CREATE ANOTHER ROW OF BLOCKS
Duplicate the original red block sprite to
create other blocks of various colors.
DUPLICATE THE ROW OF RED BLOCKS
INSTRUCTIONS
q Right click on the red block sprite and
select Duplicate. Another red block sprite
will appear. If you click on the new Sprite
and look in its Scripts tab, you will see that
it has all the scripts of the original. TO
change the color of the new block:
1. 
2. 
3. 
4. 
Click on the new sprite and click on its
costumes tab.
Then click on the ‘Color a Shape’ button
on the left side of the screen.
Then click on the color pallet at the
bottom….click a new color.
Roll the mouse up to the red block, click
on it and see that it changes to the new
color you selected.
q Now modify the clone scripts for the new
blocks. Go to the script section for the new
sprite. Change the y position of the new
sprite to 60.
23
CREATE MORE ROWS OF BLOCKS
ALMOST DONE!
CREATE MORE ROWS
INSTRUCTIONS
q Click the green flag. You should see two
rows of blocks.
Repeat of the prior steps steps four more
times until you have six rows of blocks. Each
time choose a different color and make sure
you change the script for each new sprite to
add 20 to the y position!
NOW PLAY THE GAME!!!!!
24
THINGS TO TRY
FINISHED?
q See if you can speed up the ball
+ Add your project to the Step-by-Step Studio:
q Experiment with other colors for the ball
+ Send us a picture of your completed project
and we will post it with your code.
and blocks.
http://scratch.mit.edu/studios/703356
+ In class? Help a neighbor!
+ Working at home? Show off your work to
your parents!
25
Thanks to the folks at Creative Computing.
http://scratched.gse.harvard.edu/guide/index.html
Creative Commons License
THIS WORK IS LICENSED UNDER A CREATIVE COMMONS
ATTRIBUTION-SHAREALIKE 4.0 INTERNATIONAL LICENSE.