Party Hat Cat

In this tutorial we’ll be creating a simple Scratch program that uses input from the keyboard to control the motion of a sprite, a cat. This is no ordinary cat, this is the party hat cat! When the program is complete you’ll be able to move the cat back and forth on the screen, have the cat pick up a party hat, put it on, and start playing music.

This is no ordinary cat, this is the party hat cat!

To follow along with this lesson you’ll need to have Scratch installed. If you don’t already have Scratch installed on your computer, or if you’re unfamiliar with what Scratch is, I recommend reading the first tutorial: Getting Started with Scratch.

Concepts covered in this lesson:

  • Cartesian coordinates.
  • Creating a sequence of steps using blocks.
  • Iteration, or repeating a sequence of steps again and again.
  • Conditional statements: performing an action when certain conditions are met.
  • Keyboard input: using the arrow keys to control the movement of a sprite.
  • Coordination: triggering an action in another sprite by broadcasting a signal.

Getting Started

Start a new project in Scratch. If you’ve just started the Scratch program you won’t need to do anything else. If you had been working in Scratch and have a program loaded, save your work first and then click File > New to create a new Scratch project. The Scratch window should look like this:

New Project

New Project

Let’s first rename our sprite to something more meaningful than “Sprite1”. Click in the text field at the top of the scripts (center) panel, and change the text from “Sprite1” to “Cat”.

The top of the scripts panel should look like this now:

Sprite Renamed

Moving the Cat

To move our cat we’ll need to use one of the motion blocks from the blocks palette. To view the motion blocks, click on the Motion Button button at the top of the blocks palette. You should see a list of all the blue motion blocks in the palette now. At the top of the list should be the Move Ten Steps block. Drag this block into the scripts area, like so:

Scripts Panel With Move Ten Steps Block

To make our cat move, click on the Move Ten Steps block once. After you’ve clicked the block, the cat should have moved to the right, and the location information shown at the top of the scripts area should have changed as well:

Location Updated

Cartesian Coordinates

Let’s take a brief detour right now to look at how the position of a sprite can be described on the stage. Notice that the value shown for “x:” is now 10, and before you clicked the move block it was zero. The numbers shown beside “x:” and “y:” represent the position of the cat on the stage. When the sprite moves to the right or left the number shown for “x:” or the x-coordinate will increase or decrease. When the sprite moves up or down, the number for “y:” or the y-coordinate will increase or decrease. The very center of the stage has an x-coordinate of zero and a y-coordinate of zero, this is known as the “origin”. This coordinate system was invented by the French mathematician and philosopher René Descartes, and is therefore referred to as the Cartesian coordinate system. The image of the Scratch stage shown below illustrates how Cartesian coordinates can be used to locate a position on the stage:

Cartesian Grid

To the right of the origin the x-coordinates are positive increasing numbers: 1, 2, 3, … To the left of the origin, the x-coordinates are represented as negative numbers: -1, -2, -3 … If you move all the way to the left of the stage, the x-coordinate is -240, and all the way to the right is 240, making the width of the stage 480.

Similarly, the y-coordinates increase when moving up from the origin and decrease as the sprite moves below the origin. The upper limit of the stage is 180 and the lower limit is -180, making the height of the stage 360.

Try it out:

  • Drag the cat sprite on the stage. Can you move the cat so only the x-coordinate changes? So only the y-coordinate changes?
  • What happens to the y-coordinate when the cat moves below the middle of the stage?
  • What happens to the x-coordinate when the cat moves to the left of the middle of the stage?
  • Where is the cat when both the x-coordinate and y-coordinate are negative? What about when they are both positive?

A Sequence of Steps

At this point our cat may be someplace other than the center of the stage. To put our cat back at the center you could just drag the sprite to that location, or alternately, we can use the Go To (x, y) block.

Drag the Go To (x, y) from the motion blocks palette onto the scripts area, but don’t join it with the Move Ten Steps block yet! If the x and y coordinates are not both zero, you can change them by double-clicking in the white field following the “x:” and “y:” labels. Your script should look something like this now:

