CS 105 - Understanding Our Algorithmic World

Goals

• Get set up to work with Snap!
• Get familiar with the Snap! interface
• Learn a little about sprites and costumes

Prerequisite

In this class, we will be using Snap! as our computational playground. While you can jump in and use Snap! immediately, it will be best if you create an account.

Visit the Snap! sign up page and create an account for yourself (the username you chose won't matter -- just bear in mind that others will see it, so don't pick something too embarrassing).

Meet the Snap! environment

Start by opening the starter project.

You will see something like this:

If you just see the stage, click the full screen button .

On the left-hand side, you have the palettes of blocks (each palette has its own collection of blocks). These are the basic building blocks that we will construct our scripts with.

In the middle is the scripting area, where you will specify the behavior of the sprites.

On the right, you can see the stage, where the sprites will perform their actions (while this seems very simplistic, you will see that we can coax quite a bit of complexity out of this simple setup).

The sprite is wearing a costume, which determines what the sprite looks like on the stage. This sprite is dressed up as Alonzo, the mascot of Snap!.

Save a copy

Before you make any edits, save the project so you have your own copy.

Click on the file button and find the "Save" option. You should see a Save dialog like this:

.

Make sure cloud is selected, and then click the "Save" button. You now have your own copy of the project.

Make Alonzo move

We are going to tell Alonzo to move every time we click on him. We will do that by writing a short program that looks like this:

This program has two blocks.

The first block, when I am (clicked) is a hat block. You will find this in the "Control" palette. Notice that the blocks are color coded so you can tell which palette it comes from. Drag the block out into the scripting area.

Blocks like this go on top of a sequence of commands to say when to execute the steps. This is something called event-driven programming. You do not need to use hat blocks -- clicking on blocks will run them directly. However, most of our programs will include them. This one will respond when the sprite is clicked.

The second block is a "Motion" block. Look for the block that says go to with a drop down menu. Drag it out into the script area and place it under the hat block. You should see the two blocks "click" together. Click on the menu and select "random position".

And just like that, you wrote your first program! If you click on Alonzo, he will jump to some new location on the stage.

Turning this into a game

We are going to turn this simple program into something a little more like a game. Rather than having Alonzo just sit there waiting to be clicked, we are going to have him run around the screen.

Find the forever block in the "Control" palette.

The forever block is called a C-shaped block (for obvious reasons). You can put blocks inside of the C. The forever block will run all of the blocks you put inside of it. When it reaches the end of the list, it will jump back up to the top and start over. It is called the "forever" block because it will keep this up forever. It is like the blocks inside are in Groundhog Day or Russian Doll -- they are forced to relive the same sequence over and over. The only way to stop the repetition is to stop the script (clicking the red stop button in the upper right will do this, but we will see another way shortly).

Put the forever block around the go to random position box. Now when you click Alonzo the first time, he will start jumping around the screen.

Whoa Alonzo -- slow down!

Slow down Alonzo

Alonzo is zooming all over the place because as soon as he sets down somewhere, the forever block repeats and he shoots off somewhere new.

To get Alonzo under control, we are going to make him wait a moment before he jumps again. Find the block in the "Control" palette.

Add this to the program. Where should the block go? You want Alonzo to leap immediately when you click him, but then wait a moment before jumping again. Play with the timing as well until the speed looks good to you.

Make Alonzo acknowledge clicks

After you click Alonzo, he now is happily jumping all over the place, making it harder to click him a second time. What happens when you click him a second time?

Well, when you click him, he starts jumping around at random. Since he is already jumping around, it is a little difficult to tell that you did anything. So, we are going to have Alonzo face the other direction when you click on him.

If you click on the "Costumes" tab in the scripting area, you will see that the sprite actually has two costumes.

To make Alonzo face the other direction, we will just tell the sprite to switch costumes.

Go to the "Looks" palette. You will find a block called next costume.

Click on the next costume block. You can see that running the block switches the sprite to the next costume. If you click it again, it switches back (if you had more costumes, the sprite would visit each one in turn, looping around only when it reached the end of the collection).

Add this block to your code so that Alonzo changes direction once when he is clicked before jumping somewhere new.

Improve the game

As games go, this is still pretty meager. We need to add an objective. Let's say we need to click Alonzo a certain number of times to end the game. We could count the number of successful clicks, but we are going to do something a little different.

If you look in the "Looks" palette, you will find a block change (ghost) by (25) . The ghost effect makes the sprite become transparent. Click the block once and you will see Alonzo fade a little. If you keep clicking, the sprite will fade away to nothing.

You can think of each sprit as having a ghost value which is a number between 0-100. When you run the change (ghost) by (25) block, it adds 25 to that number (while remaining within the range from 0-100). Initially, the sprite has a ghost value of 0. If the value becomes 100, the sprite is invisible. (If you have made the sprite disappear, click on the set ghost effect to 0 block to reset it).

Add the change (ghost) by (25) block to your code so that Alonzo fades a little every time he is clicked. Like the costume change, Alonzo only wants to fade once for every click. Change the amount Alonzo fades to be a smaller number -- 25 means that Alonzo will be gone in only four clicks.

Make sure this works before moving on.

Now, let's add a penalty to the player for missing Alonzo. Every time Alonzo jumps, change the ghost effect by -5. So, every time Alonzo jumps independently, he re-solidifies a little bit.

If you run the game now, Alonzo will jump around and as you click him, he will fade away. If he jumps before you click, he we re-solidify.

Ending the game

We will end the game when Alonzo is completely transparent. To end the game, we will add this collection of blocks:

Use the block colors to find all of these blocks in the palettes. Note that while the if and stop blocks are different shades, they are actually the same color and both found in the same palette. Snap! uses something called "zebra coloring"; two different shades of the same color are used for nesting blocks of the same color to make it easier to see the boundaries.

Read through the sequence of blocks and try to figure out what it does.

If you insert this into your code before the forever block, the game will end when Alonzo has been fully ghosted. Try it out and see if the behavior matches your expectations.

Congratulations! You've made it through the first exercise. Just to make sure, make sure that your program does all of these things:

• Alonzo starts jumping around at random when you click on him
• Every time you click on Alonzo, he faces the other direction (and only when you click on him)
• Every time you click on Alonzo, he fades away a little bit
• Every time Alonzo jumps and you didn't click on him, he should get a little more solid
• If Alonzo ever becomes completely transparent, the game ends and Alonzo stops jumping (until you click on him again)

I encourage you to play around. Explore the blocks and see if there are other things that you can make Alonzo do, just make sure that these core things are maintained.

Submitting

You are going to submit your work through Canvas. Visit the exercise page. You will see that it is asking you for a URL. Do not just copy and paste https://snap.berkeley.edu/snap/snap.html -- that is just the default editor. First, you need to share the project.

Return to the menu.

Select "Save As...".

In the dialog, select the project you want to share and then click the "Share" button. A little dialog box will pop up and ask if you want to share the project.

Click the "Yes" button. The name should go bold and the "Share button will be replaced with an "Unshare".

Click the "Cancel" button.

If you look at the address bar of your web browser, you should see that the address is no longer https://snap.berkeley.edu/snap/snap.html. It will include your user name and the project name.

Copy the address and paste it into the field in Canvas.