How to Program a Simple Cat & Mouse Game With Scratch! (videos Included)

In this step-by-step tutorial, I will show you how YOU can code your very own cat & mouse game. You will learn how to use variables, sound effects, and more. This project is endlessly customisable, as well!

None! All you need is a computer.

*Note: This is the longest step, but also the simplest. Don't be intimidated by this wall of text.

First, go to your web browser. Type in "Scratch". The first result that shows up should say, Scratch - Imagine, Program, Share". Click on it. It will bring you to the homepage, and you will see a few options in the bar at the top of your screen. Click on the "Create" option. After it loads, it will bring you to the coding screen, where code blocks are on the left. You should see a cat on the screen to the right. Delete it by going to the small cat picture below it and click the" trash" icon near it. Finally, scroll your mouse over to the cat icon with a little plus sign above it at the bottom right-hand side of your screen. When you do, a list of four options should show up; click on the magnifying glass icon. This will bring you to the sprite selection page.

VOCAB:

Sprite: the characters used in coding... Not the soda / pop brand :)

WHAT YOU LEARNED:

How to enter Scratch and start choosing new sprites. Congrats!

*Note: You can choose whatever sprites you want. You could even have a umpire chasing a baseball!

Once you are in the sprite selection page, go to the search bar in the top left corner. First, search up "cat". Choose the cat sprite shown in the second picture. Next, go back to the sprite selection (where you found the cat) and search "mouse". There is only one mouse option, so select that. You should now see both a cat and a mouse character on your side screen.

WHAT YOU LEARNED:

How to choose new sprites for your projects. You're getting the hang of this!

Right now, our friends' world is looking a bit empty. Let's choose a backdrop! First, scroll over to the "picture" icon next to the "new sprite" icon. Another pop-up will appear, and you want to click on the "search" icon. In the top selection bar, you'll see some filters for backgrounds. Click on the "Outdoors" option. I chose the Farm background, but you can have whatever you want. Once you click on your selection, it should bring you back to the code page and your sprites will now be on a farm!

WHAT YOU LEARNED:

How to choose backgrounds for your project. Nice!

ADD CODE TO CAT (By clicking on the small cat icon under the side screen)

Alright, what you've all been waiting for! (hopefully) On the left-hand side of your screen, there will be a few vertical columns with different options. On the farthest left column, you'll see some different categories of code. Click on the "Events" option in yellow. Once there, you should see a few code blocks. Drag and drop the "When space key pressed" block into the Code Area in the middle. Then, go over to the side screen with your sprites and drag the cat into a position you like. (I chose the bottom left corner) Once you do that, select the "motion" option in the Block Selection Area. (the vertical columns) Finally, drag the block that says "go to x:___ y: ____" to the area immediately below the "when space key pressed" block. It should snap into place. Repeat for the mouse, but drag the sprite to a different area on the screen.

VOCAB:

Code Block: The little snippet of code you, well, code with.

Code Area: The space where it all happens! All code is brought here to be used.

Block Selection Area: Where code blocks are found

WHAT YOU LEARNED:

How to add code to your project! You are now a coder! Brag to your friends.

ADD CODE TO CAT

First, go to "motion" in the block selection area. drag the block that says "glide 1 secs to ____" and add it to your code chunk. click the down arrow in the section that tells it where to glide to. A drop-down menu should appear, and select "mouse 1". Next, go to "control" in the block selection. drag the block labeled "forever" over your "glide" block. It should put the motion block inside the "forever" loop. If not, drag DOWN on the motion block and drop it inside the loop. Connect the loop to your code chunk. Now let's try it! click the space bar and the cat on the side screen should... WOAH! That cat's zooming! Let's make it a bit more fair for the mouse. click on the time option for the "glide" block and change the time to TWO seconds. This will make it twice as slow, because it means it takes twice as long to glide to the mouse. To stop code, click on the small stop sign icon above the side screen. Now, when you try the code, the cat should move slowly to the mouse.

VOCAB:

Loop: a command that makes anything inside it repeat for a set amount of time.

Code Chunk: A collection of Code Blocks.

WHAT YOU LEARNED:

How to make characters fly across the screen, towards a set destination. The fastest way from A to B...

ADD CODE TO MOUSE

Let's give our favorite mouse a fighting running chance. First, go back to the "control" section. drag and drop four "If ___ then" blocks together in one long string, connected to the first chunk of code. Put all four of the if-then statements in a "forever" loop. Next, go to "sensing". Place "key ____ pressed?" blocks and drag and drop them in the hexagonal blanks of the if-then blocks. click on the key selection of the sensors and choose a different arrow key for each if-then statement. (Up, Down, Right, Left) After you do that, go to "motion" in the block selection. There are blocks that say, "change x by ___". Drag those to your right and left arrow sections. However, for the left arrow, change the amount x is changed to a negative by adding a minus in front. Repeat for up and down, but use a block that says, "change y by ____". For going down, make the value negative. Finally, change the value of x and y movements to 6.

