Programming a Game

In this lab, you'll program an app that you can share with others and play on your phone.

On this page, you'll build a simple game in which the player tries to click a character that's jumping around.

Work with a Partner If you're doing this in class, you should be working with a partner. It's not just for students; professional programmers work with partners too. If each of you is in front of a computer, one of you should keep Snap! open, and the other should keep this lab page open. If you are sharing a computer, use two browser tabs.

Making a Character Move

  1. Click here to load a starter project. To open Snap! directly, you can always go to http://snap.berkeley.edu/run.
Alonzo character This is Alonzo, the mascot of our programming language, Snap!. You should see him on the stage, the white area in the top right corner of the Snap! window.

picture of Snap! window with white rectangle at right labeled 'Stage' and yellow character on that stage labeled 'Sprite named Alonzo'

You're going to program a game in which the goal is to click on Alonzo as he's moving around.

  1. As a first step, make Alonzo jump someplace else on the stage when he's clicked. Drag these two blocks into the scripting area (the center area of the window), snap them together, and make sure the correct menu options ("clicked" and "random position") are selected.
    Palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables

    You can find blocks in palettes with their matching color. Drag one block underneath another to snap them together.

    when I am clicked, go to [random position] go to () block with menu open showing 'random position', 'mouse pointer', and 'center'. The mouse pointer is hovering over 'random position'.
    CRD-2.B.1

    This is a computer program, also known as software. It's a very short one, but it'll get more interesting soon.

  2. Test your program: Click on the Alonzo sprite on the stage several times. If your program works, Alonzo should move to a random position on the stage each time you click him.
    If your program doesn't work, look back at the picture of the code and make sure yours matches exactly.
    • Make sure the two blocks are attached to each other by moving the when I am clicked block and checking that the go to block moves with it.
    • Make sure that the first block says when I am (clicked) and not something else, and make sure that the second block says go to (random position) and not something else.

Making the Game Challenging

The game isn't much fun if Alonzo just sits there waiting to be clicked. Once you've clicked him, he should keep jumping around on his own. To make Alonzo keep moving around, you need a block that says "do this forever." And there is a block that does it:
forever

  1. A bunch of blocks clicked together is called a script.
    Attach this to the bottom of your Alonzo script:
    forever { go to (random position) }
    The sequence of blocks inside the forever block will repeat until you click the red stop sign, red stop button, or stop the script in some other way.
    Click for an animation of snapping these two blocks together.
    animation showing the block go to (position) being snapped inside a forever block
  2. Alonzo moves too fast. Use the wait 1 secs block to slow him down. Try your program, and increase or reduce the wait time if you like.
    Where the wait block goes in your script matters. Do you want the script to wait one time or each time Alonzo moves?
  3. Before we go further, the next page will show you how to save a Snap! project so you don't lose what you've made so far. You can use the right arrow (at the top right or bottom right of this web page) to continue.

Orange boxes contain the ideas you should still remember three years from now.

when i am (clicked) when 'green flag' clicked when (space) key pressed
CRD-2.C.2, CRD-2.C.3, CRD-2.C.5

Blocks that look like this can be used to detect an event such as clicking on the sprite, pressing a key, or clicking the green flag button (green-flag button). They tell the script to start when that event occurs. Because these blocks can sit only on top of a script (as a way to start the script), Snap! programmers call them "hat blocks." Using events to control a program is called event-driven programming.

Not every script needs a hat block; you can also run a script by clicking on it.