From Hello Scratch! by Gabriel Ford, Sadie Ford, and Melissa Ford

You want to make the games, right? I know. I want to jump straight to the game making too. But I also know that learning key computer science ideas first makes that whole game-making thing a lot easier. It helps you jump into coding, helps you design your own games in the future, and even helps you learn another coding language, such as Python or JavaScript. We all have to start somewhere. And making sure we find the best keyboard for programming is super important for someone whose ready to get into the coding game!
So once you get an idea of the basics understanding of coding, you can use this for web development in the future and also get to grips with Database Modeling Tools to learn more.

The ideas covered in this article apply to every programming language and every game you’ll ever make.

Save 37% on Hello Scratch! Just enter code fccford into the discount code box at checkout at manning.com.

Think of this article as the first day of school, and you’re meeting your new classmates-except your classmates happen to be computer science concepts instead of humans. As you build the games and put these ideas into practice, you’ll get to know them better. Gaming is something that can be played individually as well as in a group, and no one knows that better than game makers that gaming is something that should always be enjoyable, full of thrills, and sometimes a sprinkle of deception (for the story-based games). Game makers also know that there are ways that users can work around difficult parts by using game trainers like FLiNG’s Raft trainer which can help players navigate their way through the game without getting frustrated. So when they are ready to create, they may want to sprinkle in their own secrets within the game to surprise those players.

Here’s what you’ll encounter in this article:

  • How to use the eight most common blocks you’ll need to build games, and how these eight common blocks are tied to key computer science concepts

  • How to make eight mini scripts to see computer science in action

You’ll find all the blocks you need to meet in the center Block Menu. What are the eight most commonly used blocks, and what do they do inside a game? See table 1.

Table 1 The eight most commonly used game-making blocks

Important

Make sure to clear your workspace of practice scripts at the end of each section either by using File > New, in the Grey Toolbar, or by clicking the top block in the script (usually When Flag Clicked), dragging all the blocks together to the Block Menu, and releasing the mouse button.

Let’s start with a nice, clean default workspace. Go to File > New, in the Grey Toolbar, and Scratch cat returns to your Stage, ready to do everything you instruct him to do with your code.

Ready to get started?

Starting a program with the When Flag Clicked block

The first block to meet is the When Flag Clicked block, in the Events block menu. Yes, you might already know this block, but it’s time to talk about how important it is for all the scripts you’ll make in your games. This block, like the similar When Space Key Pressed block, tells the program the action which is required to get the program to run. It sets an “on” switch that the player can trigger (in this case, by clicking the green flag above the Stage) when they’re ready to play the game. You’ll use it to create a small script that makes the sprite move 100 steps to the right, as shown in figure 1.

Figure 1 The cat moves 100 steps to the right each time the green flag above the Stage’s clicked. At 100 spaces per click, he can cross the Stage in four clicks of the green flag.

Finding your program’s on switch

When Flag Clicked may seem like a self-explanatory block, but it’s worth talking about because every script in the game needs its own on switch. Try putting a Move 10 Steps block in the Script Area and then clicking the green flag above the Stage. What happens? Nothing, right? The cat can’t move because the script doesn’t have an on-switch. All scripts-yes, every individual script in your game-need a way to start.

Scripting with the When Flag Clicked block

Let’s build that small script that tells the sprite to walk 100 steps to the right, as the cat is doing in figure 2. It’s important to understand what this block accomplishes.

Figure 2 Every program, including one that moves the cat 100 spaces, begins with an on-switch.

To use the When Flag Clicked block

  1. Navigate to the Block Menu and click the Events block option.

  2. Click and drag a When Flag Clicked block and release it anywhere in the Script Area.

  3. Switch to the Motion block menu and click the Move 10 Steps block.

  4. Drag the Move 10 Steps block underneath the When Flag Clicked block and snap the two blocks together. Remember, if the two blocks aren’t touching, the program tries to run but nothing happens.

  5. Change the 10 in the center of the block to 100 by typing inside the white bubble on the block.

The two blocks in figure 3 form a complete script. Click the green flag above the Stage. What happens to the cat sprite? You should see it move to the right.

Figure 3 A script using the When Flag Clicked block

