Scratch game making tutorial 147b

X and Y - intermediate

In this tutorial you will create a game in which the player must help the Cat to reach a red spinning square by entering the correct X and Y co-ordinates of the square.

You will add a scoring system to record how successful the player is and a countdown timer.


We position sprites on the Scratch stage using X and Y co-ordinates. The simplest way is to use the "go to X: Y:" motion script block.

For example ..


Here are some example X and Y co-ordinates ..


The Scratch stage is 480 pixels/steps wide and 360 pixels/steps high.

Width (X) = -240 to 240 = 480

Hight (Y) = -180 to 180 = 360


The center of the stage is X:0 Y:0.


Let's create a game that will test a players understanding of X and Y co-ordinates on the Scratch stage.

Complete these steps ..


1. Open Scratch, OR create a new game (from the top menu choose "File>New").



2. Select the cat sprite, re-name it, and then click the "only face left-right" button ..



3. Add this script to the Cat so you can stop your game by pressing the "E" key on your keyboard ..



4. Now add this script to the Cat to set it's size and to tell the player what to do when the game begins ..



5. Let's make the Cat start from the bottom left corner of the stage and always point towards the Red square.

Add this script ..

NOTE: You will need to come back and select "Red square" in the "pint towards" script block after you have completed step 7 below.


Press the "B" key on your keyboard to test your script. NOTE! If you click the Cat nothing will happen, we haven't added the script yet.



6. Use "File>Save as" to name and save your game. Name it "X and Y" ..



7. Click the "paint new sprite" button under the stage ..


Now select the colour red and the rectangle tool, hold down the shift key and drag to create a red square ..


Click "OK" when you are done and then name the new sprite "Red square" ..



8. On the stage look at your red square. It should not be too big. Something like this is good ..


If the Red square is too big or too small add a script to re-set its size like this ..



9. You need the Red square sprite to go to a random position on the stage when the games begins. The stage is 480 pixels wide and 360 tall.

It is useful to know the following ..


Add this script ..



10. Once the Red square has moved to a random position on the stage it doesn't do anything fun. Let's make it spin. Add this script ..


Press the "B" key on your keyboard to test your game.

When you are ready press the "E" key to end your game.



11. You need one more script on the Red square sprite.

When the Cat reaches it, it will say "You found me!" and then move to another random position on the stage. This script will also use a variable to display the players success as a Score.

Create the following two new variables ..


Now arrange them on the stage like this ..


Add this script ..


This script will not work yet, unless the Red square happens to be touching the Cat sprite when the game begins. We need to add the scripts to the Cat sprite first.



12. Use "File>Save" to re-save it ..



13. Next, select the Cat sprite again. We have some more scripts to add to it.

When the player clicks the Cat, it will ask the player to enter X and Y positions and then it will move to these positions. The player must try to move the Cat to the Red square position.

We can use the "ask" and "answer" Sensing script blocks. The "answer" script block is a pre-made variable that will store whatever the player types in answer to the "ask" script block.

But there is a problem. We don't want the Cat to move until the player has entered both the X AND the Y positions, but there is only a single "answer" variable. We need to transfer what is stored in the pre-made "answer" variable into some variables we have made.

Therefore you must create the following 2 variables ..


Temporarily turn on the "answer" variable and the two variables you just created so you can see them on the stage working as you test the game. You can turn them off again later ..


Now add this script ..


You can see that the Cat will not move until both the X AND the Y positions have been entered.


Go full screen and then press the "B" key on your keyboard to test your game. Watch the variables change as you type in your answers.

When you are ready exit full-screen, and then press the "E" key to end your game.


You can turn off the variables now by un-ticking them (hide them on the screen).



14. Finally, let's add a countdown timer to the stage. You have already made the Countdown variable, so you just need to select the stage and add this script ..


If you like, paint a background for your stage, then go full screen and then press the "B" key on your keyboard to test your game.

When you are ready exit full-screen, and then press the "E" key to end your game.



15. Use "File>Save" to re-save the game ..



16. Well done, you've finished making the game! Can you improve it with your own ideas?