Create a City Map Guessing Game With Scratch

by monyache72 in Teachers > Resources

3409 Views, 13 Favorites, 0 Comments

Create a City Map Guessing Game With Scratch

city guessing game with scratch
Bild14.png

Hello everybody

In this instructables I'm going to explain you how I made this city guessing game in scratch. Even if you haven't heard of scratch yet you should be able to follow along.

When I looked at the map of Split I thought, that it should be possible to recognise cities by their maps. Then I thought it would be a funny idea if I created a game with that information. Scratch seemed to be the easiest and fastest way to create it and put it online that also other people can enjoy it.

Here is the game that I made and I will describe in the next steps.

Supplies

  • Scratch
  • Google maps or something similar

Create a Scratch Project

Bild1 (1).png

The first thing you have to do is to create a new project in scratch. For this you can click on this link. It brings you directly to the start page of scratch. It is very helpful if you create an account because then you can save your work easily and it's for free. When you click on your stuff, you can further click on "new project" and then you should see something similar to the picture above. I already deleted the cat because we don't need it.

If you are using scratch the first time you should know, that scratch is a very intuitiv way of programming. On the left site of the window you can see the codeblocks which you can use. In the middle part you can put these codeblocks together and make awesome things with your game characters. On the right side you can see your game and the characters that you have. At the moment it seems very empty. So let's move on to the next step where I explain you how we start.

Make the Background

Bild2 (1).png

I want to start with the background because this will be the first thing the player will see when he/she is pressing the green flag. I chose some kind of dark grey because I wanted to take a orange to yellow looking text. So I made a rectangle and filled it with the dark grey color. Then I wrote the text with the orange color.

The Maps

Bild3.png

The next step is to take some maps and include them into the game. For that you can use this link. It leads you to a site where you can modify a map. Now you can take your favorite cities or just random cities that come to your mind and put the labels away. Otherwise the game would not make sense because you could read the answer. Make a screenshot and save it. I made a PowerPoint with the pictures of the cities I took and turned it into a PDF.

Make the Buttons in the Game

Bild4.png

Now it is important to create the buttons because then you can estimate where to position the maps in the background. For that you can create a sprite in which you can draw the things by your self. With a rectangle you can create a button in whatever color you want. When you create the sprite you can move it in your game view with your mouse. If you don't want that you can or better schould make the same code structure like in the picture above but with your values for x and y. The values go to the right position when you drag them into your field.

Include the Maps

Bild12.png

When you click on more backdrops you can include your pictures from before. Then a lot of different backdrops occur. They will switch during the game. That's the reason why we don't need to create a lot of sprites.

Starting Button

Bild13.png

It's also important to have a button to start the game. For this you can create another sprite in whatever color you want. I chose orange because it matches my light orange text. Then move the button to the position where you think it looks nice and the save the position with the code in the picture above. The difference to one of the last steps is that we want to have the start button right when we click on the green flag. With the option buttons wo don't want that because they don't do anything to start the game. That's why they should hide.

When you now press enter, you see the background with what you have to do and the starting button. But if you click on something nothing happens. That's because none of the elements has got an action so far.

Write Down Possible Answers

Bild15.png

Before programming, the ansers that you can click should be defined. For that go to the buttons and add random cities for the first map. But be careful, one of them has to be the correct answer :). For the second map you just duplicate the first answer to make another costume of the sprite and write the next answer down. Then you move on and make the same thing until you're through your maps.

Correct and False

Bild16.png
Bild14.png

You should get feedback if you're answer is correst or false. For that you can create a new sprite with two costumes that show you the state.

Code the Starting Button

scratch_corr.png
Bild14.png

First of all we need another costume for the starting button. After the game you might want to restart it. Also we want to count the points. For that we use a variable. When you click onto the field "Make a Variable" you can type in the name of your variable. I named mine "score". At the end of the game you can see how much you had correct.

Messages are used to tell the characters exactly when to do what because you can send a message when a character should do an action. We need a message named "start game". Then we need also a message named "finish" because that's when our start button should show. The other task of it is to reset the score and the level. You can look at the code in the picture above.

Coding the Other Buttons

Bild18.png

The other buttons are very similar to each other because they are the ones that you click during the quiz. I made another variable because I want to track the levels or images for the clicks. Otherwise it's a little hard to know when the answer is correct and when not.

When the game starts the sprite should show.

When it receives the message next, which will be send from the "correct" or "false", it should switch to the next costume.

After the game it should hide.

When the sprite is clicked the variable level get's a lot of importance. It checks at which image we are - indirectely - and then tells you if you are right or wrong with your answer.

The other buttons are similar to the first one but without the variable "level".

Code the Correct or False

Bild19.png

When the game starts the "correct" or "false" should hide because we don't want to get feedback for no action that we did.

When the message "correct" is send, the score changes by 1. It's important to switch the costume because we don't know whether our prior answer was correct or false. Then we show, wait a second and hide again. The last action is to broadcast next, to make the game go on.

The message "false" is very similar to the correct one. Just the score isn't present there.

Code the Backdrop

Bild10.png

Also the backdrop needs some code because it has to switch between the costumes. And the backdrop has to switch also every time the restart is pressed.

I also thought that it's nice to see what the score means more or less. I mean actually every single point is very good because I wouldn't be sure if I get one the first time I play :)

Enjoy Your Quiz Game

Bild11.png

Now the work is done and you can play it. You can also send the links to some friends and ask them if they got them right.

If you think that this is not enough you can expand it too.