Dept of Computer Science & Engineering

University of Moratuwa

Pre-Academic Term: Computer Awareness

[Version: 2017.1]
---------------------------------------------------------------------------------------------------
Learning Scratch : A Tutorial

Objective
Understand how an algorithm works.

Introduction to Scratch

Scratch is a free programming language that makes it easy to create interactive art, stories,
simulations and games and share those online.

Session I
As our Task 1 we are going to create a moving cat. Once you finish this first task, you can go
ahead to Task 2 and make that cat a dancing cat.

Let’s get some basic understanding.

Page 1 of 14
When you start Scratch you can find a cat in the panel to your left. This is the panel where our

program is running.

The cat is called a Sprite – each object in Scratch is called a Sprite. If you want, you can add new
Sprites from the Sprites panel. We are going to build our program using blocks under Script tab.
Those blocks can be dragged into the grey coloured panel. The commands in these blocks can
control the cat in the white background.

Lets try some simple commands.

Task 1: Make the cat move

1. Click on Motion under Script tab.

2. Drag and drop the block “move 10 steps”
3. Now click on “Events” under scripts. Choose “When flag clicked”. Now click on the
green flag. You can see that cat is moving. Click on the red flag to stop the cat.

4. Try to use other motions as well.

5. Now click on “Control”. Choose “forever”, drag it out and drop it on top “move 10
steps” block and below “When flag clicked” block. (You want the "mouth" of the
“forever” to wrap around the “move 10 steps” block).
6. Change the number of steps to 1 instead of 10 so that cat would move slowly.

7. Now you can see that cat moving forever until it goes out of the panel or you stop it by
clicking red flag.

Page 2 of 14
 8. You can drag the cat to anywhere in the panel and it will start to move from there.

Exercise : Try whether you can turn the cat when you move your mouse pointer. The
required control can be found under “Motion”.

Task 2: Make a cat dance

1. First, let’s add a sound to our program. Drag out a “play drum block” from Sound and
place it under the move block.
2. For this task we set the number of steps to 10 in move block.
3. To make the cat dance, we are going to move the cat back and forth. For that drag and
drop another “move 10 steps” block from the Motion section into forever control block
under “play drum” block”.
4. Now change the number of steps the second block to -10.
5. Add another “play drum block” under the second move block. Then choose a drum
from the pull-down menu; preferably a different one than the first drum.

6. Let’s make cat to say that it is going to dance. Click Looks and drag out a “say” block
and place place in between “When flag clicked” and “forever” blocks.
7. Type in the block to change the words to “Watch me dance!”
8. To make it more interesting, let’s add “change effect” block from the Looks section. We
are going to change the color of the cat time to time using this block.
9. We are going to change the color of the cat on a key press. Drag and drop “when space
key pressed” block from the Events section to the top of “change effect” block.
10. We can now change the color of the cat by pressing the space bar. (You can change what
key the user has to press to give inputs, by selecting a new key from the dropdown list in
the when key pressed block).
11. Now we are done with coding. Your code should like follows.

Page 3 of 14
12. Before we finish, let’s add a background image as the stage backdrop. From the panel
right to the Sprites panel you can find “New backdrop” feature. Click on “Choose
backdrop from library” icon and choose a new backdrop "Spotlight-Stage" from the
library.
13. Now we are done! You can click on the green flag to run your program.

Page 4 of 14
Session II
In this tutorial, we are going to create a two-person racing game in Scratch. The goal of this game
is to go round the track and get to the finish line.

Task 1: Create the track

1. First,click the Stage, which is next to the Sprites list. Then, click the Backdrops tab on the
Tab menu and draw a racing track on the background.
2. On the Toolbar Palette, click the paint can and fill the color of the track to black.
3. Next draw the finish line. Choose line from the toolbar palette. Change the color of the
line to red in the color palette, and draw a red line across the track as shown in the image.

Task 2: Create the green race car

You can either draw a car or upload an image.

To draw a car, create a new sprite by clicking on the small paintbrush in the Sprites list.
Upon doing this, you will see a new drawing area on a tab labelled “Costumes”. Now
draw a green colour car like what’s shown in the above image.

To create a new sprite by uploading an image, click on the file upload icon in the Sprites
list. Now select the image file from the Open File dialog box.

Page 5 of 14
Task 3: Position the car

1. We need to position the car at its starting point on the track. The best place for the car to
start is just past the finish line you created. You can position the car by simply dragging
the car to its location in the Stage area.
2. Now goto the Scripts area.
3. Select Events in the Blocks Palette and drag when flag clicked command to the Scripts
area.
4. Select Motion from the Blocks Palette and drag point in direction () command and place
it at the bottom.

5. Next, drag glide () command which is also under Motion category and place it at the
bottom. Now change seconds to 3 and x, y variable values accordingly.

Task 4: Control turning the car

First, we will move the car upward.