Scripts Panel With Two Blocks

Click on the Go To (x, y) block to re-center the cat sprite. Now click the Move Ten Steps block again. The cat’s x-coordinate should be 10 again. Keep clicking the Move Ten Steps block. What happens? Can you get the cat to go off the screen? If you’ve clicked the move block until the cat stops, the cat’s tail, whiskers and one foot may still be visible and the x-coordinate should be 269.

When the cat reaches the edge of the stage, it would be nice to have the cat change direction and start moving in the opposite direction rather than stop somewhere just off the edge of the stage. Scratch provides a motion block that does just that! Look for the If On Edge Bounce block and drag it onto the scripts area, joining it with the Move Ten Steps block, like so:

Scripts Panel With Three Blocks

By joining two blocks together we’ve just created a sequence. When you click on the Move Ten Steps block now, the If On Edge Bounce block will behave as if you’ve clicked it.

Let’s start with the cat at the origin again, click the Go To (x, y) block. Now click the Move Ten Steps block again, and again until the cat gets to the edge of the stage. Oh no! What happened?

Upside Down Cat

Why is our cat upside-down?

Why is our cat upside-down? By default sprites are allowed to rotate, but in this program we only want to be able to move to the left or right. There are three buttons just to the left of the cat sprite at the top of the scripts area that control rotation of the sprite:

Rotation Options

 

The Can Rotate button enables the sprite to rotate, the Do Not Rotate button prevents the sprite from rotating, and the Only Face Left Right button allows the sprite to face left or right only. To restrict the ability of our cat to face only left or right, click the Only Face Left Right button.

Now that our cat is no longer upside-down, try repeating the previous steps. Re-center the cat sprite and click the Move Ten Steps block until the cat reaches the edge of the stage. The cat sprite should change the direction it’s facing now and continue moving in the opposite direction.

Try it out:

  • What happens if you click the Do Not Rotate button and repeat the steps above?

Iteration

We’ve just been experimenting with iteration, repeating a sequence of steps again and again. It gets a bit tiresome to keep clicking the same block over and over, however. Thankfully Scratch provides us with yet another block that can eliminate the tedium of repeatedly clicking a block.

At the top of the block palette, click on the Control Button button. The orange control blocks should now be shown in the block palette. Drag the funnily shaped Forever block onto the scripts area, but don’t let go of the mouse button yet! As you drag it onto the scripts area, hover the block over the Move Ten Steps and If On Edge Bounce blocks. What happens? The Forever block should open up around the blocks. A thick white line should also appear at the top of the Move Ten Steps block. OK, now you can release the mouse button! All three blocks should be connected together. You can also drag the resulting block and connect it to the bottom of the Go To (x, y) block like so:

Script With Forever Block

Now click anywhere on the script that you’ve created. What happens?

Ugh, that cat is making me dizzy!

Ugh, that cat is making me dizzy! How do we make it stop? Just click on the script again to stop it. Whew, that’s better!

Let’s add a control block to the start of our script that will allow us to start and stop our program using the Start / Stop Script buttons. At the top of the control block palette look for the When Green Flag Clicked block. Drag the block to the top of your script, like so:

Script With When Green Flag Clicked

Now, when you click the green flag above the stage it will start your program, and you can stop the program by clicking the red stop sign.

Keyboard Input and Conditional Statements

Although that might be entertaining for a bit, it would be nice if we could have some control over the cat’s movement. Instead of constantly moving back and forth, what if the cat moved only when the arrow keys were being pressed? When the right arrow key is pressed the cat faces to the right and moves right, and when the left arrow key is pressed, the cat faces left and moves left, otherwise the cat remains motionless.

What we need is a way to check to see if the arrow key is being pressed, and if so, run the move sequence. That’s where the If block comes in. On the control blocks palette, look for the sixth block from the bottom, this should be the “if” block. Drag this onto the scripts area for the cat just as you did with the “forever” block. Drag the “if” block so that it encloses the Move Ten Steps and If On Edge Bounce blocks, as shown below:

