Starting Your First Snap! App

You are going to code an interactive game for your mobile device. The point of the game is for you to click on Alonzo as much as you can. Alonzo makes it harder by moving randomly around the screen.

Work with a Partner Two of you will work together on one computer. It doesn't matter which of you is logged in; later in the activity you'll learn how to share the project with the other partner.

Alonzo sprite turning around

First, you'll change the arrow-head sprite, arrow-head sprite, to look like the Alonzo character (wiggling here), and then you'll program him to turn when he is clicked.

  1. Bookmark or write down the snap link. You will need it every day.
    Use the URL http://snap.berkeley.edu/run to launch Snap! in a new window (or tab).
  2. Create two costumes for the sprite. You can follow these instructions or watch the animation below.
    1. Go to the File menu, File button and select "Costumes...". Choose "alonzo.gif".
    2. Right-click (or, on a Mac, control-click) the Alonzo costume in the gray costume area (not on the white stage) and select "duplicate."
    3. Then, right-click (control-click) the new costume, select "edit," and click the "flip ⟷" button.
      Then, click "OK."
    Creating two Alonzo costumes

  3. Drag one block underneath another to snap them together. The white bar shows that the blocks will snap together if you unclick the mouse here.
    Motion palette categories: Motion, Looks, Sound, Pen, Control, Sensing, Operators, and Variables
    The blocks' colors match their palettes: purple for Looks, yellow for Control, etc.
    Now, program the sprite to change costumes when Alonzo is clicked.
    Click the "Scripts" tab above the staging area, and drag blocks into it to build this script:
    when I am (clicked), next costume

    This animation shows where to find the blocks and how to snap them together:
    Creating the turn Alonzo script

  4. Click on Alonzo, on the white stage. If your script works, Alonzo should face the other way.