Skip to Main Content

Scratch Programming Language: Build a Simple Game, Part 1

Building a Simple "Pong" Game in Scratch: Introduction

For this project, we'll build a few "stacks" of code blockss, to control the motion of the elements of the game: the ball, the paddle, and the "floor" of the play area.

 

Getting Started

  1. Use your browser to visit scratch.mit.edu.
  2. Join Scratch
    In the top right, click Join Scratch,
    Note: You will not be able to save your projects, unless you either join Scratch or download the software.

                     –OR–
     
    in the top left, click Create.


OK, we’re ready to create a program!

The Scratch screen appears below:

Building a Simple "Pong" Game in Scratch: Getting Started

Clear the Work Area

Before we begin, it's a good idea to clean up any items that we are not going to use in our game.

Clear the Tutorials

Scratch tutorials

If you simply clicked Create, there will probably be a tutorial window in the middle of the screen.

In the upper right corner of the tutorial, click the X to clear it.

Clear the Sprite

Scratch cat sprite

Unless you plan to use the Scratch Cat sprite, it makes sense to clear it from your sprites area.

  1. In the lower right, click to select the Scratch Cat sprite, if not already selected.
    Note: A sprite that is selected will have a purple border around it and an X in its upper right corner.
  2. In the upper right corner of the sprite, click the X to clear it.


Backdrops

Backdrops icon

Scratch provides a good variety of backdrops, or you can upload your own.

Selecting a Backdrop

  1. In the lower right corner, click the Backdrops icon.
  2. Browse the available backdrops and click a backdrop thumbnail to add it to your project.
  3. To change to a different backdrop, repeat the above two steps.
Upload your own backdrop

Upload a Backdrop

  1. In the lower right corner, hover over the Backdrops icon.
  2. From the menu which appears, select the Upload Backdrop icon.
  3. Browse your computer for the image you wish to use.
  4. Double-click the image to upload it.

Sprites (Characters and Objects)

Sprites icon

Selecting Sprites

  1. In the lower right corner, click the Sprites icon.
  2. Browse the available backdrops and click a sprite thumbnail to add it to your project.
  3. To add more sprites to your program, repeat the above two steps.

Upload a Sprite

  1. In the lower right corner, hover over the Sprites icon.
  2. From the menu which appears, select the Upload Sprite icon.
  3. Browse your computer for the image you wish to use.
  4. Double-click the image to upload it.

Building a Simple "Pong" Game: Step One: A Backdrop and a Sprite

We need to choose a backdrop, then add a ball to the game and to begin defining how it behaves.

Backdrops icon

Add the Backdrop

  1. In the lower right, click the Backdrop icon.
  2. Select a suitable backdrop. It will appear on the stage.

Select a Sprite

  1. Sprites icon
    In the lower right, click the Sprites icon.
  2. Choose a sprite that can serve as a ball (ball, basketball, apple, etc.).
    Your sprite will appear in the lower right and on the stage.

Add Movement

  1. In the lower right, ensure that the ball sprite is selected.

     
  2. [move 10 steps] code block
    In the upper left, under Motion, drag the Move (10) steps code block into the middle. It will be applied to the selected sprite.
  3. To "test drive" the code block, click the code block to see your sprite move!
    Note: You can edit the number of "steps" in the code block. A higher number will make the ball move faster.

Make It "Bounce"!

  1. Compound code block of two commands
    In the upper left, under Motion, drag the if on edge, bounce code block into the middle and position it just below the Move (10) steps code block. It should "click" into place, like two magnets placed close to one another.
  2. To "test drive" the code block, click the code block multiple times, to see your sprite move and bounce off the walls!
Why does my program stop?
      You click the Move (10) steps code block, and your sprite moves once, but that's it! Why doesn't it continue?
      The code blocks in Scratch are commands, for the computer to execute. Once a command executes it goes to the next command (if any) and executes that. When it runs out of commands, it stops.
      We need to find a way to make that part of the program "execute" over and over. Most programmers would use what's called a "loop" to accomplish this. We have a code block that can accomplish this for us.

Make It "Run" Without Stopping!

For the game to work, the ball has to bounce around without stopping. To accomplish this, we need to make the code blocks execute over and over. We'll use what's commonly referred to as a "loop."

  1. move 10 steps block and if on edge bounce block both inside forever loop
    From the left, under Control, click the forever code block and drag it over the two existing blocks. The forever code block will turn gray as it slides over the other two. Make sure that the new block "contains" both of the other two blocks before letting go.
  2. To "test drive" the new change, click the forever code block, to see your sprite move and bounce off the walls!
Changing point in direction number

Make the Ball Bounce at Angles

  1. From the left, under Motion, click and drag the point in direction (90) code block into place on top of the stack of blocks.
  2. Click the number 90 and use the pop-out window to change the value to 45.

Add a Start Command

Ball - complete first block of code

This last step completes our first block of code. We still have to add some more elements to our game, such as a paddle and a way to keep score.

  1. At the left, under Events, find the
    When (green flag) clicked code block.
  2. Drag it out and position it on top of the group of blocks.
  3. Above the stage, click the Flag icon to
    start ( ). Click the Stop sign icon to stop the game ( Stop sign icon ).



That's it! Your first block of code is done! Go to the next tab to continue building your game!

Staff LADR