ST LOUIS

LOREM
SCHOOL
ST LOUIS
IPSUM
SCHOOL
DOLOR

S3 Computer Literacy

S3 Scratch Programming

Dominic Kwok
CHAPTER 1

Scratch

After studying this chapter, you will be able to

• create a simple Scratch program
• upload file to Scratch Server

1
Chapter 1 Scratch

1.1 Introduction to Scratch programming

Scratch is a new programming language that makes it easy to create interactive stories,
games, and animations – and share your creations with others on the web.

Official Web Site: http://scratch.mit.edu/

Current version of Scratch is 2.0 which allows you to create, edit and view projects directly in
the web browser. However, it is still undergoing development. In our lessons, we choose to use
the previous version of Scratch.

1.2 Downloading Scratch 1.4

It's free of charge.
You may go to http://scratch.mit.edu/scratch_1.4/ to download.

2
1.3 Sign up an account in Scratch Web Site
After becoming a member of the Scratch Web site, you will be able to share your works with
other members. More importantly, you can download other members' works to see how their
programs work.

3
Step 1: Step 3:

Step 2:

4
 To watch the Scratch project through web browser, you have to make sure Flash Player plug-
in have been installed properly.

1.4 Scratch Interface

5
Stage
The Stage is where you see your stories, games, and animations come to life. Sprites move and
interact with one another on the Stage. The Stage is 480 units wide and 360 units tall. It is di-
vided into an x-y grid. The middle of the Stage has an x-coordinate of 0 and a y-coordinate of
0.

To find out x-y positions on the Stage, move the mouse (cursor) around and look at the mouse
x-y display just below the Stage.

6
1.5 My First Simple Scratch Program Movie 1.1 My First Scratch Program

Step 1:
Start a new file in Scratch (File à New)

Step 2:
Drag the "go to x: y:" block into the Scripts area.
Then change the value inside the block as x = -180 and y = 0

Step 3:
Drag out the "move steps" block and snap it onto the "go to x: y:" block.

7
Step 4:
Click the Control button in the block category area.

Step 5:
Drag the "forever" block and snap it between the "go to x: y:" block and "move steps" block.

Step 6:
Drag the "wait secs" block and snap it under the "move steps" block. Change the value from 1
sec to 0.2 secs.

8
Step 7:
Click the Looks button in the block category area. Then drag the "next costume" block and
snap between the "forever" block and "wait secs" block.

Step 8:
Drag the "when clicked" block in the Control block category and snap it over the "go to x: y:"
block.

Step 9:
Click the green flag button at the upper right hand corner of Scratch program to test run the
program.

9
Step 10:
Save the file as "D:\temp\lesson1.sb" and upload the scratch program.

10
Notes:
You can share or upload projects made with earlier versions of Scratch, and they will be visible
and playable. (However, you can’t download projects made with or edited in later versions of
Scratch and open them in earlier versions. For example, you can’t open a Scratch 2.0 project in
Scratch 1.4, because Scratch 1.4 doesn’t know how to read the .sb2 project file format.)

11
Class work
Create a simple Scratch program with the following requirement:
• A dog is walking to and fro in the stage. [Hint: use if on edge, bounce command]
• The animation starts after the user pressing the "space" button.
• Change the background picture.
• After each bouncing, a color effect should apply to the dog. [Hint: use if, change color effect by
& touching edge command]
Save the file as "D:\temp\3XYYcw1.sb", where X is your class, YY is your class number.

For capable students:

• The dog will become bigger for 2 seconds and then restore back to original size when it touches the
mouse pointer. [Hint: use set size to command]
• Upload the program to the Scratch web site.

12
CHAPTER 2

Sprites

After studying this chapter, you will be able to

• modify existing sprites
• make different costumes
• make a simple maze game

13
Chapter 2 Sprites

2.1 Basic Ingredients of a Scratch Project

Scratch projects are made up of objects called sprites (角色). You can change how a sprite

looks by giving it a different costume (造型). You can make a sprite look like a person or a
train or a butterfly or anything else. You can use any image as a costume: you can draw an im-
age in the Paint Editor, import an image from your hard disk, or drag in an image from a web-
site.

14
You can give instructions to a sprite, telling it to move or play music or react to other sprites.
To tell a sprite what to do, you snap together graphic blocks into stacks, called scripts. When
you click on a script, Scratch runs the blocks from the top of the script to the bottom.

It is possible to control your sprite using the mouse keys. There is a small pointer next to the
Sprite symbol at the top of the screen which can be set to any angle thereby determining the
natural direction of movement of the sprite.

