Visual programming with Scratch

2.1 What is Scratch?

Scratch is a free environment created by the Massachusetts Institute of Technology (MIT), where instead of writing code you build a program by connecting colored blocks together. This approach is called visual programming.

Visual programming means building a program not by typing code text, but by connecting ready-made blocks with the mouse. Each block is one command, for example "move 10 steps" or "say Hello".

Why do we start right here? The reasons are simple:

• There are no syntax errors, so you will not get an error from forgetting a bracket or a semicolon
• Blocks only connect where they logically fit, so the structure comes out correct on its own
• You see the result on the stage immediately, which makes learning fun

Most importantly: the ideas you learn in Scratch, namely loop, condition and variable, later work exactly the same in C, Python or JavaScript. So this is not a toy, but a real foundation.

2.2 Stage, sprite and blocks

The Scratch screen has three main parts. On the right is the stage, the area where the program result is shown. Below it is the list of sprites. On the left are the block palette and the empty space where you assemble them.

A sprite is a character or object that moves on the stage, for example a cat, a ball or a rocket. The stage is the background on which the sprites move, that is, the game field.

Blocks are divided into groups by color. By the color you can guess what a block does. Click each category in the palette below:

Note: each color stands for one group of tasks. Blue is movement, purple is looks, yellow is events, and so on. This color logic makes Scratch very easy to read.

2.3 The first script: events

Every program has to start from something. In Scratch, the signal that starts a program is called an event. The most common one is "when green flag clicked".

A set of blocks is called a script. A script always starts at the top with a "hat"-shaped event block, and commands are connected below it one after another. Here is the simplest script:

This script works like this: the user clicks the green flag, the event fires, the sprite says "Hello!". Try it yourself below:

2.4 Movement and looks

Now we make the sprite move. For this we need two categories: Motion (blue blocks) moves and turns the sprite, while Looks (purple blocks) makes it talk or changes its appearance.

Stage coordinates

The center of the stage is the point x = 0, y = 0. Moving right increases x, moving up increases y. The block "go to x: 100 y: 0" places the sprite at an exact spot, while "move 10 steps" pushes it in the direction it is facing.

The most used blocks

Here is a sample script: when the flag is clicked the sprite moves a little forward, then says hello.

• "move steps" pushes the sprite in the direction it is facing
• "turn degrees" rotates it by the given angle
• the text you write in the "say" block appears above the sprite as a bubble
• "switch costume" changes the sprite's appearance, which creates animation

Control with keys: the power of events

Real games respond to the user's keys. The "when arrow key pressed" block catches a keyboard event and moves the sprite in that direction. Press the arrows below (or click the stage and use the keyboard arrows):

2.5 Loops: repeating something

Imagine you want to draw a square with the sprite. A square has 4 equal sides and 4 corners. So you would have to write the pair "move forward" and "turn 90 degrees" four times. Copying this by hand four times is boring and error-prone.

The solution is simple. A loop is a block that automatically repeats a group of commands a set number of times. We just put two blocks inside the "repeat 4 times" block:

Did you see it? Just 3 blocks (1 loop + 2 commands) drew the whole square. Loops make a program short, clean and error-free.

There is one more special loop: forever. It repeats the blocks inside without stopping, until the program ends. For example, in a game the block "forever: move toward the mouse pointer" keeps an enemy chasing the player at all times.

2.6 Conditions and sensing

So far our program ran in the same sequence. But real programs make decisions depending on the situation. For this you need a condition.

A condition is a question whose answer is only "yes" or "no", for example "did the sprite touch the edge?". The Sensing category (light blue) provides such questions. The "if ... then" block runs the code inside only when the condition is true.

The most useful form is the "if ... then, else" block. It chooses one of two paths: if the condition is true the first part runs, if false the second part runs. Click the button below and watch which branch lights up:

Conditions give the program a "mind": now it senses the situation and acts differently depending on it.

2.7 Variables

How do we count the score in a game? Where do we store how many lives the sprite has left? For this a variable is used.

A variable is a named "box" that stores a value, for example "score", "lives" or "speed". You can read or change the value inside the box at any time.

It is important not to confuse two basic operations. "set to 0" erases the old value in the box and writes a completely new one. "change by 1" adds to the number in the box. Try both below:

2.8 Practice: build the script yourself

Now we combine everything. By clicking blocks in the palette below, build a script, then click the green flag and let the sprite run your commands on the stage. By changing the repeat count, you can also wrap the whole script in a loop.

Note: the sprite runs the blocks from top to bottom, exactly in the order you placed them. This is that same rule of sequence. If you increase the repeat count, the loop plays the whole dance over and over.

2.9 Real projects

Now, by combining the four ideas you have learned (sequence, loop, condition, variable), we will look at full programs like those in real games. Each one is a real project you can build right away in Scratch.

Project 1: A ball bouncing off the wall

This is the most popular first game. The ball moves nonstop and bounces back when it hits the wall (the edge). Here is the whole program, just a few blocks. Run it on the stage next to it:

The "forever" loop is the heart of the game: it runs without stopping. Inside it there are two tasks, namely movement and checking a condition. This pattern appears in almost every game.

Project 2: A cat collecting apples

Now we combine a variable and sensing. If the cat touches an apple, "score" increases by one. This is the basis of any "collecting" game:

And the apple we drop from the sky by making a clone (we will see this in the next section). These three ideas: loop, condition and variable, fully make up a whole game.

Project 3: Control with arrows

Above we moved the sprite with buttons. In a real game the code for this is very short: a separate small script for each arrow. If you want the cat to move right:

Note: these two scripts run at the same time, independently. In Scratch many scripts can live at once, each waiting for its own event.

Predict: what does this script do?

Reading code is as important as writing it. Look at the script and find the result. When you click an answer, the correct one is marked:

2.10 Going deeper advanced

You have mastered the basics. Now let us get to know the powerful features of Scratch. These concepts also exist in real programming languages, just under different names.

Messages (broadcast)

A message (broadcast) is a signal that one sprite sends to another. One sprite uses the "broadcast message" block, and the second responds through the "when I receive message" block. This way sprites "talk" to each other and scenes change. This is exactly the event system of real programming.

Clones (clone)

A clone is a copy of a sprite created while the program is running. It is used to create dozens of bullets, stars or enemies from a single sprite: you draw one, and clone it at the right moment. This is very close to the idea of an "object copy" in large programs.

Lists (list)

A list is a structure that stores many values in order under a single name. For example, a high-scores table or a set of questions. While an ordinary variable stores one value, a list stores a whole list. This is the very concept of an array in real languages.

Your own blocks (custom blocks)

If a group of blocks repeats many times, you can collect them into one new block. A custom block is a block created by the user and called by a single name. For example, by making your own "draw star" block, you use it anywhere with a single click. This is the beginning of the concept of a function in programming, that is, a tool for reusing code and reducing complexity.

2.11 Knowledge quiz

Before the quiz: key terms

The concepts you learned this week. Glance over them before the quiz:

Now let us try

16 questions. To finish the week, answer at least 11 correctly.