ave you ever seen a brick breaker game? The player controls a paddle at the bottom of the screen to bounce a ball that breaks blocks at the top of the screen. The player loses when the ball gets past the paddle. This game is simple enough to program, but it can look a bit boring. In this chapter, you’ll learn a few tricks to make the game more colorful and interesting by adding animations and effects.
You’ll use an iterative process: first, you’ll make the basic game; then, you’ll make small improvements to it. The result will be a more professional-looking game that other Scratchers on the Scratch website will think looks awesome.
The following figure shows what the Brick Breaker game looks like before and after you’ve polished it:
Let’s start by drawing what the game should look like. The sketch for Brick Breaker might look something like the following figure.
If you want to save time, you can start from the skeleton project file, named brickbreaker-skeleton.sb3, in the resources ZIP file. Go to https://www.nostarch.com/scratch3playground/ and download the ZIP file to your computer by right-clicking the link and selecting Save link as or Save target as. Extract all the files from the ZIP file. The skeleton project file has all the sprites already loaded, so you’ll only need to drag the code blocks into each sprite.
Make a Paddle That Moves Left and Right
The player will control the paddle by moving the mouse. The ball bounces off the paddle toward the bricks, but the player loses if the ball gets past the paddle.
1. Create the Paddle Sprite
We don’t need the orange cat in this game, so right-click or long press the Sprite1 cat in the Sprite List and select delete from the menu. Then click the Choose a Sprite button and select the green Paddle sprite.
Next, add this code to program the Paddle sprite to make it follow the mouse along the bottom of the Stage:
The Paddle sprite constantly moves 10 steps directly toward the mouse, but its y position stays set to -140.
The Paddle sprite will move only left and right because its y position is always set to the bottom of the Stage (-140).
Because we’re changing the Paddle sprite’s direction, we also need to set the sprite’s rotation style with the setrotationstyle block. The Paddle sprite is programmed to face and move toward the mouse, but we want the sprite to always look flat and horizontal, so the rotation style is set to don'trotate.
Make a Ball That Bounces Off the Walls
The Scratch Sprite Library has several sprites you could use for the ball, but let’s use the TennisBall sprite for this game.
2. Create the Tennis Ball Sprite
Click the Choose a Sprite button in the lower right and select the TennisBall sprite from the Sprite Library window. Add the following code:
When the game starts, the TennisBall sprite starts at position (0, 0) in the center of the Stage; then the TennisBall sprite points down and to the right, toward the Paddle sprite. Next, in the forever loop, the TennisBall sprite starts to move. When the TennisBall sprite touches the edge of the Stage, it will bounce in a new direction.
Make the Ball Bounce Off the Paddle
The TennisBall sprite now bounces off the walls but not off the Paddle sprite. Let’s add that code now.
3. Add the Bounce Code to the Tennis Ball Sprite
Add the following code to the TennisBall sprite so it will bounce off the Paddle sprite. To do so, you’ll need to create a new broadcast message, bounce.
You’ll use the broadcast message in script 1 to control what happens when the ball touches the paddle in script 2.
The pointindirection180-direction code in script 2 might seem a bit mysterious, but this equation just calculates the direction in which the ball will bounce based on the ball’s current direction. If the ball is pointed up and right (45 degrees), then when it bounces off the bottom of a brick, its new direction will be down and right (135 degrees, because 180 – 45 = 135). If the ball is pointed up and left (−45 degrees), then when it bounces off the bottom of a brick, its new direction will be down and left (225 degrees, because 180 – (–45) = 225).
You’ll use this broadcast message again later in the program when you add code to make the ball bounce off the bricks.
Make Clones of the Brick
Now the game needs lots of bricks, so you’ll create one Brick sprite and then clone it using Scratch’s createclone block.
4. Add the Brick Sprite
Click the Choose a Sprite button in the lower right and select the Button2 sprite from the Sprite Library window. Select Button2 from the Sprite List and rename this sprite Brick in the Sprite Pane.
You’ll have to create a new variable by selecting the orange Variables category and clicking the Make a Variable button. Name this variable Score and set it to For all sprites. Then add the following code to the Brick sprite:
At the beginning of the game, the Score variable is set to 0 to remove any points from a previous game. The original sprite hides itself with the hide block, shrinks in size by 50 percent, and moves to the top-left corner of the Stage at (–200, 140). The clones, which we’ll create next, show themselves with the show block.
5. Clone the Brick Sprite
For the Brick Breaker game, we want many rows of bricks. To make the rows of bricks, we’ll move the original sprite across the top of the screen, creating a trail of clones. Add the following code to the Brick sprite. (Be sure not to confuse the setxto and changexby blocks!)
This code will create clones of the Brick sprite for all the bricks in the game, as shown here:
The original sprite moves to the top-left corner of the Stage at (–200, 140) 1. Then the repeat7 block repeatedly moves 65 steps to the right while making clones of the sprite 2 to create a row of seven Brick clones 3. The repeat4 block repeats the row-creating code to create four rows of Brick clones 4. Seven Brick clones multiplied by four rows results in 28 Brick clones. The 29th Brick in the previous figure is the original sprite, not a clone, and we’ll hide it next.
Now all the bricks on the Stage are clones, so you don’t need to duplicate the code under the whenIstartasaclone block for the original sprite.
Imagine if you duplicated the sprites instead of cloning them. Then, if you wanted to change the code, you’d have to change all 28 Brick sprites. Cloning saves you a lot of time!
Make the Ball Bounce Off Bricks
The TennisBall sprite bounces off the Stage edges and the Paddle sprite. Now let’s make it bounce off the Brick clones.
6. Add the Bounce Code to the Brick Sprite
Update the code for the Brick sprite to match this:
When the TennisBall sprite hits a Brick sprite, the Brick sprite broadcasts the bounce message, which brings the TennisBall code into play. The ball’s direction changes, just like it does when it hits the paddle. The program adds 1 to the player’s Score, and then the clone deletes itself.
Make “You Win” and “Game Over” Messages
You need two more sprites for this game, but they won’t appear until the game ends. I created mine with the Paint Editor’s Text tool. If the player breaks all the Brick clones, the program displays the YouWin sprite. If the tennis ball gets past the paddle, the program displays the GameOver sprite.
7. Modify the Tennis Ball Sprite’s Code
When the TennisBall sprite gets past the Paddle sprite—that is, when the TennisBall sprite’s yposition is less than -140—the game is over. Once the game ends, the TennisBall sprite should broadcast a gameover message. Add the following code to the TennisBall sprite.
The gameover broadcast will tell the GameOver sprite to appear. Let’s create the sprite next.
8. Create the Game Over Sprite
Click the Paint button, which appears after you tap or hover over the Choose a Sprite button. When the Paint Editor appears, use the Text tool to write GAME OVER in red.
Select the sprite in the Sprite List and rename it GameOver. Then add this code to the GameOver sprite:
The sprite stays hidden until it receives the gameover broadcast. The stopall block then stops all the sprites from moving as well.
9. Create the You Win Sprite
Click the Paint button, which appears after tapping or hovering over the Choose a Sprite button. In the Paint Editor, use the Text tool to write You win! in green.
Select the sprite in the Sprite List and rename it YouWin. Add this code to the YouWin sprite:
As with the GameOver sprite, the YouWin sprite is hidden until a condition is met. In this game, the player needs to break all 28 bricks to win, so the condition is Score=28. After the YouWin sprite displays, the program stops all the other sprites from moving with stopall.
The Complete Program
The final code for the entire program is shown here. If your program isn’t working right, check your code against this code.
Version 2.0: Polishing Time
The game works well as it is. But now you’ll add some polish. Many of the ideas for the additional features for the Brick Breaker game came from a Nordic Game Indie Night presentation called “Juice It or Lose It!” by Martin Jonasson and Petri Purho. The word juice in game design means polish, or modification of a game in small ways to make it feel more alive and responsive. These tricks can turn a bare-bones game into an exciting, colorful one. A juicy game looks more professional than a plain game. You can watch the presentation where Martin and Petri add juice to their Brick Breaker game at https://www.nostarch.com/scratch3playground/.
You can add many tricks to the Brick Breaker game to make it look polished. Even better, you can use these tricks in any of your games. Before you start coding, take a look at the complete program at https://www.nostarch.com/scratch3playground/.
Draw a Cool Backdrop
Adding an interesting background is a simple way to make the game look cooler. Click the Choose a Backdrop button and select Neon Tunnel. In the Paint Editor, select a color you like and use the Fill tool to fill in random tiles on the side of the tunnel. This can make the tunnel backdrop look more interesting.
Sounds set the mood and make a game feel more alive. With the Stage selected in the Sprite List, click the Sounds tab at the top of the Block Palette. Click the Choose a Sound button (it looks like a speaker) in the lower left. When the Sound Library window appears, select the DanceCelebrate sound.
Then click the Code tab and add this code to the Stage’s Code Area to give the game some background music:
Make the Paddle Flash When Hit
In this step, you’ll make the paddle flash different colors when it is hit by the ball. Add the following code to the Paddle sprite:
The bounce message is broadcast when the TennisBall sprite bounces off a Brick clone or the Paddle sprite. The ifdistancetoTennisBall<60 block makes the color changes happen when the TennisBall sprite bounces off the Paddle sprite (which means the ball will be less than 60 steps away).
Add an Animated Entrance and Exit to the Bricks
The Brick clones’ entrance to the game is rather boring. They just appear as soon as they’re cloned. To animate their entrance, modify the Brick sprite’s code to match this code.
Setting ghosteffect to 100 and then slowly decreasing it makes the Brick clones fade into view rather than instantly appear. The code also sets the Brick clones 10 steps below their final positions and slowly raises them by changing their y position in the repeat block. This makes the Brick clones look like they’re sliding into place.
Now let’s animate the exit of the Brick clones. Modify the Brick sprite’s code so the Brick clones have an animated exit instead of just instantly disappearing.
Now the Brick clones will disappear in an exciting way! The changeeffectby blocks inside the repeat loop will make the Brick clones flash different colors and increase their ghost effect so they become more and more transparent. Meanwhile, the changesizeby-4 block causes the Brick clones to shrink, the changeyby4 block lifts them up, and the turnclockwise15degrees block rotates them. This animated exit is short but fun to watch.
Add a Sound Effect to the Brick Exit
Let’s also make the Brick clones play different sound effects as they disappear. Select the Brick sprite in the Sprite List and then click the Sounds tab above the Block Palette. Click the Choose a Sound button in the lower left and select Laser1 from the Sound Library. Repeat this step to add the Laser2 sound as well.
Modify the Brick sprite’s code to match this code:
When these sounds have been loaded and the previous code has been added, the Brick clones will play a random sound effect as they disappear. The ifthenelse block adds some variety to the program’s sound effects by randomly selecting which sound to play. Each time the TennisBall sprite touches a Brick clone, the program will choose either 1 or 2 at random and then play a different sound as a result.
Add a Sound Effect to the Tennis Ball
Now you’ll add a sound effect for when the TennisBall sprite hits the Paddle sprite. The Pop sound is already loaded for each sprite; all you have to do is update the TennisBall sprite’s code to match this:
Add a Trail Behind the Tennis Ball
Adding a trail of clones behind the TennisBall sprite as it moves around the Stage will give it a cool comet tail. You don’t want to use clones of the TennisBall sprite, because they would respond to the bounce broadcast whenever the original TennisBall sprite bounces. Instead, click the Choose a Sprite button in the lower right. Then select Tennis Ball from the Sprite Library window to create another sprite called TennisBall2. You’ll clone this second ball to create the trail. Unlike a TennisBall clone, the TennisBall2 clones won’t have a whenIreceivebounce block. Add this code to the TennisBall2 sprite:
The only thing the clone is programmed to do is go to the current TennisBall sprite’s location. The tennis ball keeps moving, but the clone stays in place, shrinking and becoming more transparent. At the end of this shrinking and fading animation, the clone is deleted.
You’ll also need to update the TennisBall sprite with this code:
This script makes a new TennisBall2 clone after a 0.1-second wait, creating the trail of tennis balls.
Add an Animated Entrance for the Game Over Sprite
When the player loses, the GAME OVER text simply appears. It would be more exciting if the GAME OVER text had an animated entrance like the Brick clones do. Modify the GameOver sprite’s code to match the following code. First load the Gong sound effect by clicking the Choose a Sound button in the lower left after clicking the Sounds tab. You’ll create a new broadcast message named stopgame that will tell the Paddle and TennisBall sprites to stop moving.
At the start of the game, the GameOver sprite hides itself and sets its ghost effect to 100. When the show block runs at the end of the game, the GAME OVER text is still completely invisible. The animation code inside the repeat10 block makes the GAME OVER text slowly fade in by changing the ghost effect by -10. The turnclockwise15degrees and changesizeby12 blocks rotate and enlarge the text. After a four-second pause, the stopall block ends the program.
To handle the stopgame broadcast message in the TennisBall and Paddle sprites, add the following code to both of these sprites:
The reason you need to use the stopotherscriptsinsprite block instead of stopall is that the program needs to continue running while the GAME OVER text is animated. The stopotherscriptsinsprite block will stop the TennisBall and Paddle sprites from moving but let the other sprites in the program continue running. When the GameOver sprite has finished appearing on the screen, the stopall block will end the entire program.
Add an Animated Entrance for the You Win Sprite
Let’s give the YouWin sprite a fancy, animated entrance too. Update the code in the YouWin sprite to match the following. You will have to load the Gong sound effect by clicking the Choose a Sound button in the lower left after clicking the Sounds tab.
There are two sets of animations, one in the repeat10 block and another in the repeat2 block. The code in the repeat10 block makes the YouWin sprite fade into visibility, enlarges it, and moves it upward. After this short animation plays, the repeat2 block’s code increases the sprite’s brightness to 50, waits a tenth of a second, and then resets the brightness to 0. This makes the sprite look like it’s flashing. After a four-second pause, the stopall block ends the program.
In this chapter, you built a game that
Uses clones to quickly create many copies of the Brick sprite and a trail of TennisBall2 sprites
Controls the Paddle sprite with the mouse instead of the keyboard arrow keys
Shows the player GAME OVER and You win! messages that you created using the Paint Editor’s Text tool
Has several animated entrances and exits for sprites
Uses sound effects and background music to make the game feel more alive
Making the Brick Breaker game provided you with several techniques that you can add to future games. You can include animated entrances, color flashes, and sound effects in many programs to make them more exciting and fun. But it’s always best to make sure the plain, basic version of your game is working first and then start making it look cooler later.
This chapter also introduced cloning, which is a useful technique for creating duplicate sprites while your program runs. As you read on, the games you create will become more sophisticated, but don’t worry: you just have to keep following the instructions step-by-step!