Script With If Block

Did you notice the recessed hexagonal shape Recessed Hexagonal Shape in the “if” block? That’s where we need to put the condition that we’re checking for. In this case we’re checking to see if a key has been pressed. What we’d like our program to say is: “if the right arrow has been pressed, move ten steps, and if the cat is on an edge, bounce.”

Click on the Sensing Button button to reveal the sensing blocks palette. About midway down the panel, look for the Key Space Pressed block. Instead of moving the sprite on the stage, this block just returns a value that can be used by a control block. In this case, it returns a Boolean value, which means that it can be either “true” or “false”. The Boolean data type is named for the English mathematician George Boole.

Try it out:

  • Click on the Key Space Pressed block in the sensing blocks palette. A speech bubble should appear above and to the right of the block that says “false”:

Key Pressed False

  • Now, hold down the space bar and click on the Key Space Pressed again. What does the speech bubble say?

Examine the Key Space Pressed block. Do you see the inverted black triangle to the right of the word “space”? That indicates that there’s a pull down menu available for this block. Click the the triangle and a menu of available keys should appear. You’ll find the arrow keys at the top of this list. Select “right arrow”. Now drag your Key Right Arrow Pressed block into the recessed area of the “if” block. Your script should now look like this:

Script With If Right Arrow Pressed

Try it out:

  • Click the green flag to start your program. Is the cat moving?
  • What happens when you press the right arrow key? What happens when you release the right arrow key?
  • Does anything happen when you press the left arrow key? Any other key?

Well, that’s better, but the cat faces left when he bumps the edge of the stage and he just keeps on going! To keep the cat facing in the right direction, let’s add another block that tells the cat which way to face.

Click the Motion Button again to display the motion blocks palette. Now select the Point In Direction Right block and add that to you script just before the Move Ten Steps block. Your updated script should now look like this:

Script With Point In Direction

Now, when you run your program by clicking on the green flag, pressing the right arrow key should move the cat to the right of the stage where the cat should stop and face left. But now the cat is stuck!

But now the cat is stuck!

How can we move the cat left? Easy, just right click on the “if” block and select “duplicate” from the pop-up menu. You should get a copy of the entire “if” block, including the “point in direction”, “move” and “if on edge, bounce” blocks. Drag and drop this new block right below the existing “if” block. Now change the key pressed in the new block from “right arrow” to “left arrow”, and change the direction from “90 (right)” to “-90 (left)” as shown below:

Script With Left And Right

Now when you run your program and click the arrow keys the cat should move left and right. We’re almost there!

Before we continue, let’s make this look more like a party. Let’s change the background that the cat is moving on. In the sprite list, click on the Stage (on the left of the gray divider). The Stage will be shown at the top of the scripts area. Click on the center tab, Backgrounds, to view the backgrounds for the Stage:

Stage Backgrounds

Stage Backgrounds

Click the “Edit” button for “background1”. The Paint Editor window will be displayed:

Paint Editor

Click the “Import” button and select the “party-room” image from the “Indoors” folder of the background images:

Import Background Image

Click “OK” to import the “party-room” image to the background, and click “OK” again” to set this as the background for the Stage. You can also change the name of the background to something more meaningful than “background1” like “Party Room” by double-clicking the “background1” text. Your Scratch project should now look like this:

Stage With Party Room Background

Stage With Party Room Background

In the sprite list, click on the Cat sprite and select the Scripts tab. The cat seems to be floating in the middle of the room right now. Let’s move him to the lower left corner of the stage.

Try it out:

  • How can we change the script so that the cat always starts in the lower left corner of the stage? The lower right?

If you recall, the x and y coordinates are both negative for the lower left region of the stage. Click on the x-coordinate of the Go To (x, y) block and set it to -160. Click on the y-coordinate and set it to -100, as shown below:

Script With Cat Lower Left

Coordination: Picking Up the Hat

