February 1, 2017

Cracking the Code with Scratch2

Writer Emeritus

Can you crack the code? Scratch the Cat has a fiendish math quiz that will test your knowledge of multiplication and division. Scratch has selected three numbers, but he won’t tell you what they are, you need to guess the answers by answering three math questions.

This game has a simple premise and uses a simple math question as its core, which teaches the basics of division to learn what the coded number is. But at the heart of the game we cover quite a lot of Computer Science concepts:

Simple algorithm that controls our game
Data storage via lists, creation and deletion of contents
Iterative loops, loops that repeat a set number of times
User input and storage
Conditional tests to check the answers given are correct

But of course we are going to have some fun! So let’s start our code breaking journey!

What will you need for this project?

Any computer with an Internet connection.
The code for this project can be found at https://scratch.mit.edu/projects/134373952/

Getting Started

To code our project we shall open a web browser and visit http://scratch.mit.edu and click on Create to start a new project, as shown in Figure 1 below.

Scratch 101

Figure 1. The Scratch 2 Interface: Stage/Sprites, Blocks, and Code Area

The Scratch 2 interface is split into three columns. The first column we see The Stage, this is where our project can be seen and interacted with. Underneath the stage we see our Sprites, these are the characters and objects that exist in our game. By clicking on a sprite, we can create code or change how the sprite looks using costumes.

The second column sees the Blocks that will make up our code. As you can see they are grouped by what they do, for example the Looks blocks create visual output such as moving a sprite. Each of the groups are color coded, enabling children to look for a particular block by its color. You can also see tabs for Costumes, and Sounds. These enable us to change how our sprite looks and sounds. The final column is the Coding Area. In here we drag blocks from the second column and build up our code, block by block.

Our game is a code breaker game, where Scratch will randomly select three numbers between one and thirty. The player is then given a math question to find each number. We then save each number, and if the code is correct we hear applause, if not we lose the game.
So let’s start building our game!

Coding the game

When working with Scratch, we need to ensure that we are writing code for the correct sprite. By clicking on the sprite we can change our focus to write code.

We start the project by ensuring that our Cat sprite is selected, this means that any code written applies to only this sprite. Our first block of code is an Event, a trigger to start the game. We are going to use When Green Flag Clicked from the Events blocks list. Drag this block to the Coding Area.

We next create two lists. Lists are a way to store many items of data. A real world example of a list is a school register, the name of the list is Register and data items in the list are names of children in the class.

We are going to create two lists for the game one list stores the computer generated numbers, and the other captures the player’s guesses.

Our first list is called code and we create it by going to the Data blocks and clicking on Make a List. See image below.

Now create a second list called Guesses which we shall use to store the player’s answers. In the Data blocks you will see Guesses and code blocks, each with a tick next to them. This tick enables the the player to see inside the list via The Stage area. We need to turn this off to stop cheaters! So remove the tick from each box before continuing.

Each time we start the game we need to ensure that both lists are empty and ready to store new data. To do this we use two blocks from the Data blocks. You will see a block called Delete 1 of Guesses Drag this block and connect it to When Green Flag Clicked then change the block so that it reads Delete all of code then do the same to delete all of the entries in the Guesses list.

Figure 4. Add Delete Blocks to When Green Flag Clicked Block

Next up we create a way to add three randomly chosen numbers to our code list. To do this we use a Repeat 10 loop from Control, this is a loop that will go round a set number of times. Drag this into the Coding Area and connect it to our previous blocks. Change the 10 to a 3 as we only need three entries for our list.

Now inside of our loop we need to use an add thing to code block from Data and change it using a Pick random 1 to 10 block from Operators. We drop this random block into the box that reads thing, changing the contents to create a random number between 1 and 30. Your blocks should now look like Figure 5.

Our next block can be found in the Looks blocks, Say Hello for 2 secs. We are going to use it to give instructions to the player. We say the sprite is thinking of three numbers between 1 and 30 and the player has to guess them to win. We give the player 5 seconds to read the text before we move on. Your code should now look like this.

With the secret codes stored in our list, we now need to add data to our Guesses list by asking the player three questions.

In the Sensing blocks you will see a block called ask What’s your name? and wait. Drag this block to the Coding Area and attach it under the loop we have just created.

We now have to change the question, and we shall use the Join hello world block from the Operators blocks. Drag one of these blocks into the Coding Area. Place it inside the text box for our Ask block and then go back to the Operators blocks and drag _ * _ onto the Coding Area. Place it into the world textbox. Now go to Data and drag the item 1 of code block into the hello text box. Now the sprite will ask the player to guess the number which when multiplied by, say 5, is another number.

