Programming a Game

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

Making a Character Move

  1. Make sure either you or your partner is logged in to Snap! so you can save your work.
  2. Click here to load this file. Then save it to your Snap! account.
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):

    I think this box should stay where it is and should be narrower green. And that makes me want to split off color from width in the CSS, and that's a cross-course find and replace that I'm only going to do after a convo with BH. --MF, 11/8/19

    I don't think you have to sweep through the entire curriculum. You can just program the existing CSS styles as abbreviations for a combination of styles, e.g., "sidenoteBig" abbreviating "medium paleYellow right" or something. -bh

    I don't want to tackle this until we sort out our other design concerns. --MF, 1/21/20

    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.
    3. 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.

Orange boxes contain important ideas. Read them carefully.

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.

  1. Find when I am (clicked) and when (space) key pressed in the yellow Control palette, and see what other choices are in their drop-down menus.

It's a good idea to save your project every so often.

  1. Choose "Save" from the Snap! File menu, File button.

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.
    Brian, we agreed that this instruction deserves an animated GIF of snapping things together---a hinted video in an endnote. --MF, 1/21/20
  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. Save your work

    4. I've always been mixed about whether to put these in an LI or not, and I think we've been inconsistent. Here, I think it's nice to put it in an LI. As a general rule, I could see myself being content with, "it goes in an LI if it's a left-aligned, icon with the text, and it doesn't if it's right-aligned as a mini-icon." Thoughts, Brian? --MF, 11/11/19

    I think in 1.1 we make it a LI but after that we use the small icon, introducing it explicitly the first time.  But (a longer discussion) I think all the small icons should go on the left, not the right. -bh