This script in figure 3 is simple, but illustrates the idea that all scripts need a starting point. It begins with a When Flag Clicked block. That tells Scratch that you want the program to start when the green flag above the Stage is clicked. The next block (Move 100 Steps) tells Scratch what you want to happen after the green flag is clicked: you want the sprite you programmed to move 100 spaces to the right. It moves the cat every time the green flag is clicked.

Fix It: YOUR PROGRAM WON’T START!

Oh no! Your program won’t start. If your game won’t run when you test it out, your troubleshooting starting point is to look at each of your scripts and make sure they each have a block that triggers the code to run, such as the When Flag Clicked block or the When Space Key Pressed block. If not, add one and see if that fixes your problem.

Setting location with X and Y coordinates

In the last script, you asked Scratch to move the cat 100 steps, and these “steps” are coordinate spaces. Coordinates tell a program where the sprite is on the screen.

Many scripts use coordinates to position or move sprites, but coordinates aren’t only a common part of computer programming. You’ve encountered X coordinates in math if you’ve ever jumped around on a number line. In figure 4, you can see how 100 steps and 100 coordinate spaces are the same thing in Scratch. Each time you click the green flag above the Stage, the cat moves 100 steps, meaning 100 coordinate spaces. Coordinates are used in every area of STEAM, from grids in art to map making. Coordinates are how you state the exact location of a place or object and can contribute to event driven architecture leading the way to the development of software.

Figure 4 The cat jumps ahead 100 coordinate spaces each time the green flag is clicked.

Finding the sprite’s location with X and Y coordinates All programming languages use math (in this case, coordinate numbers) to tell the program what you want it to do. This makes sense because math’s a constant; 2 + 2 always equals 4.

Scratch can understand a command such as “move the cat sprite 10 coordinates to the right” (which is clearly math-related), but it can’t understand a command such as “move the cat sprite near the house.” What house? Unless you assign the house a mathematical location, Scratch has no clue where that house is on the screen.

Your directions-where you want sprites to move or where you want objects to be positioned-all need to be described numerically in your program.

In the top right corner of the Script Area is a tiny picture of the sprite you’re currently programming (the cat) and two letters (X and Y) next to a number, as in figure 5.

Figure 5 The top right corner of the Script Area shows the sprite and its X and Y coordinate position. X: 0 and Y: 0 is the center of the Stage.

Click the cat on the Stage and drag it around the Stage. The numbers next to the X and Y are changing, constantly logging the cat’s new location.

The Stage’s a grid constructed out of horizontal (X) and vertical (Y) lines, called the X-axis and Y-axis. Every location on the Stage can be plotted on those lines, which are its X and Y coordinates. In fact, you can see where those lines are on the Stage by using Scratch’s grid backdrop, which shows the axis lines.

To use the grid backdrop

  1. Click the first icon of the painting to bring up a pop-up window with the Scratch backdrop library.

  2. Scroll to the bottom and choose the option XY-Grid. Click OK.

You should now see horizontal and vertical lines behind the cat, as in figure 6, along with numbers where they intersect, such as 100 or –100. This is an open grid, only showing every hundredth coordinate. Ten coordinates or 10 steps is 1/10th of one of those squares on the grid. In order to have the cat move the length of one square on that grid, you need to program the cat to move 100 steps.

Figure 6 The XY-Grid backdrop

X coordinates run from left to right. Y coordinates run up and down. The dot in the center of the screen where the lines meet is zero for both the X and Y coordinates, which is why the numbers in figure 5 show X and Y both set to zero (0). The cat sprite begins each new project in the center of the Stage:

  • Positive numbers on the X coordinate (such as 10) move your sprite to the right.

  • Positive numbers on the Y coordinate (such as 10) move your sprite up.

  • Negative numbers on the X coordinate (such as –10) move your sprite to the left.

  • Negative numbers on the Y coordinate (such as –10) move your sprite down.

Scripting with the Change X by 10 block

Let’s build a small script that tells the sprite to go to a certain place on the screen. The cat in figure 7 is currently in the center of the Stage, but the script you’ll write sends the cat to a new position when the green flag is licked-namely, 100 coordinate spaces toward the top of the Stage.

Figure 7 Send the cat 100 coordinate spaces above the center of the Stage.

To get your workspace ready to program the cat

  1. Click the Scripts tab in the Block Menu in order to get back to the blocks.

  2. Navigate down to the Sprite Zone and make sure the blue box is around the cat sprite.