This means that to solve the question the player will have to divide the answer by 5 to get the original number. We then capture the player’s answer using the answer block from the Sensing blocks and store that in our Guesses list using the add to Guesses block from Data. Repeat this a further two times, changing the text to reflect the 1st, 2nd, and 3rd numbers.

Figure 7. Add Randomly Generated Numbers

So now we have our randomly generated numbers, and we have captured the players answers. We now have two lists containing three numbers in each list. Let’s compare each list and see if the user guessed correctly. We are going to use a conditional test, otherwise known as if. If the players answer matches the value in our code list then that condition is found to be true and a relevant section of code is run.

If the condition is false, this means that our guess did not match the answer, and this will activate the code in our Else condition. An Else condition must be true if all other conditions are false. From the Control blocks drag an If..Else block to a blank section of the Coding Area.

We now need to write the condition to test, and this is to compare the guess with the actual answer. From the Operators blocks drag the _ = _ block and place it in the blank hexagon shape of the If condition.

This is a comparison block used to compare the left value with the right. In the left we shall use item 1 of Guesses and in the right item 1 of code which can be found in the Data blocks. Don’t worry if you can’t find one of them, it is the same block, just use the black drop down arrow to change the text in the block.

With the test written we need to write the code that will trigger if the player is correct. Here we use a say block from Looks to say that the code has been cracked. If the player is wrong we do the same thing but change the text to inform the player they are wrong.

Repeat this process two more times to compare the data in both lists. Remember to edit the item number by clicking on the number and typing the correct value. The block of code should look like this, and if so then join it under our already written section of code.

Our final section of code is an If conditional test, so grab another If..Else block from the Control blocks and place it in a blank section of the Coding Area.

Figure 8. Add If..Else Blocks to Evaluate Guesses

Our test this time is to check that that information stored in our guesses list is the same as the computer generated information stored in our code list. So from the Operators blocks find the _ = _ block and place it inside the hexagon shape of our new If..Else block.

To compare the lists we need to go to the Data blocks and you will see two rounded blocks under the Make a List button, drag each one over to the spaces in the
_ = _ block. It doesn’t matter which one goes in which space. Your code should look like this.

With the test completed we now need to write the code that will run if the player guesses the correct number sequence. First of all we use a say block from Looks. If the player is correct, it will say “YOU WIN!!!” for 2 seconds. But this is not enough, let’s add sound!
Click on the Sound blocks and you will see play sound meow until done, the block that we need in our game. But before we drag it across let’s change the sound.

Look to the top of the second column and you will see the Sounds tab. Click on the tab and you will see a new screen replace the Coding Area. This is a visual representation of the meow sound. If you look carefully in the second column you will see New sound and underneath that a speaker icon. Click on the icon to open the sound library. See Figure 10 below.

Select any sound that you wish, we chose Cheer, which can be found in the Human category. Remember to click on the sound and not the play button to select the sound, then click on Ok to load the sound.

Now we need to click on Scripts to return to the Coding Area, and now drag the play sound meow until done block and place it inside the If condition, underneath the say block. So now when the player wins it will play that sound.

Try and complete the code for the Else condition, remember this code runs when the player loses.

Your code should now look like this and if that is correct, connect this last section of code to the bottom of the main body of code.

That is all of the code for this project, now lets test to see that it works correctly. Start the game by clicking on the Green Flag.

Scratch will give the player instructions and then ask for three numbers based on a simple math quiz. It will then check each number to tell us if we guess each number correctly. Lastly it will check that our guesses matched the list and then it will react accordingly.

Here are some ideas to customize your game:

Do you think that you could extend the game?
Add more sounds, at the start and end of the game?
Change the background of the game?
Animate the Cat to dance around the screen while asking questions?

Well done, you have made your own codebreaker game!

The code for this project can be found at https://scratch.mit.edu/projects/134373952/

Learn More

Writer Emeritus Les Pounder 24 posts

Les Pounder is a freelance journalist who loves to tinker with Raspberry Pi, robots and Arduinos. He writes for print magazines and regularly writes blog posts for Element 14.

The Latest
View All

Update: Your beanz Magazine Subscription

Can AI Find Clues to Aliens?

Code a Choose Your Adventure Game

World Gen Mods Ramp Up Minecraft Play