Friday Fun: SPLAT THE CAT!!!

by Les Pounder

The cat has got out! Time to splat the cat!

Scratch Games!

For this project we are going to build a simple arcade game where we have to "SPLAT" the cat using our hands, legs, head. But how do we do that? Well using the latest version of Scratch and a webcam we can build the game in less than 30 minutes!

What does the game look like?

Here is the completed game. In this preview the camera does not work, but you can see how the cat jumps around the screen, changing size.

Building the game



To build the game we need to go to the Scratch website and click on Create



Once Scratch has loaded, we see the default screen, this is where we shall write our game. But what does each section do? Take a look at the image above, I've numbered and colour coded each section for easy reference.

Number Colour Description
1 Red Here is where the blocks used to make our game are stored. We can also change the look of the sprite (costumes) and give a sprite a sound.
2 Green Blocks are placed in this space to make our game. We write code using blocks in this section.
3 Yellow The stage is where our game will play.
4 Purple The characters in our game (sprites) live here. Clicking on a sprite enables us to write code for it.
5 Blue Here we can edit the stage, change the background and play music in the game.

Your help makes this blog possible!



Sorry to interrupt! It would be great if you could buy me a cup of coffee / make a donation via Ko-Fi. It helps me to pay for hosting this blog, and to buy stuff to hack from Poundshops / Dollar Stores / Aliexpress which are used in free projects on this blog. Thanks!

Enable the camera



To use our webcam we need to click on this icon in the bottom left of the screen.



This will open the Choose an extension menu. Look for Video Sensing and install the blocks.

The first blocks of code



We start by first going to Events and dragging the When Green flag is clicked block to the coding area. Then we go to Video Sensing and connect set video transparency to 50% to the previous block. We can also change the transparency (make it see through) and I found that 70% was the right level for me.

Keeping score



To create a score we need to create something which can store the score as the game is played. For this we shall use a variable and we can create one by going to Variables and clicking on Make a variable.



Call the variable score and accept the default options. Click Ok.



Create another variable called countdown and we shall use this later.



To use the score variable we need to drag set score to 0 and connect it to the previous blocks. So these three blocks will start the game, turn on the camera and reset the score.



From the Control section we will drag repeat until and connect it to the previous blocks. This is a loop that will repeat until a certain condition is met. In our case it will be when the countdown timer reaches zero, ending the game.

To test this condition we need to go to Operators and drag the 0 = 0 block and place it inside the hexagon shaped hole at the top of the loop. In the left space of 0 = 0 place a countdown block from Variables.



So what will happen each time the loop goes round? Well first I would like the cat to change size. So from Looks I drag the set size to % block into the loop. Then from Operators I drag the pick random 1 to 10 and place it inside the set size to % block. I then change the 1 to 10 values to 40 to 100. This will change the size of the cat from 40% to 100% each time the loop goes round. Then from Motion I drag the Go to random position and place that under the previous block. Lastly I use the wait 1 seconds block to create a delay in the code. I add this block under the previous. Change the value to 0.5 seconds for a quicker game.

Countdown Timer



The next section of code is our countdown timer which is used to give the player 30 seconds to SPLAT THE CAT!!!

To start the timer we use When Green Flag Clicked from Events, then we go to the Variables section and drag Set Countdown to and set the value to 30.

Next from Control we use a repeat 10 loop and change the number to 30 so this loop will go round 30 times!

Inside the loop we use change countdown by from Variables and set the value to -1. This means that each time the loop goes round the countdown variable changes by -1, so from 30..29..28..27. Then I go to Control and drag Wait 1 seconds block and place it inside the loop. The last block for this section is from Control and it is called stop all and this block will stop every script once the countdown reaches zero.

Why did we use Wait 1 seconds?

In the loop we change the value of the countdown variable to create a simple countdown timer. But if we didn't have a Wait in the loop, then the loop would run really quickly and the game would end too soon.

What happens when we splat a cat?



When the cat is splatted, we need to show the player, and provide an audio cue to tell them that they have gained points. Here is the code to do just that.

Audio cue?

Video games have long been designed to give us visual and auditory stimuli when playing. For example Mario / Sonic has pleasant sounding tones to indicate that the player has collected something (coins, rings, power-ups) and we can see Mario gain powers by collecting mushrooms and fire-flowers.

We start the code by going to Video Sensing and dragging the When video motion block into the coding area. Change the value to When video motion > 50 so that the player has to really work to splat the cat.



Costumes enable our sprites to change from a cat to a rainbow and other fun things. To change a costume we go to Looks and use switch costume to block to change to another costume.



But how do we decide which costume the sprite will change to? For this we need to click on Costumes tab and then click on the cat logo at the bottom left of the screen.



We also need an audio cue to tell the player that the cat has been splatted! For this we need to go to Sound and drag Play Sound Meow until done



To select a sound we need to click on the Sounds tab and then click on the speaker icon in the bottom left.



We add another wait to the code, this time for 0.5 seconds. Then we switch the sprite's costume back to Costume 1, the default for the cat sprite. The last block changes the value of the score variable by 10 points each time the cat is splatted!

Here is all the code for the cat sprite

Does it match your code?

Coding the stage

Did you know that you can write code for the stage?



Click on the stage properties (bottom right of the screen) and you will see that all of the code disappears! DO NOT WORRY YOUR CODE IS SAFE



The code for the stage is simple, when the Green Flag is Clicked it will start a forever loop and then we play sound until done for a musical loop. Can you find these blocks and build the code yourself?



The very last step is to add a cool backdrop to our game. In the bottom right of the screen, click on the backdrop icon to choose a new backdrop.

Our game is ready!

Click on the Green Flag to start the game, and see if you can splat that cat!

Extension activities

  • Can you add another sprite?
  • Can you change the points scored when the new sprite is splatted?
  • Can you create a sprite which should not be splatted?
  • Can you add time to the countdown if the player splats a special sprite?
  • Can you change the backdrop in the last 10 seconds of the game?