VOCAB:

If-then statement: A command that triggers an action only when another is fulfilled

WHAT YOU LEARNED:

How to control sprites! Moving and grooving!

ADD CODE TO CAT

Start your script, and move the mouse sprite around a bit with the arrow keys. You notice how the cat goes to the spot the mouse WAS, and doesn't constantly chase it? We're gonna fix that. Delete the code for the cat sprite that says, "glide ___ secs towards ___". To delete it, drag it back to the block selection area. Go to "motions" and drag the "point to ___" and "move __ steps" blocks inside the forever loop. Change the point block to the mouse, and make it move five steps. Now, when you run the code, the cat should constantly trail the mouse. Changing the amount of steps taken will change the speed.

VOCAB:

Script: all your code in the project for that sprite

WHAT YOU LEARNED: How to make the cat follow the mouse. We're on the home stretch!

ADD CODE TO MOUSE

This is a short one. First, add another if-then command (found in "control") to the mouse's loop code. Inside the command, put a "if touching ___" sensor (found in "sensing"), and change it to sense if it is is touching the cat. Finally, go to "control" and put the "stop all" block inside the command. That's it! When your mouse is caught, it should stop the game.

WHAT YOU LEARNED:

How to stop the game when something happens. Timeout!

ADD CODE TO MOUSE

When you play the game, you may notice that the mouse always looks in one direction, no matter the direction it's moving. To fix this, go to "motion". Drag "point in direction ___" blocks to each of the movement chunks. When you click on the direction, a wheel should pop up. You can drag the arrow around the circle to determine the angle it will point to. For example, for the right movement, drag the arrow to the right, for left movement drag the arrow to the left, and so on and so forth. You can watch the video if it's confusing.

WHAT YOU LEARNED:

How to make characters point in set directions. Both eyes on the road!

This is the shortest step. Underneath the side screen, there is an option for "size". It should say 100, but change the size to 50 for the mouse and 60 for the cat. That's it!

WHAT YOU LEARNED:

How to change the sprite size. No magic wand necessary!

ADD CODE TO MOUSE

Sorry, I lost the footage for this one... I'll try to explain it in words though. First, go to "variables". select "make new variable" and name it "time alive". Next, drag the variable blocks shown in the picture to the Code Area and select "time alive" instead of "my variable". Afterwards, go to "control" and drag a forever loop and a "wait ___ secs" block to the Code Area. Change the "Wait 1 secs" block to say 0.1 seconds instead of 1. Do the same to the "change time alive by ____". Then, go to "events" and drag a "when space key pressed" block to the Code Area. Finally, put the blocks together as shown in the image. Keep this code chunk separated from the main chunk. (as shown in the picture)

VOCAB:

Variable: a number that changes (7th grade math, anyone?)

What You Learned:

How to use variables! This is one of the hardest things to do in Scratch. Vari (able) good!

ADD CODE TO MOUSE

Losing sound effect

First, go to "sound". drag the "play sound ____ until done" block to the Code Area of the mouse. Then, above the Block Selection Area, there are three options. (Code, Costumes, Sound) Select "sound". It will show you a close-up view of the pre-selected pop sound. Instead of using this, go to the additional sounds button below on the bottom-left hand corner of the screen. (it looks like a speaker with a plus sign above it.) scroll over it and select the search icon. It will bring you to the Sound Selection Page. In the search bar on the top-left corner, search "lose". Select the sound. Once you do, it will bring you back to the Sound Preview Page. go back to "code" in the top-left corner. Change the "play sound ____ until done" to play the "lose" sound. Finally, drag the block to the "If touching cat 2 then" command and place it above the stop all block.

Game Soundtrack

First, drag these three blocks to the Code Area, but always keep them separated from the main chunk of code: "When space key pressed" (found in events), "play sound ____ until done"(found in sound), and a forever loop (found in control). Next, go to the Sound Selection Page, where you found the "lose" sound effect. (this is explained in the paragraph above) Find the soundtrack "Eggs". change the sound block to play this sound, and then place it inside the forever loop. Finally, connect the loop to the "When space key pressed" block. YOU'RE DONE! ENJOY YOUR GAME!!

VOCAB:

Sound Selection Page: the menu where you choose all the sounds in your project.

Sound Preview Page: the place where you can take a close-up look at whatever sound you choose.

WHAT YOU LEARNED:

How to add sound to your project! That's music to my ears!