You won’t need to do this every time, but you do right now because Scratch is still in the backdrop menu. Now you’re ready to get started. To use the Set Y to 0 block

  1. In the Block Menu, click Events.

  2. Click and drag a When Flag Clicked block into the Script Area.

  3. In the Block Menu, click Motion.

  4. Click and drag a Set Y to 0 block into the Script Area and snap it onto the When Flag Clicked block.

  5. Change the 0 inside the block to 100.

Once again, the two blocks in figure 8 form a complete script. Now click the green flag above the Stage.

Figure 8 A script using the Set Y to 100 block

Fix It: YOUR SPRITE ISN’T MOVING

Wait a second! Your cat isn’t moving even though you wrote a program. When things don’t go according to plan with your program, chances are you didn’t program the correct sprite. Did you check that the blue box was around the cat in the Sprite Zone? Because you added a backdrop before you started this script, Scratch switched the programming focus to that new backdrop. But you don’t want the Stage to do the action; you want the cat to be the one moving to the new coordinate position! Troubleshoot programs that don’t run according to plan by making sure the scripts are assigned to the correct sprite. You can check all the scripts assigned to a sprite by clicking the sprite in the Sprite Zone and then looking at the scripts in the Script Area.

The cat will go directly to the 100th coordinate slot on the Y-axis (or Y line). This is the type of program you’ll use to position a sprite on the Stage at the beginning of a game.

Answer this: how do you position the cat 100 spaces below center?

Question: you know how to move a sprite up, but can you figure out how to make the cat move down?

Answer: place a minus sign in front of the number (–100) to indicate that it’s a negative number. Remember, negative numbers move the sprite to the left and down. Positive numbers move the sprite to the right and up.

Figure 9 A script that changes both the X and Y position at the same time

You can also change the X and Y position of the sprite at the same time. To move the cat diagonally, swap out the Set Y to 100 block for two blocks: a Change X by 10 block and a Change Y by 10 block. Snap them underneath the When Flag Clicked block, one on top of the other, as shown in figure 9. Change the 10 in the X block to –20 to move the cat 20 coordinate spaces to the left, but keep the 10 in the Y block to move the cat 10 coordinate spaces up.

The cat moves diagonally when you click the green flag because it’s moving to the left and up at the same time. Clear the script from the Script Area but keep the grid backdrop for the rest of the games in this article because it helps see the position of your sprite on the screen.

Fix It: STEPS AND COORDINATES

In this case, the Move 10 Steps block and the Change X by 10 block accomplish the same thing. One block has a plain-English way of stating the instruction, but is dependent on the direction the sprite’s facing (move 10 steps), and the other has a mathematical way of stating the instruction (change the current X coordinate number by 10). Both do the same task of moving the sprite 10 spaces to the right and illustrate an important point: sometimes there’s more than one way to accomplish the same task in programming, and the code choices are up to the programmer.

Using a conditional statement

You encounter conditional statements every day. Conditional statements state what first needs to be true for something to happen. For instance, your parents might say, “If you eat your vegetables, then you can have dessert.” A condition is set. In order to get dessert, the vegetables need to be eaten. You know what you need to do if you want a piece of chocolate cake: eat your carrots.

How will your parents know if you’ve eaten your vegetables? They’ll look on your plate. If the carrots are still there, the condition hasn’t been met, and you won’t proceed to dessert. If the carrots aren’t there (and I hope you’re not hiding them under the table!), then you’ll move to the next step: getting dessert.

Computers work in the same way.

You can set a condition in a game, such as “If the cat sprite is touching something red, then make it stop moving.” The program checks the cat sprite, as it’s doing in figure 10.

Red pixels make up the outer edge of the rainbow. If the cat is touching the red band of the rainbow, the game will stop the cat from moving. But if the cat sprite isn’t touching that part of the rainbow, the game will keep the cat moving until the condition is met. How do you know if you’re setting up a condition? It almost always begins with an If statement when you talk about the game aloud.

Figure 10 Is the cat touching a red pixel? Look at his foot.

Scripting with the If/Then block Conditional statements are set using the If/Then block. Let’s build a script that notes where the sprite is on the screen, and makes something happen when it moves past a certain point. In this case, you’re going to have the cat stop moving when it moves past the X coordinate position of 50, marked on the backdrop in figure 11.

Figure 11 The cat stops moving when it crosses over the X coordinate position of 50, marked by the red line.