Let’s give our cat a party hat! In the sprite list panel click the Choose New Sprite From File button to view the New Sprite file dialog. Open the folder named “Things” and look for a sprite named “partyhat3”:

New Sprite Party Hat

Click “OK” to add the sprite to the sprite list. It will show up in the list as “sprite1”. You can rename the sprite to “Party Hat” just as we had renamed the cat sprite earlier.

Let’s move the hat to the opposite side of the stage from the cat, so he has to put some effort in to reaching it. We want to set the hat’s x-coordinate to 180 and its y-coordinate to -100 when the green flag is clicked.

Try it out:

  • What blocks do you need to drag onto the hat’s script area to move the hat to x, y coordinates 180, -100? Don’t look at the answer!

Click on the Control Button button and drag the When Green Flag Clicked onto the script area for the hat. Next click the Motion Button block and drag the Go To (x, y) block to the script area and connect it to the bottom of the other block. Change the x-coordinate to 180 and the y-coordinate to -100. Your hat script should look like this now:

Party Hat Script

Try running the program now. What happens when the cat reaches the party hat? Not much, right? Let’s fix that now. Click on the Cat sprite and display the script by clicking the Scripts tab.

Now, click the Control Button button and drag another If block from the control blocks palette and drop it within the Forever block after the last If block, like so:

Script With Third If Block

Click the Sensing Button button to reveal the sensing blocks palette. We want something to happen when the cat sprite touches the hat, so find the Touching block and click the down arrow to show the options. There should be an option for “Party Hat”. Select this and then drag the Touching Party Hat block into the recessed area of the If block.

Here’s where we need to coordinate with the Party Hat sprite. We want to send a message to the Party Hat to tell it that it’s just been picked up. To do this we can use the Broadcast block. This will broadcast our message to the other sprites in our program so that they can respond. To set our message, click the down arrow, and select “new…” Type in “Hat Picked Up” as the message in the dialog that is displayed, and click “OK”:

Hat Picked Up Message

Your script should look like this now:

Script With Broadcast Message

What should happen next? The cat should put the party hat on, right? But how can we do that? First, let’s make the party hat sprite disappear, then we’ll create a new cat costume with the party hat on the cat.

Let’s revisit the party hat script. Click on the Party Hat sprite in the sprite list and select the script tab in the scripts area. Now, we need to have the party hat respond to the message we just sent.

Click on the Control Button button to display the control blocks palette. Now find the When I Receive Hat Picked Up block and drag it into the scripts area for the Party Hat sprite. You may have noticed that this block is just like the When Green Flag Clicked block. These blocks are special in that they begin a sequence of blocks and they respond whenever special events occur. In this case, the instructions that follow this block will occur whenever the message “Hat Picked Up” is broadcast.

Click the purple Looks Button button now to reveal the looks blocks palette. The block that we’re looking (ha!) for should make our party hat disappear! Drag the Hide block to the scripts area and connect it to the base of the When I Receive Hat Picked Up block, like so:

Party Hat Script With Hide

Try it out:

  • Start the program. What happens when the cat touches the party hat?
  • Start the program again. Wait…what happened to the party hat?

Wait…what happened to the party hat?

Just above the Hide block you’ll find the corresponding Show block. Drag this block into the scripts area and connect it to the bottom of the script that begins with the When Green Flag Clicked block:

Party Hat Script With Show

Start the program again. Now the party hat should disappear when the cat touches it and reappear when the program is started.

Changing Costumes

The final bit of magic is to make the hat reappear on the cat’s head. To do this we’ll need a change of costume.

Click on the cat sprite in the sprite list, and select the costumes tab. There are already two costumes for our cat, as shown in the image below:

Cat Costumes

You can safely delete the existing “costume2” by clicking on the Delete Button button. This costume could be used to animate the cat walking, but it won’t be used in this program. Now click the “Copy” button for “costume1”. This makes a new “costume2” that is identical to “costume1”.