1. Select Control in the Blocks Palette and drag if <> then block to the Scripts area.
2. Now select Sensing in the Blocks Palette and drag the key <> pressed command onto the
empty space within the if <> then block. Click the small arrow next to the word space in
this command and select up arrow.
3. Select Motion from the Blocks Palette and drag point in direction () command and move
() steps command onto the if <> then block. Change the direction to 0 and no of steps to
1. Refer to the below image.

Page 6 of 14
 4. Now we need to move the car in other directions as well. Repeat above three steps with
left arrow, right arrow and down arrow. Note that the value of the directions are -90, 90
and 180 respectively.

5. We want the car to move for the duration of the game. So click Events from the Blocks
Palette and drag forever loop and snap it to the bottom of the glide () commond which we
added in the last task. Now place all the four if-then blocks in the forever loop.

When you’re finished, your script should look like follows.

Page 7 of 14
Task 5: Move the car within the track

If the car goes off track let us move the car to the starting position.

Add the following code to the Sprites. Note that the x and y coordinates in the go to command
should be your starting coordinates and the point in direction should be your staring direction
(right).

Task 6: Finish the game

When the race car passes the finish line, you’ve won. To do this, add the following code to the
Sprites.

Page 8 of 14
Task 7: Add a scoreboard and a timer

Now we will add a scoreboard and a timer.

1. Select Data from the Blocks Palette. You can see two options – “Make a Variable”,
“Make a List”.
2. Click on Make a Variable. Type “Score” in the variable name text box and check For this
sprite only radio button. Click OK. Now you can see more options in brown colour.
3. Add a timer to the game. You can find the timer option under Sensing.
4. Now, add set <> to () command and reset timer command to the code block, which we
created in Task 3. Refer to the below image

5. Next, change the code for finishing the game as follows

Page 9 of 14
Task 8 (optional): Create the orange race car

Do the same thing as you did with the first sprite, but using the w(up), a(left), s(down), and
d(right) keys instead of arrow keys. Once finished, it will look like this.

Congratulations. You have finished creating your first two player game. Now, find a friend and
play your game with him.

Page 10 of 14
Session III
This is our last Scratch tutorial and here we are going to blink a LED using Scratch and
Ardunio.

Arduino is an open-source electronics platform based on easy-to-use hardware and software.

Arduino boards are able to read input from a sensor or a switch and turn it into an output -
activating a motor, turning on an LED. We can tell the Arduino board what to do by sending a
set of instructions to the microcontroller on the board. We will learn more details about Ardunio
in Programming Fundermentals Module in the 1st Semester.

To use with Arduino we need a modified version of Scratch – S4A (Scratch for Arduino). S4A
provides new blocks for managing sensors and actuators connected to Arduino.

Also to program our Ardunio board, we need the Arduino Software (IDE). In order to
communicate with Arduino board from S4A, we need to install a special firmware into our
Arduino board. This installation has been done for you by the laboratory staff. So you don’t
have to worry about it.

Now let’s start our exercise.

Page 11 of 14
Task 1: Program an Arduino board to blink an LED

1. Use the given components and build the circuit that we will use to blink an LED as
follows. Connect the positive pin of the LED to pin 13 as indicated. The resistor (330Ω)
in series is to limit the current through the LED.

2. Now start S4A. As you start the S4A, you would see that it is searching for an Arduino
board. As it finds the connected board the message “Searching board..” would disappear.
3. Now we can build the script we need to blink the LED in the Script panel.
4. Insert a “when flag clicked” block to the Script panel.
5. Then click on Motion to get set of Motion blocks.
6. From the set of blocks, drag and drop “digital 13 on” block under the first block. This
block would make sure that an LED connected to pin 13 is switched on when the
program is running.
7. After we switch on the LED we wait for one second and then we switch it off. For this,
first add “wait 1 sec” block to the script from Control section and then add “digital 13
off” from Motion section.
8. Add another “wait 1 sec” block at the end of blocks.
9. To make it running forever add “forever” block.

Page 12 of 14
 10. Now run your program and check whether it is working properly.

Exercise 1:

1. Modify the program to blink the LED fast

2. Modify the program so that the LED is ON for 1 second and OFF for 0.5 seconds.
3. Modify the program so that the LED will stay ON all the time.

Exercise 2: ON and OFF the LED with keyboard inputs.

Now let’s try to switch on and off the LED using arrow keys. Use up arrow key to switch on the
LED and down arrow key to switch off the LED. You can write a new script for this task.

Hint:

1. You can get a new script from File  New

2. You can use the knowledge you have gained from previous Scratch tasks to complete this
task. Go through the blocks we have used for previous tasks.

Exercise 3: Build a traffic light system (Optional)

Now you are more familiar with Scratch and Arduino. Now let’s build a real world application.
Try to simulate a traffic light system using the knowledge you have acquired so far.

Use the given LEDs, resistors, Arduino board and the breadboard to build the following circuit.
Use pin 13, 12 and 11 to connect three LEDs to the Arduino board. Now program the board
using Scratch so that it emulates a traffic light system.

Page 13 of 14
Page 14 of 14