15
2.2 Bouncing ball demo Movie 2.1 Bouncing ball demo

Step 1:
Start a new file in Scratch (File à New)

Step 2:
Choose a new sprite (basketball) from Things folder.

16
Step 3:
Remove the default sprite "cat" by using the scissors button. (Click on the sprite that you want
to remove after clicking the scissors button)

Step 4:
Click the costume tab. You may change the name to "basketball".

17
Step 5:
Copy the existing "costume" then click Edit button on the copied costume.

Step 6:
Do a little change in the Paint Editor (e.g.: click the Rotate clock-wise button)

Step 7:
Repeat Step 4 to Step 6 to make more costumes for the sprite "basketball".

18
Step 8:
Click the Scripts tab.

Step 9:
Change the sprite direction.

Step 10:
Add the following blocks and change setting.

19
Step 11: Test

20
2.3 Scratch Essentials
1. Change Color

21
2. Move to a Beat

22
3. Key Moves

23
4. Say Something

24
5. Glide

25
6. Follow the Mouse

26
7. Dance Twist

27
8. Interactive Whirl

28
9. Animate It

29
10. Moving Animation

30
11. Surprise Button

31
12. Keep Score

32
2.3 A maze game demo Movie 2.2 A maze game demo

Step 1:
Start a new file in Scratch (File à New)

Step 2:
Select the stage thumbnail.

Step 3:
Edit the default background.

33
Step 4:
Use the build-in brush tool to draw a maze.

Step 5:
Add a new sprite "cat2".

Step 6:
Remove the default sprite.

34
Step 7:
Add the following script blocks.

Step 8:
Test your scratch program.

Up to now, you have been successfully created a sprite that can be controlled by keyboard. The
sprite will stop when it touches the wall of the maze.

In the following steps, you will learn how to make the destination mark and tell the user how
much time had been spend.

35
Step 9:
Draw a red mark near the exit of the maze.

Step 10:
Modify the script of the sprite as follows.

36
Step 11:
Test the program.

37
Class work
Modify the previous maze program with the following requirement:
• Add one more sprite to act as the other competitor (Use key "A" to rotate left and key "D" to
rotate right.)

Save the file as "D:\temp\3XYYcw2.sb", where X is your class, YY is your class number.

For capable students:

• Upload the program to the Scratch web site.
• The sprite will say the time used in complete sentence. [Hint: use join command]

38
• Add a moving object such that the controlling sprites will return to the original position when
touching the moving object. [Hint: use glide secs to x: y: command in the moving object
sprite and touching sprite command in the controlling sprites]

39
• After pressing the key "C", there will be other maze and pressing the key "B" to restore. (All
sprites will go to the entry position) [Hint: Add scripts onto the stage.]

40
CHAPTER 3

Variables and List

After studying this chapter, you will be able to

• make use of variables in Scratch
• make use of timer block
• make use of list in Scratch

41
Chapter 3 List and Variables

3.1 Variables Block

Variables blocks are one of the eight categories of Scratch blocks. They are color-coded orange.
Variables are used to hold values and strings which are useful to store marks and levels infor-
mation in a game.

When you create a variable, you have to decide this variable is for all sprites or just for one
sprite.

42
3.2 Timer Block
The Timer block is a Sensing block and a Reporter block. The block holds the timer's value. This
block is almost always used with the Reset Timer block - usually the timer must be reset at the
beginning of a project for the Timer block to hold the right value.

Movie 3.1 Mouse click counter demo

3.3 Mouse click counter demo

Step 1:
Start a new file in Scratch (File à New)

43
Step 2:
Add 3 variables (mark, remain, start) to the default sprite.

Uncheck the mark beside the "start" reporter.

44
Step 3:
Drag the "set to" block in the script area 3 times and then change the variable setting by press-
ing the pull down menu inside the "set to" block.

Then drag a "When (green flag) clicked" block and snap over the "set to" block stack. Change
the setting as follows:

45
Step 4:
Change the readout (large readout) on the stage by right click the "remain" variable object.

46
Step 5:
Add the following script blocks.

47
Step 6:
Test the Scratch program in fullscreen mode.

48
3.4 List
A list (similar to an array in other programming languages) is a tool that can be used to store
multiple pieces of information at once. A list consists of items, each of which work somewhat
like a variable, but with differences. Items can be added to a list manually or by programming.
Items can be deleted in the same manner: manually or by programming. There is no limit to
the length of an item or the amount of items a list can hold.

List demo Movie 3.2 List demo