Click the “Edit” button for “costume2” to bring up the Paint Editor window. In the Paint Editor click the “Import” button and browse for the “partyhat3” in the “Things” folder that we had used earlier for the Party Hat sprite. Drag the party hat and place it on the cat, as shown below:

Paint Editor Cat With Hat

Click “OK” when you’re satisfied with the way your cat is wearing the party hat.

Finally, let’s rename the costumes so that we can more easily identify them. Rename “costume1” to “Cat Without Hat” and “costume2” to “Cat With Hat”. The costumes for our cat should look like this now:

New Cat Costumes

Now, click the Scripts tab, and then click the Looks Button button to display the looks blocks palette. At the very top of the list should be the Switch To Costume Cat With Hat block. If the costume “Cat With Hat” is not shown, click the down arrow to reveal the costume options and select “Cat With Hat” from the list. Now drag this block into the script and add it just after the Broadcast Hat Picked Up And Wait block, as shown below:

Script With Switch To Costume

Now try running the program. What happens when the cat touches the hat? Hurray, our cat is wearing the hat! But wait, if we restart the program our cat is still wearing the hat, oh no! Just as with the Show and Hide blocks earlier, our cat’s costume must be set to its initial state.

Hurray, our cat is wearing the hat!

Drag the Switch To Costume Cat Without Hat block to the scripts area and add it just after the When Green Flag Clicked block. You may need to select the costume name “Cat Without Hat” from the list by clicking the down arrow. Now try running your program again. The cat shouldn’t have a hat when the program starts now.

Let’s Party!

As a final touch, lets have the cat say “Let’s Party!”, and then we’ll play a music loop.

Drag the Say Hello For 2 Secs block into the scripts area and add it after the Switch To Costume Cat With Hat block. Change the text from “Hello!” to “Let’s Party!” by double-clicking the text. Test it out, does it work as you expected it to?

Stage Final Version

Now, let’s add some music. We’ll put the script to play the music in the Stage scripts area and have it triggered by the “Hat Picked Up” message.

First we need to select our party music. Click on the Stage in the sprite list and then select the Sounds tab in the scripts area:

Stage Sounds

There is already a sound called “pop” in the list of sounds for the stage. You can play it by clicking the Play Sound button. Doesn’t sound much like a party, does it? You can delete the sound by clicking the Delete Button button. We’ll import a new sound for our party music. Click the “Import” button and browse to the Sounds > Music Loops folder. Try out the different music loops to see which one you like. In this case I’ve selected “Techno2”:

Import Sound

Click “OK” the music loop should now appear in the list of sounds.

Now let’s switch to the Scripts tab for the stage. We want the music to play after the cat puts on the hat, so we’ll start our script with the When I Receive Hat Picked Up block. In order to play our music loop over and over again we can use the Forever block. Connect this block to the base of the first block. Now click on the Sound Button button to reveal the sound blocks palette. Drag the Play Sound Techno1 Until Done block into the scripts panel and drop it within the Forever block. The complete script for the stage should look like this:

Stage Script

That’s it, our program is complete! Start the program. When the cat touches the hat the music loop should begin to play and keep looping. If you want it to stop, click the red stop sign.

The complete project for this tutorial can be downloaded from the Scratch website.

Next Steps

Feel free to experiment with the program you’ve just created. Here are some ideas to help you get started:

  • Add another sprite to the program. Trigger the sprite to appear after the cat says “Let’s Party!”
  • Make a different hat appear at the opposite side of the stage after the cat picks up the original hat. See if you can get the cat to change hats again.
  • Instead of playing the same music loop over and over again, try playing a sequence of different music loops.
  • EXTRA CREDIT: Add more party goers (sprites) and have them dance to the music when the music starts. Hint: Have the sprites move a few steps forward, and a few steps back. Repeat the motion in a “forever” block.
About

Robert is a graduate of Fairfield University in Fairfield, CT and has been developing software professionally for fifteen years. He is the father of two children who have been making their own games using the Scratch programming language.

Posted in Beginner, Scratch, Tutorial Tagged with: , ,