Guess the Picture

Scratch GameHard

Can you guess what these blurry pictures are before they are revealed?

In this project we will create a game where blurry pictures appear and slowly get clearer and clearer. The aim of the game is to guess what the picture is before it becomes completely clear!

1

Create a new Scratch project

Create a new Scratch project and delete the cat sprite.

2

Save and upload the picture sprite

Included with this step is a file called 'scgtp pictures.sprite3'. This is a sprite file that has three different costumes which are photos of a rhino, a melon and a bird.

Right click on the link and choose 'Save link as' to save it onto your computer (keep a note of what folder you save it into).

Then in Scratch, upload the sprite into your project as a new sprite.

3

Create the lists

We will need two lists in this game, one list for the questions (e.g. "is it a rhino or elephant?") and one list for the answers (e.g "the answer is a rhino").

Create two lists:

  • one list called questions
  • one list called answers

Once you've created the lists, add the following code to setup the questions and answers. Note that the order of the questions matches the order of the answers.

when green flag clicked delete all of [questions v] add [elephant or rhino] to [questions v] add [melon or orange] to [questions v] add [bird or bee] to [questions v]

when green flag clicked delete all of [answers v] add [rhino] to [answers v] add [melon] to [answers v] add [bird] to [answers v]

4

Create the picture variable

We will also need a variable to store which picture we are currently showing in the game.

Create a variable called picture.

5

Create a custom block called 'show picture'

Next we will create a custom block called 'show picture'. We will program this block to:

  1. Choose a picture
  2. Make it very blurry
  3. Ask the question (by getting the right question from the list for the picture)
  4. Slowly make the picture clearer and clearer
  5. Show the answer once it's fully clear
  6. Show the next picture

Once you've created the custom block, add the following code to show the first picture.

when green flag clicked set [picture v] to (1) show picture

6

Make the picture blurry

Now let's start programming our custom 'show picture' block. We are going to make the picture very blurry.

Note that the costumes in the picture sprite are named as follows:

Costume Name
Picture
1
Rhino
2
Melon
3
Bird


Add the following code to the 'define show picture' block:

define show picture hide // first hide the picture switch costume to (picture)//show the right costume for the picture (note the costumes are named 1, 2, 3 etc) set [pixelate v] effect to (200)// make it very blurry show// show the picture

Test your code is working right by clicking the green flag, the first picture should show but be very blurry (i.e. pixelated).


7

Ask the question and unblur the picture

We will be adding a character from the sprite library to ask and answer the questions at the right times. For now, we will just use the 'broadcast' block to send messages for when the question should be asked and for when it should be answered. Later we will program the character to say the question and answer when it receives the messages.

Add the following code to the bottom of the 'define show picture' block to:

  1. send the 'ask' message
  2. slowly unblur the picture
  3. send the 'answer' message

define show picture hide switch costume to (picture) set [pixelate v] effect to (200) show// add new code under here broadcast (ask v) repeat (10) wait (1) seconds change [pixelate v] effect by (-20)// 10 * -20 = -200 end broadcast (answer v)

8

Add the Robot sprite

Add the Robot sprite from the sprite library and give it the following code so it asks and answers the right question at the right times.

when I receive [ask v] say (join [is it a ] (item (picture) of [questions v])) when I receive [answer v] say (join [the answer is a ] (item (picture) of [answers v]))


9

Show the next picture

Now that we've played one round of the game, let's add some code to give the player a few seconds in between rounds and then show the next picture and ask the question. We can easily do this by using our 'show picture' block again!

Add the following code to the bottom of the 'define show picture' block:


define show picture hide switch costume to (picture) set [pixelate v] effect to (200) show broadcast (ask v) repeat (10) wait (1) seconds change [pixelate v] effect by (-20) end broadcast (answer v)//add new code under here wait (5) seconds change [picture v] by (1)//next picture show picture//uses our custom block to play the next round

Test that your code works by clicking the green flag, you should be able to play 3 rounds with the right question & answer showing for the right picture.

10

Stop after 3 rounds

Now we will add an 'if then' block to only play 3 rounds (as we've only 3 pictures, questions & answers setup).

Wrap all the code underneath the 'define show picture' block in an 'if then' that checks the current value of the 'picture' variable is less than 4.

define show picture if < (picture) < (4) > then//only play 3 rounds hide set [picture v] to (pick random (1) to (length of [questions v])) switch costume to (picture) set [pixelate v] effect to (200) show broadcast (ask v) repeat (10) wait (1) seconds change [pixelate v] effect by (-20) end broadcast (answer v) wait (5) seconds change [picture v] by (1) show picture end

11

Hide the lists and variable

Now that we have everything working we don't need to show the lists and the variable on the screen.

To hide them either set them to 'not show' in the sprite list or use the following code blocks to hide them.

when green flag clicked hide variable [picture v] hide list [questions v] hide list [answers v]

12

Add more pictures!

As an extra challenge and to make the game better, can you think of other pictures, questions and answers you could add?

Think about what code you will need to change to add more rounds.

Here's some ideas:

  • is it a plane or helicopter?
  • is it a bus or truck?
  • is the person happy or sad?

For each new round you add you will need to do the following:

  1. Download a picture onto your computer (e.g a plane)
  2. Upload it as a new costume and rename the costume to the next number (e.g. 4)
  3. Add the question "plane or helicopter" to the questions list
  4. Add the answer "plane" to the answers list
  5. Change the code 'if picture < 4 then' to 'if picture < 5'
End of lesson
Copyright Notice
This lesson is copyright of Coding Ireland. Unauthorised use, copying or distribution is not allowed.

Scratch is developed by the Lifelong Kindergarten Group at the MIT Media Lab. It is available for free at https://scratch.mit.edu