Step 1:
Start a new file in Scratch (File à New)

49
Step 2:
Add a list named "ideas".

Step 3:
Import the content from a text file.

50
Step 4:
Add the following script blocks.

Step 5:
Test the Scratch program.

51
Class work
Modify the list program with the following additional requirement:
• When the user click the sprite, the program will ask user to input extra idea. The typed idea
will be appended to the idea list. [Hint: use ask and wait, answer and insert list script
blocks]

Save the file as "D:\temp\3XYYcw3.sb", where X is your class, YY is your class number.

52
For capable students:
• The sprite will response some predefined questions. For example, after inputting "How are
you?" , the sprite will response with "I am fine, thank you.".

• Upload the program to the Scratch web site.

53
CHAPTER 4

Game Programming

After studying this chapter, you will be able to

• create a Pong game
• modify the rules of the Pong game

54
Chapter 4 Game Programming

4.1 A Pong game demo

It's time to learn how to make the classic arcade game (in fact the first game) Pong. Basically
it's a bit like tennis. In the following tutorial, you will learn how to make this simple game by us-
ing Scratch.

55
Creating background and some paddles Movie 4.1 Pong game demo

Step 1:
Start a new file in Scratch (File à New)

Step 2:
Select the Stage thumbnail and click Edit under the Background tab.

56
Step 3:
Select the Stage thumbnail and click Edit under the Background tab.

• Fill the background with black.

• Draw two rectangle (with different gray colour) on the opposite sides.
• Draw a white vertical center line.

57
Step 4:
Remove the default sprite by using the scissors button.

Step 5:
Click the "Paint new sprite" button and then draw a paddle. After creating the first paddle, you
may copy by right-clicking the sprite and choose duplicate command.

It is optional to rename the left and right paddles to "left paddle" and "right paddle" respec-
tively.

Place two paddles on two sides.

58
Step 6:
Add the following script block to the "left paddle" sprite and "right paddle" sprite respectively.

59
Moving the ball
Step 1:
Choose a new sprite (basketball) from Things folder.

60
After adding the ball sprite to the stage, reduce the size by using the Shrink sprite button.

61
Step 2:
Add the following script blocks.

62
Bouncing the ball of the paddles
Step 1:
Modify the script blocks of the ball (sprite1) as follows.

63
Keeping the score and adding a random element
Step 1:
Add two variables to store the scores of two players.

Then place the scores variable holders on the stage.

64
Step 2:
Add the following script blocks.

65
Class work
Modify the previous program with the following requirement:
• Use mouse to control one of the paddle. [Hint: use set y and mouse y script blocks]

Save the file as "D:\temp\3XYYcw4.sb", where X is your class, YY is your class number.

For capable students:

• The ball will move faster after each bouncing of the paddle. [Hint: add a new variable to store
the speed of the ball.]
• Upload the program to the Scratch web site.

66
CHAPTER 5

WeDo and Scratch

After studying this chapter, you will be able to

• connect the Lego block (WeDo Lego set) with Scratch
• work with Motor block and distance sensor

67
Chapter 5 LEGO WeDo and Scratch

5.1 LEGO WeDo

LEGO WeDo Construction Set enables students to build LEGO models that attach to the LEGO
USB Hub and then control the models using computer programs. The set contains 158 elements
including a LEGO Hub, motor, tilt sensor and a motion sensor that add movement and intelli-
gence to the model.

Official Web Site: http://education.lego.com/

68
5.2 Wedo parts
Here are the WeDo parts and how you can use them with Scratch.

Hub
It is used to connect the WeDo parts to your computer

69
Motor
It is used to make things turn.

Distance sensor
We can use it detect moving objects from this sensor

70
Tilt sensor
The tilt sensor detects changes within five different positions: Tilt This Way, Tilt That Way, Tilt
Up, Tilt Down and No Tilt.

71
5.3 Interact WeDo sensor with a Sprite
You can use the LEGO WeDo distance sensor to interact with characters on the screen.
Step 1:
Plug the hub into your computer, and the distance sensor onto the hub.

Make sure it's the distance sensor. It looks like it has two "eyes."

72
At the bottom of the Scratch category, locate the sensor value block:

Step 2:
Choose distance from the pull-down menu.

Click on the checkbox to display the sensor value on the Stage:

Now, try moving your hand towards and away from the sensor, and watch the number change
(from 0 to 100).

73
Step 3:
Move your hand to change a character's size.

Get a block. Drag into it, so it looks like this:

Put it a forever block around so it will keep updating:

Move your hand towards the distance sensor, and watch the sprite change size.

