I am a strong believer that anyone can code - and I do mean anyone! This is going to be a tutorial about how to use the Scratch platform to teach basic computer science concepts to young (3rd-8th grade level) students. In this tutorial, I will show you how to make a basic game using the Scratch platform, tell you which computer science concepts are covered, and give you tips on teaching these concepts to your student(s). The exercise will take approximately one hour for beginning programmers.
Q: But why Scratch?
A: Plainly put, Scratch is easy on the user (or in this case, the programmer!). Learning to code in any language can be difficult because of syntax. In other words, every programming language has it's own particular vocabulary and rules of grammar, and learning to code can be difficult because not only do you have to know computer science concepts, but you have to know these syntactical rules which are situational to the language you choose. With Scratch, you don't have to worry about syntax because the interface is drag and drop. Also, for young programmers, typing can be difficult and Scratch alleviates the stress of correctly typing out phrases, and thus making your programmer feel successful!
If you want to save your work (which is always a good idea!), you or your programmer will need to make an account with Scratch. This account is totally free and will only take a few minutes to set up.
1. Go to the Scratch website: scratch.mit.edu
2. In the upper right hand corner, click "Join Scratch".
3. An in-browser pop-up box will appear. Choose your user name, password, and confirm! Scratch will then ask you some limited demographic information and for a password recovery email address.
Creating a New Project
Here is how to set up your first project:
1. In the upper left hand corner, click "create" to start a new project. You will be directed to a blank editor screen.
2. Now, you should see a screen with an orange cat on the left hand side and a grey space on the other. This editor screen is where you and your programmer can program and test your code.
3. First, let's title your project (currently it is called "Untitled"). In the upper left hand corner, type the name of your project where "Untitled" currently is.
Some Scratch Terminology
Before we code, here are a few terms that will be used from here on:
Sprite: A sprite is any character you might want to program. For example, the orange cat on your screen is a sprite. To add a new sprite, click the troll icon next to the words "new sprite" at the bottom of the screen. To edit an already existing sprite, select the sprite at the bottom of the screen and click the "costumes" tab in the top middle of your screen and then click the same troll icon. To delete a sprite, right click wherever you see the sprite and select delete.
Background: A background is what you might expect it to be - a background for your sprite to play on! When you begin, your background is just white. To change this, select the background on the bottom left hand side of the screen, and then click the "backdrops" tab that appears in the top middle of your screen.
Code block: Code blocks are the smallest unit of code you can use to build your program. If you select the "scripts" tab in the top middle of the screen, code blocks will appear. There are several categories of code blocks - motion, looks, sound, events, etc - each with their own color. Some of the code blocks have blank white spaces for your programmer to add her own variables or values to the programs. Some of the code blocks have funny shapes - the shape of the code block can tell you if it fits with another block or not. You can remove a code block from your script (defined below) by dragging it somewhere outside of the grey area.
Scripts: Scripts is Scratch's fancy word for program. A script can be comprised of just one code block or multiple code blocks stacked together. Different sprites may have different scripts if you want them to behave differently. Your project may have more than one script in this way. Note that in order to see a sprite's script, you must have the sprite selected at the bottom of the screen.
It's time to start coding:
The game: To begin learning, we are going to build a simple game. There are three sprites at play in this game. A prince, a princess, and a dragon. The princess will begin on one side of the screen and the prince will be on the other. In order to win the game, the user must use the arrow keys to move the princess from her starting point to the location of the prince so they can live happily ever after. The dragon, however, is floating around between the prince and the princess, and if the princess touches the dragon, she must begin her journey again.
Concepts covered: This game will cover the concept of: events, motion on a 2D plane, control flow using branching and looping statements, and conditionals.
1. To begin, we will need the three sprites - a prince, princess, and dragon. To add a sprite, click the troll icon next to "new sprite" at the bottom of the screen and find the appropriate sprites. Decide where your princess will start at the beginning of the game and drag her there. Decide where your prince will stay and drag him there. Since the prince will not move in the game, we are done programming the prince! Yay! The dragon can begin anywhere on the screen as long as he is not in your way of visualizing the other two sprites.
2. Now we are going to begin coding for the princess. Make sure the princess sprite is selected at the bottom of the screen. Our first step in programming this game is to decide when it begins! I decided that I want my game to begin when the green "go" flag in the middle of the screen is pressed.
This is the concept of an event. An event is something that happens that tells the computer to do something else - in our case, the event is the green flag being clicked. However, other examples of events are mouse clicks and keyboard input.
But how do we relay that we want this to happen to our princess? We have to program her! To do so, in the scripts tab we are going to select Scripts > Events > When Green Flag Clicked code block. Drag this blog into the grey area on the right side of the screen.
3. We now have to tell the princess that whenever a game begins, she should always start in a certain location. Make sure she is in the desired location (otherwise, drag her there) so we can program her. Under Scripts > Motion > Go to x: , y: , drag the block and attach it underneath our the orange events block used in the step before.
Awesome! Now, whenever the green flag is clicked, the princess will always stay in the same location. Ask your young programmer if they know what their code thus far does. Note that the x and y coordinates on the blue "go-to" block are coordinates for the princess on the screen. If you have a middle school aged programmer, this might be an interesting topic for discussion: how do you think objects move on a screen? What kind of math is behind this movement?
4. How are we going to move the princess to her prince? Ask your young programmer how they think someone playing your game should move the princess. For my project, I used the arrow keys. Then ask your programmer, when should the princess move? Guide your conversation in the direction of "when the player hits an arrow key, the princess should move!"
This is the idea behind a conditional. A conditional is an "if-then" type statement in computer science: "if I hit the up arrow key, then the princess should move up". Note that we only want the princess to move up if the up arrow is clicked - only under one condition should this action take place.
Our code is about to get more complicated. In order to program the princess to move using the arrow keys, we are going to need four if-then statements. Ask your young programmer why this is (because there are four arrow keys we would like to use!). To get started, go to Scripts > Control > if-then (note: NOT if-then-else). Drag one of these blocks and attach it underneath your blue go-to-location motion block. Notice that there is a hexagonal hole in the orange if-then block after the "if" statement. This is a spot to tell the computer what condition to wait on in order to do something else (which will go inside the orange if-then block).
From here we go to Scripts > Sensing > key pressed. Drag this teal block into the orange if-then block and click the drop down arrow. Select the up arrow.
Now, we have to tell the computer what to do when the up arrow is being pressed. What do we want the princess to do? Move up! Thus, we are going to go to Scripts > Motion > Point in Direction and for the drop down arrow we are going to select the value 0. Drag this blue block inside the if-then block. Ask your young programmer what this does. Will it move the princess? The answer is no. Thus, we need to drag the Scripts > Motion > Move steps block and drag it underneath the blue Point in Direction block but still inside the if-then orange block.
At this point in time, you should have an event block attached to a blue motion block attached to an orange if-then block with a teal sensing block in the conditional and two blue motion blocks on the inside of the if then block. Repeat the process described shortly above three more times for the other arrow keys: down, left, and right.
5. Have your young programmer click the green flag. What happens? She may notice that the princess only moves a short way in one and then stops. Ask your programmer why she thinks that is? The answer, of course, is because that's what the code says to do! When the green flag is clicked, the code below it only runs once and then ends (we only have listed once). Wouldn't it be nice to continually run the code so we could always move the princess?
Yes! Drag your conditional arrow key statements to the side for now (be careful not to delete them!). We want to be able to run this bit of code for the entirety of the program.
This concept is called looping. A loop is used when we want to repeat particular bits of code. In this case, we want to run the code forever (or at least while the game is running), and we call these times of loops infinite loops (because, in theory, the stuff inside the loops occur an infinite amount of times).
To place our already written code inside an infinite loop, we go to Scripts > Control > Forever and drag the orange block and attach it underneath the blue go-to block. Then we drag our arrow key code inside the infinite loop.
Have your programmer click the green flag and play her game again. What happens? She can always move the princess!
6. Although it's nice to always be able to move the princess, we want to program her to stop if certain conditions are met. We want her to return to her starting point if at some point in time she touches the dragon. We want her to always do this, so this code will be inside the forever loop as well. Ask your young programmer how she thinks she should code this to happen. She should go to Scripts > Control > If-then again and drag the block inside the forever loop. She should then go to Scripts > Sensing > Touching (the first touching block) and drag this block into the if statement. Select "Dragon" from the drop down arrow. But how do we return her to her original starting point? The same way we had her begin at the start of the game! Go to Scripts > Motion > Go to x: y: block and drag it inside the if-then. Make sure the coordinates of this block match the first blue go-to block.
7. We also want the princess to stop moving when she reaches her prince. Again, go to Scripts > Control > If-then and drag inside the forever loop. Use Scripts > Sensing > Touching (the first touching block) and select prince from the drop down arrow. What do we want to happen now? I decided that my princess would tell her player that she won. To do so, go to Scripts > Looks > Say "Hello!" for 2 seconds and drag the box inside the conditional statement. Have your programmer type in a congratulatory message.
We also have to keep in mind that we still have a dragon to program. He'll be moving around, so we'll probably want to stop him from moving once the game is over as well. However, his duration of motion is dependent on the princess, so somehow, the princess will have to tell the dragon that she found her prince. To do so, go to Scripts > Control > Stop all and drag the block underneath the congratulatory message.
Wooo! We are done coding the princess! The dragon has significantly less code, so you and your programmer are almost there!
8. Now we need to program the dragon to move kind of randomly across the screen to get in the way of the princess. We also have to tell the dragon to begin doing so when the green flag is clicked, so we will first select the dragon sprite at the bottom of the screen and then go to Scripts > Events > When green flag is clicked and drag the box in.
9. We want the dragon to fly around for the entire duration of the game. Ask your programmer if she knows how to make this happen. Again, if we want something to happen for the entire duration of the game, a forever loop seems appropriate. So, under Scripts > Control > Forever and drag the block and attach it underneath the event statement.
10. What do we want the dragon to do? Move, of course! So, ask your programmer where she thinks she might find more helpful code blocks. Under Scripts > Motion > Move to and drag the box inside the forever loop.
11. Have your young programmer hit the green flag and see what happens. The dragon flies off the screen! If only there were a way to contain the dragon the screen on which we are playing our game... And there is a way! Go to Scripts > Motion > if on edge, then bounce. Drag this block into the forever loop and hit the green flag again.
Awesome! Things seem to be in working order now and you are all ready to play your game! Have your programmer play her game and then ask her what parts of her code allow the princess to move, the dragon to move, and for the game to end.
12. Be sure to save your game by selecting File > Save Now in the upper left hand corner of your screen. You can come back to the game at any time!
If for any reason, you get stuck, here is a cheat sheet to the code I used for my game: http://scratch.mit.edu/projects/48229012/
Congratulations on coding your first game! Remember - anyone can code - you just have to be patient, motivated, and willing to learn. See you soon!