To use the If/Then block

  1. Switch to the Control block menu.

  2. Drag an If/Then block to the Script Area and snap it to the When Flag Clicked block. A similar-looking If/Then/Else block option exists, but you want the If/Then block.

  3. Click the Operators block menu and choose the Square < Square block.

  4. Place the Square < Square block inside the empty hexagonal space on the If/Then block, as in figure 12.

    Figure 12 Placing the Square < Square block inside the hexagonal space in the If/Then block

  5. Click the Motion block menu and scroll to the bottom of the menu.

  6. Choose the X Position block and drag it inside the left square in the Operators block. This means that you’ve nested a Motion block in an Operators block in a Control block, as in figure 13.

  7. Type the number 50 in the right square of the Operators block.

  8. Scroll up in the Motion block menu and click and drag a Move 10 Steps block into the Script Area, placing it inside the open mouth of the If/Then block.

Figure 13 The X Position block inside the left square of the Operators block

Figure 14 shows a slightly more complicated script than you’ve made up until this point. Click the green flag above the Stage a few times and see what happens when the cat sprite moves too far to the right side of the Stage.

Figure 14 The If/Then block sets up a condition that only allows the sprite to move 10 coordinate spaces to the right if the X position is less than 50.

Once the cat’s X position is 50 or higher, it no longer meets the condition, and the cat stops moving. If you want to try running this program again, drag the cat back toward the left side of the Stage. Putting conditional statements into your game means that Scratch needs to constantly be evaluating whether or not the statement is true or the condition has been met. That means that by using a single block, you’ve set a lot of computational energy to work. This is a common way of making things happen in games, and you’ll find that each computer language has its own unique way of writing conditional statements.

Learn It: LESS THAN (<), GREATER THAN (>), AND EQUAL (=)

A common practice in computer programming is to set up conditions that use operators, asking the computer to solve what amounts to a quick math problem as it runs. Three common Operators blocks are the Square < Square (less than), Square = Square (equal), and Square > Square (greater than), all seen in figure 15.

Figure 15 Three types of Operators blocks which are used in Scratch.

These three Operators blocks allow for three different situations. In the first block, the statement is true if the sprite is in an X position less than 10. In the middle block, the statement is true if the sprite has an X position equal to 10. In the last block, the statement is true if the sprite has an X position greater than 10.

Making loops

Sometimes you want an action to happen once. Other times you want the action to happen over and over again. A loop is used when you want a piece of code to run until either a condition is met or the red stop sign above the Stage is clicked. For instance, you could make your cat spin round and round, as in figure 16, by putting the blue Motion block inside the yellow Forever block.

Figure 16 The Forever block in the script makes the cat continue turning without needing to click the green flag over and over again.

Finding places to use loops

A few loop blocks are used in Scratch, all found in the Control block menu. The most common and flexible one is the Forever block. If you place other blocks inside a yellow Forever block, Scratch will repeat those actions over and over again. Think about times when you’d want an action to occur without needing player input, such as having the cat continue to move without needing to continuously click the green flag. Loops allow you to set up a situation once and have it run over and over again, bringing fluidity to the sprite is movement on the screen.

Scripting with the Forever block

Any blocks you put inside the Forever block continues their action without needing to click the green flag above the Stage more than once to get the loop started. Let’s make that small script that causes your cat sprite to spin indefinitely. See figure 17.

Figure 17 The cat is spinning quickly due to the Forever block repeating the action over and over again, making it look like there are dozens of cats.

To use a Forever block

  1. Navigate to the Events block menu and click and drag a When Flag Clicked block to the Script Area. Release the block near the top of the workspace.

  2. Switch to the Control block menu. Drag a Forever block to the Script Area and snap it to the When Flag Clicked block.

  3. Click the Motion block menu and choose a Turn 15 Degree block.

Put this blue block inside the Forever block, as seen in figure 18. When you click the green flag above the Stage, your sprite starts spinning like a pinwheel. A circle is 360 degrees, and 15 degrees turns 1/24 of a circle. The action looks smooth because Scratch doesn’t pause between each 15-degree turn.

Figure 18 This loop using the Forever block causes the cat to spin in a circle.

The example script consists of only three blocks, but with a single click of a button, it can run forever.

Pretty cool, right? But that’s all for this article.

If you want to learn more about the book, check it out on liveBook here and see this slide deck.