74
5.4 Using Scratch with a Motor
Now try giving the WeDo motor a spin.

Step 1:
Connect the motor to the WeDo hub.

Step 2:
Add something to the motor so you can see it spin.

75
Try attaching different things, such as: a printed picture, a pattern drawn on a circle, or colored
ribbon.

Drag this block into the Scripts area:

Click to start the motor.

Try typing in a different number to change how many seconds the motor spins.

Step 3:
Drag out a motor power block:

76
Try changing the number, 100 is the highest. What is the smallest number that can still make
the motor turn? You can use the distance sensor to control the motor speed.



Make sure the motor and the distance sensor are plugged in (side-by-side) on the WeDo hub.
Try this:

Notice how the speed of the motor changes based on how close you put your hand to the sen-
sor.

77
5.5 Samples
WeDo Distance Sensor 1

78
WeDo Distance Sensor 2

79
WeDo Motor 1

80
WeDo Motor 2

81
WeDo Tilt Sensor 1

82
WeDo Tilt Sensor 2

83
Class work
Work in group of two, use the given LEGO bricks (use distance sensor and motor) to build a heli-
copter with the following requirements:
• The rotor will start to rotate when the program starts.
• Use a helicopter as the sprite and it will change it’s vertical position on the screen to the ac-
tual vertical distance between the distance sensor and the desk (distance sensor is facing
downwards). [Hint: use set y to, motor on script block]

For capable students (use tilt senor and motor):

• Use tilt sensor to control the horizontal and vertical movement of the helicopter sprite.
[Hint: use point to direction, change x by, change y by script block]
• The rotor will rotate faster at higher position
[Hint: use motor power, y position script block]

84
CHAPTER 6

WeDo Scratch Project

After studying this chapter, you will be able to

• build a simple LEGO model with given building instruction
• write some simple scratch program to interact with the model

85
Chapter 6 WeDo Scratch Project

6.1 LEGO WeDo Models

There are 12 set of models that can be built.
1. Dancing Birds (https://www.youtube.com/watch?v=-dzTSOud13A)

Suggestion:
Add tilt sensor to control the direction of rotation and try other combination of pulleys with
different sizes.

86
2. Smart Spinner (https://www.youtube.com/watch?v=8knRqCL3xeA)

Suggestion:
Press the sprite to start the motor.
Change tilt sensor to turn off the motor.

Question to think:
What should be shown on the screen?

87
3. Drumming Monkey (https://www.youtube.com/watch?v=G6Vxl1Ypc5g)

Suggestion:
Add some sprites to program to dance.
Try different combination of cams.

Question to think:
What should be shown on the screen?

88
4. Hungry Alligator (https://www.youtube.com/watch?v=yVErqs5K3NM)

Questions to think:
How to close the mouth and how to open the mouth?
What should be shown on the screen?

89
5. Roaring Lion (https://www.youtube.com/watch?v=24bEr8XPndQ)

Suggestion:
Use tilt sensor to control the lion.

Question to think:
What should be shown on the screen?

90
6. Flying Bird (https://www.youtube.com/watch?v=MwhsNgxRDyc)

Suggestion:
Use tilt sensor to detect the orientation of the bird, the sprite will change or move
correspondingly. Use distance sensor to detect the head of the bird.

Question to think:
What should be shown on the screen?

91
7. Goal Kicker (https://www.youtube.com/watch?v=qTgva1jufRQ)

Questions to think:
When should the goal kicker kick the ball?
How to return to the original position?
What should be shown on the screen?

92
8. Goal Keeper (https://www.youtube.com/watch?v=P0UbQH8egRc)

Suggestion:
Add variable to store the score.

Question to think:
When should the score be increased?
What should be shown on the screen?

93
9. Cheerful Fans (https://www.youtube.com/watch?v=CWgDZDdorww)

Questions to think:
When should the soccer fans cheer?
What should be shown on the screen?

94
10. Airplane Rescue (https://www.youtube.com/watch?v=O1U3V8PBCK8)

Suggestion:
Add tilt sensor to control the speed of rotation (tilt up means faster).

Question to think:
What should be shown on the screen?

95
11. Giant Escape (https://www.youtube.com/watch?v=_d8k3nLXKTo)

Question to think:
When should the giant be waken up? How to put it down?
What should be shown on the screen?

96
12. Sailboat Storm (https://www.youtube.com/watch?v=bSkqaB5AmfU)

Suggestion:
Use keyboard to control the rotation speed.

Questions to think:
What should be shown on the screen?

97