Introduction to Computer Science with Scratch and App Inventor

Introduction to Computer
Science with Scratch and
App Inventor
Name:
Produced by the ITCD Department at California State
University, Monterey Bay and mbrace, the Monterey Bay
Regional Academy of Computing Education. For more
information, please visit http://mbrace.csumb.edu/

Introduction to Scratch
What is Scratch?
Scratch is a new programming language that makes it easy to create your own interactive stories, games,
and animations – and share your creations with others on the web.
Scratch is developed by the Lifelong Kindergarten research group at the MIT Media Lab
Where can I get Scratch?
You can download Scratch for free from the MIT website http://scratch.mit.edu. Scratch is available for
Mac, Windows and Linux. From the Scratch website, you can also create an account that allows you to
upload and share the scratch projects you create.
To download Scratch
at home, start here
How do I learn Scratch?
This workbook and the Scratch workshop will give you an introduction to some of the Scratch basics. To
learn more, you can use the resources on the Scratch website, or Google for more information on
Scratch – there are a lot of great resources on the web – including some great tutorials on You Tube.
Probably the best way to learn Scratch (or any programming language) is to play!! Start up Scratch and
try out different things. Remember, you can’t break or hurt your computer using Scratch. Have fun!
mbrace Game Development Workbook Page 2

LESSON 1: Getting Started with Scratch
How Scratch Works
In Scratch, we will write programs called SCRIPTS. Each SCRIPT controls an object called a SPRITE. The
orange cat that you see when you start up Scratch is an example of a Sprite. Below you can also see an
example of what a script looks like:
Sample Script
The Scratch Interface
Before we can write a script, we need to know a little bit about the Scratch interface.
BLOCKS PALATTE CURRENT SPRITE INFO
TABS
SCRIPTS AREA
A Sprite
STAGE
SPRITE LIST
The BLOCKS PALATTE contains the blocks that we can use to make our scripts. Each block represents
one instruction in our program.
We build our scripts by dragging blocks from the BLOCKS PALATTE to the SCRIPTS AREA.
mbrace Game Development Workbook Page 3

Above the SCRIPTS AREA is the CURRENT SPRITE INFO. This is where we can see all of the information
about the sprite we are programming.
In the CURRENT SPRITE INFO panel, we also have a set of TABS which allow us to switch between
different aspects of our sprite.
The SPRITE LIST shows all of the sprites that are part of our program.
The STAGE is the background that our program runs on.
Sprites
Each object in our program is a sprite. The default sprite is the orange cat, but you can pick from a
library of different sprites, or even make your own!
Let’s pick or make a new sprite. To pick a new sprite, we’ll use the buttons right under the stage. The
first button let’s you draw your own sprite, the second button let’s you pick a sprite from a library and
the third button picks a random sprite for you.
Draw your
own sprite
Pick a
sprite
Random
sprite
Let’s pick a sprite! Click the middle button to open the library of sprites.
You can pick a sprite from any of the
folders in the library. To go up a level in
the library click the arrow button at the
top. When you find a sprite that you
would like to use, click OK.
mbrace Game Development Workbook Page 4

I decided to pick a dinosaur. You can see that my dinosaur is on top of the cat. To move the sprites
around on the stage, you can just click on them with the mouse and drag them to a new location.
Now, let’s get rid of the cat sprite. If you right-click on any sprite, it will pop up a menu of options:
Right-click to
get this menu
to appear
Choose the delete option to remove
the cat. You can see that two of the
other options are resize this sprite
which allows you to make the sprite
bigger or smaller and rotate this
sprite which allows you to change the
direction the sprite is pointing.
mbrace Game Development Workbook Page 5

Moving Your Sprite
Everyone should have a sprite now. The next step is to write a script that will make our sprite move on
its own! We write scripts by dragging blocks from the block palate onto the scripts area. Since we want
our sprite to move, we will use blocks from the motion set (the blue blocks). We’ll first make our sprite
move forward 10 steps, so we’ll drag a block that says move 10 steps onto the scripts area.
If you click on the block, you can see the sprite move on the stage.
Click on
block here
Sprite will
move here
If you want the sprite to move further, you can make the number of steps bigger. Try making the
number 100 and see what happens.
To make the sprite move backwards, you can make the number of steps negative by putting a minus
sign in front of the number. Try making the number of steps -100 and see what happens.
The size of the steps that a sprite makes is based on a coordinate system. Every spot on the stage can
be identified by an x, y coordinate. The x coordinates go from left to write and have values -240 to 240.
The y coordinates go from bottom to top and have values from -180 to 180.
mbrace Game Development Workbook Page 6

The direction that your sprite moves in the coordinate system is based on the direction that it is pointing.
You can always see the location of your sprite and its direction by looking at the current sprite info.
Sprite’s current
location
The direction that a sprite is pointing is based on the degrees around a circle.
-90 = left
0 = up
180 = down
90 = right
Sprite’s current
direction
Many of the motion blocks change the direction that the sprite is pointing, or move it around the stage’s
coordinate system:
mbrace Game Development Workbook Page 7

Point your sprite in the direction you want it to move. You can
specify an absolute direction or another object on the stage
Move your sprite to a specific location on the stage. You can
give coordinates or another object on the stage. Glide can be
used to make the sprite move more slowly.
Change x and y are great commands to use for moving your
sprite around the screen. We will use these commands in a
later lesson.
By combining these blocks, we can make our sprite perform more complex behaviors. Let’s make our
sprite “dance” by putting together multiple actions.
To build complex behavior, snap blocks together like
Legos.
To see what your new dance looks like, click once on
the group of blocks and watch what happens on the
stage
When your script runs, the actions on the blocks
happened one after the other in the order you have
them connected, this is called sequential execution
It might be a little hard to see each action individually, because the actions happen very quickly. We can
slow things down a little bit using some of the control blocks. These are on the yellow menu:
mbrace Game Development Workbook Page 8

Let’s add some yellow wait blocks and see what
happens when we run our new script (remember,
click on the group of blocks to run the script).
You should see the sprite wait between parts of its
new dance. You can change where you put the wait
and you can also change how long you wait by
changing the number in the block. [HINT: for a
shorter wait you can use a fraction of a second, 0.5 is
half a second]
Every time we click the group of blocks, our sprite will
do his dance. We can use another control block to
make the sprite keep dancing.
Drag a forever block into your script. The forever
block can go around a group of other blocks, and we
want to arrange it so that it goes around our entire
dance script.
Now click on the big group of blocks and see what
happens – your sprite should keep dancing.
This is called LOOPING. The forever block is a loop
that repeats a group of blocks over and over again
until we tell it to stop.
Inside the loop, the individual actions will still
happen sequentially in the order they appear. When
the last block finishes, the loop will start all over with
the first one again.
Sometimes, we don’t want to loop forever, but we do
want to do a set of actions more than once. Scratch
has another kind of loop that lets us repeat a set of
blocks a specific number of times. It is up to you to
pick the kind of loop that will work best in your
program. Play around with both the forever loop and
the counter loop to see how they work.
mbrace Game Development Workbook Page 9

To stop a forever block, click the red stop sign above
the stage.
Next to the stop sign, there is a green flag button.
You can have your program start by clicking the
green flag rather than clicking on the blocks in your
script. Once we learn how to do this, we will use it
for most of our scripts.
Drag a when (Green Flag) clicked block onto
the top of your forever loop. Notice that the
green flag block is shaped differently from the
other blocks we have been using. Blocks with
a curved top don’t allow other blocks to
attach to the top. These blocks are starting
points for our programs. Later on we’ll learn
about some of the other curved blocks as
well.
Now, you can click the green flag to start
running your script and click the stop sign to
stop.
Why do we want to use the green flag? It might
not see very exciting right now.
If you click the full screen icon in the upper right
hand corner of your screen, your stage will take
up the whole screen. In this mode, you don’t
have access to the blocks to click on, but you will
have the green flag and the red stop sign.
Also, as we add more things to our projects, you
will see how the green flag allows us to
coordinate more complicated programs.
mbrace Game Development Workbook Page 10

Changing the Background on the Stage
Now that everyone has a dancing sprite, let’s make the background nicer than plain old white. We can
change things about the stage just like we can change our sprite.
1
Click Here
2
Check out full screen mode and watch your
sprite dance across the screen! Use the green
flag and red stop sign to start and stop your
program!
So far we have used blocks from two different
menus: the motion menu (blue blocks) and the
control menu (yellow blocks). Whenever you use
a new menu, it is always a good idea to read
through the blocks available. You never know
when a new command will come in handy!
You can only modify one sprite or the background at a
time. To make changes to the stage, click on the picture
of the stage in the sprite list underneath the stage.
The sprite information panel at the top will change to
show that we are working with the stage now instead of
our sprite.
We can pick a new background from a library just like we
picked a new sprite.
First, click on the Backgrounds tab
Next, click on the Import button
mbrace Game Development Workbook Page 11

User Controlled Sprites and Branching
When you click the import button, a box will
open that lets you navigate through the
library of backgrounds.
Pick one that you like and click OK to make it
the new background on your stage.
To go back to working on your script for your
sprite, you just click on the sprite in the sprite
list.
Click here to go
back to your
sprite
For both sprites and backgrounds, you aren’t limited to the options in the Scratch library. You can also draw
your own sprites, modify existing sprites, or import drawing/photo files from your computer. We will see
how to do this in later lessons.
Up until now, all of our sprite’s actions have been controlled by move blocks. However, in a game, we’ll
want the user to be able to move the sprite around using the keyboard. In order to be able to do this,
we need to learn a new control block first:
The if block implements a BRANCHING control structure.
Branching lets us choose to do something, only if certain
conditions are met. We do this all of the time in real life.
For example, we might say if it is raining, take an umbrella
outside. This means that when the condition “it is raining”
is true, we should take an umbrella outside with us. We
will use branching in programming in much the same way.
mbrace Game Development Workbook Page 12

To use an if block to control the movement of the sprite, we first have to think about what conditions
we want to test. Let’s use the standard arrow keys as our conditions. This means we want to test the
following conditions:
If the up arrow is pressed, we want the sprite to move up the stage (this is a positive change in
the y value of the sprite’s location)
If the down arrow is pressed, we want the sprite to move down the stage (this is a negative
change in the y value of the sprite’s location)
If the left arrow is pressed, we want the sprite to left on the stage (this is a negative change in
the x value of the sprite’s location)
If the right arrow is pressed, we want the sprite to right on the stage (this is a positive change in
the x value of the sprite’s location)
Let’s look at our if block again. Next to the word “if” you’ll see a diamond shaped opening. This is
where the condition will go. The action to do if the condition is true goes inside the block.
condition to check goes here
action to do if condition is true goes here
Where do we get the conditions? There are several different types of blocks that can go into the
condition spot. All blocks that can go in a condition spot will be diamond-shaped, just like the opening
in the if block. One place to get condition blocks is the sensing menu. Blocks on the sensing menu let us
check for events like:
Mouse events: when the user clicks the mouse (you can also get the location of the mouse
arrow on the screen)
Keyboard events: when the user pushes a button on the keyboard (here we are interested in
capturing specific keys – the arrow keys – but you can capture any key you want)
When two objects on the screen are touching each other
We will use the sensing menu throughout our game, so it is useful to become familiar with the available
blocks.
mbrace Game Development Workbook Page 13

The sensing menu contains many blocks that test different
conditions. The one that we are going to use to help control our
sprite checks to see if a certain key is pressed. The default key is
the space bar, but we can change it to select any key we want by
clicking on the arrow to bring up a drop down menu
Here the arrow keys are
the ones that we want to
use in our condition
since they will tell our
sprite which direction to
move on the stage.
Now that we know where to find the condition blocks, let’s use if, conditions, and movement blocks to
build a user controlled sprite. What do you think our script will look like?
Here is one example of a script that will work for
creating a user-controlled dinosaur. You can write
a script that does the exact same thing that looks
very different – in programming there are often
lots of different ways to do the same thing – that is
OK. The different ways to approach the same
problem are called algorithms. Coming up with
good algorithms to solve a problem is a big part of
what programmers do.
mbrace Game Development Workbook Page 14

Costumes and Animation
Now that you have your sprite moving around the screen, let’s make our program a little fancier. Let’s
have the sprite change the direction he is pointing so that when the user pushes the right arrow or the
left arrow, the sprite will face the same direction he moves. We will use costumes to do this.
Costumes give you a way to change the way a given
sprite looks. You can see the costumes available to
your sprite by clicking on the costumes tab in the
current sprite info pane in the middle of the screen.
Right now you can see that our dinosaur (named
Sprite1) had only one costume available. This costume
is named dinosaur1.
To add more costumes for a sprite, you can copy existing costumes, import new costumes from the
library (if available), make your own costume using drawing tools or a photo, or edit existing costumes.
Here, we want to provide a new costume for our sprite that is exactly the same as dinosaur1, only we
want it to be facing the opposite direction. To do this we will first copy and then edit the existing
costume.
On the costumes tab:
1. Click the copy button to make a copy of the dinosaur1 costume
2. On the new copy of the costume (dinosaur2), click the edit button to bring up the paint editor
3. In the paint editor, click the flip button to flip the costume to face the other direction
Now you should have two costumes for your sprite – one that faces to the left and one that faces to the
right. Look at the names of the costumes to figure out which is which, in my example:
dinosaur1 faces to the right and
dinosaur2 faces to the left
You can always rename your costumes (or your sprites) to something that makes more sense. Here I am
going to rename the dinosaur1 costume to be rightDino and the dinosaur2 costume to be leftDino
mbrace Game Development Workbook Page 15

Now I can modify my script so that my dinosaur always faces the same direction he is moving. I will do
this using the switch to costume block from the looks menu. The looks menu (purple blocks) contains
actions that let us control how the appearance of our sprite changes during a program.
Changing Your Sprite’s Looks
To change the costume of our sprite, we used a block from the looks menu. The looks menu contains
blocks that change things like the color and size of your sprite.
Try out different looks blocks and see
what happens. This simple example
shows a change color effect block. Now
the dinosaur will cycle through color
changes every second.
Now, when the right arrow is pressed, our sprite
will face to the right and move to the right
When the left arrow is pressed, the sprite will face
to the left and move to the left.
The looks blocks are the dark purple blocks.
mbrace Game Development Workbook Page 16

Other useful blocks are the say and think blocks. These blocks display words in either thought bubbles
or dialog bubbles.
Using a combination of say and wait blocks, you
can create the appearance that multiple sprites are
having a conversation. We will see how this could
work when we add more sprites to our game!
Other Actions
Just like we moved our sprite around with the arrow keys, you can have your sprite respond to other
keys with other actions. See if you can make your sprite jump or fly when another key is pressed!
In this script, I’ve added a new
action that will happen when the
space bar is pressed? What do you
think this action is? Try it out and
see.
mbrace Game Development Workbook Page 17

Interacting with Other Sprites
So far we have used the if block to let the user control the actions of our sprite, but we can also use the
if block to make different sprites interact with each other. First I need to add a second sprite to my
program. Scripts are sprite-specific. Every new sprite will need its own script(s) to tell it how to
behave.
Now I have two sprites – a dinosaur and a bowl of
cheesy poofs.
I can control my dinosaur using the arrow keys on
the keyboard using the script I wrote before.
Let’s try to make the dinosaur eat the cheesy poofs!
First, we need to move the dinosaur to the cheesy
poofs – that is easy to do using the arrow keys
The second step is to write a script so that we know
when the dinosaur arrives at the cheesy poofs.
When the dinosaur gets to the cheesy poofs, we
want to make them disappear so that it looks like
they’ve been gobbled up.
Let’s write a script for the cheesy poofs that makes it look like the dinosaur is eating them. First, to
detect when the dinosaur gets to the cheesy poofs we can use an if block. What should the condition
be? Luckily, one of the sensing blocks will tell us when two sprites are touching each other. Here, we
want to pick the condition “if touching sprite1” since the dinosaur is sprite1.
Check down here to see what each sprite is named.
You can change the name of your sprites if you like.
mbrace Game Development Workbook Page 18

?
Now we know how to tell when the dinosaur is touching the
bowl of cheesy poofs. What action do we want to happen
when that condition is true? We want the cheesy poofs to
disappear so that it looks like the dinosaur ate them.
We can use the looks block hide to make the cheesy poofs
disappear. Try to run the program now. Have the dinosaur
eat the cheesy poofs and see what happens.
When we move the dinosaur over the cheesy poofs, the
poofs disappear; making it look like the dinosaur ate
them!
When we stop and restart our program, the poofs are
still gone. Why?
Once we hide the poofs, they don’t reappear until we
explicitly tell them to using a show block.
Let’s change our script so that every time we restart the
program, the poofs reappear. Where should we put the
show block?
If we put the show block right after the green flag block,
every time we restart our program, the poofs will
reappear. Try it out to see what happens.
Our game is still kind of lame – the poofs always
reappear at the same spot, let’s change that. Let’s
make it so that every time we restart our game, the
poofs reappear at a random spot on the screen.
Since show always makes the poofs reappear at the
same spot they were when they were hidden, we need
to move the poofs to a new spot (a random spot)
before we make them reappear.
mbrace Game Development Workbook Page 19

To get a random number, we use the pick random block from the
Operators menu. The Operators menu (bright green blocks)
contains many mathematical and logical operations and
comparisons that will be very useful in programming.
To use the pick random block, you specify two numbers and then
Scratch will randomly pick a number between those two numbers.
Since we want to randomly position our poofs on the stage, we
want to randomly pick an x value and a y value to move the poofs
to. What should the range of values be for randomly picking an x
and randomly pick a y?
Remember the coordinate system underlying the stage?
The x values on the stage range from -240 to 240
The y values on the stage range from -180 to 180
*HINT* When you are using new blocks in Scratch, remember to notice the shape of the block, this will
give you a clue as to where the blocks can be used.
If we add a go to x: y: block with our
pick random blocks included, our cheesy
poofs will show up at a new location
every time we start our program over.
Give it a try and see how it works.
Remember, you still need to stop (click
the red stop sign) the program and
restart (click the green flag) the program
to see the cheesy poofs repositioned on
the screen.
What would make the game more fun? It would be lots more fun if we didn’t have to restart the
program every time we wanted the poofs to reappear. How could we change our program so that every
time the dinosaur eats the poofs, they reappear at a new random location on the screen?
mbrace Game Development Workbook Page 20

Here is one script that works. To make the
poofs reappear each time the dinosaur eats
them.
Now, let’s add one more thing to our game. Let’s make it harder for the dinosaur to catch the cheesy
poofs by making the poofs move around the screen.
You already know how to do this – you need a script that moves the poofs around the screen without
user interaction like the very first script we wrote for the dinosaur. You can be creative with how you
want the poofs to move around the screen – create the behavior you want by using different
combinations of blocks from the motion menu.
There are all different ways you can make your poofs move around the screen:
Use a combination of random, show and hide to make it look like the poofs are falling from the
sky
Make the poofs move back and forth across the stage
Have the poofs bounce randomly around the screen
Things to think about when creating poof motion are:
Where should your poofs start when the game starts? Do you need to have a specific location?
Keep in mind that at the top of the screen, the y axis value is 180 and at the bottom of the
screen the y axis value is -180
There is a bounce on edge block that you might find useful
Once you have the poofs moving around the screen, you have the start of a fun game!
mbrace Game Development Workbook Page 21

Variables and Keeping Score
Now that we have the start of a fun game, we want to keep score by letting our dinosaur earn a point
for every bowl of cheesy poofs that he eats. In order to do this, we are going to use VARIABLES.
A program can have many variables, each keeping track of a different value. In order to be able to tell
our variables apart, we give each variable a name.
Points:
23
To create a variable in Scratch,
go to the red Variables menu.
Then click on the Make a
variable button.
This will open a new box where
we can type the name of our
variable. Then click ok.
You can think of a variable like a chalkboard
that can store one number on it. We can read
the number off the chalkboard or write a new
number on the chalkboard, and it will always
keep track of the last thing we wrote down.
You always want to give your variable a
descriptive name that explains what
value it represents. Since we want a
variable that will hold the number of
points our dinosaur has, we’ll call our
variable “points”
mbrace Game Development Workbook Page 22

After you create a variable, you will see more blocks appear in
the variables menu.
One block allows you to set (or write) a new value to your points
variable.
You can also change the value of points (you can add or subtract
from the current value).
Show and hide control whether the current value of the variable
will be shown on the stage. By default, the value of the variable
is shown.
We want to add one to points every
time our dinosaur eats a bowl of cheesy
poofs. So, we look at our program and
find the spot where a bowl of cheesy
poofs gets eaten. We insert a block that
adds one to points.
Now, every time the dinosaur eats
another bowl of cheesy poofs, our
variable get incremented (one gets
added to the current value)
Our variable points always keeps track
of how many points the dinosaur has.
mbrace Game Development Workbook Page 23

Look out for the duck!
You might notice that if you stop the
game and then restart it, the variable
points still has the same value. We
probably want points to start over every
time we restart our game. Giving a
variable a starting value is called
initialization.
We can easily initialize our variable by
adding code that sets it back to zero
every time the green flag is clicked.
So far, our dinosaur earns points by eating bowls of cheesy poofs. Let’s make things a little harder for
the dinosaur. Our dinosaur is afraid of ducks, so let’s add a duck sprite that moves randomly around
the stage. The dinosaur must try to avoid the duck while he eats cheesy poofs. If the duck catches the
dinosaur, the dinosaur loses two points.
When we want to add a lot to our program all at once, it helps to break it down into smaller steps.
Then we can do one step at a time to make the programming easier. For example:
1. Add a duck sprite
2. Make the duck sprite move randomly around the screen
3. Have the duck sprite recognize when it is touching the dinosaur
4. When the duck touches the dinosaur subtract two points from the dinosaur
There are many different scripts you can write to create this program. Often in programming there is
more than one way to do things. Also, you will notice that many of the steps to program our duck are
very similar to steps we took to program the dinosaur and the poofs. This is also a characteristic of
programming: lots of times you will only have to solve a problem once and you can reuse the solution.
So, you can tell if the dinosaur is touching the duck the same way you checked to see if the dinosaur was
touching the cheesy poofs!
Here is a very simple duck program. Feel free to get creative!
This part of the code makes the duck move
around the screen
This part of the code handles what happens
when the duck catches the dinosaur
mbrace Game Development Workbook Page 24

Winning, Losing, and Game Play
Our game right now starts when we click the green flag and stops when we click the stop sign. To make
it more realistic (AND FUN!) we need to decide how someone wins (or loses) our game. When a player
wins the game, we’ll display a new screen that says “Congratulations – you win!”, when a player loses
our game, we will display a different screen that says “I’m sorry, you lose, game over”.
You can decide how someone should win or lose your game. There are lots of options for winning. You
could have winning be dependent on completing a specific task, or on getting a certain number of points.
For this example, I am going to say that a player wins my game if the dinosaur gets 10 points.
We know that the number of points the dinosaur has is held in the points variable. We also know that if
we want to do something only when a certain condition is met, that we can use an if block to test that
condition. What condition do we want to test? We want to test if the value of the points variable is
equal to 10. In order to do this, we will need to use a new block from the Operators (green) menu. In
the operators menu, there are blocks that let us test equal to, greater than, and less than.
To test if the variable points is equal to 10
1. Choose an if or forever if block
2. From the operators menu, pick the equal
to block and drag it to the condition
location in your if block
3. From the variables menu, pick the name
of the variable and drag it to one side of
the equal sign
4. Fill in the other side with the value we
want to test (10)
Where we put this block, will depend on what we want to do when the win condition is met. I want the
background of my game to change to display a message that the player won the game. Therefore, I am
going to put my block in the script area for my stage.
Remember that to switch from a sprite
to the stage, you click on the small
picture of the stage at the bottom of
the screen.
Then, click on the scripts tab to build a
script for the stage. You can write
scripts for the stage just like you would
for any other sprite however your block
options are different. For example,
there are no motion blocks available for
the stage because it wouldn’t make
sense for the stage to move around!
mbrace Game Development Workbook Page 25

Now we can think about what we want to happen when our win condition is met. I want to display a
new background that says “you win”. That means I first have to create the background that I want.
To create a new background that
shows my win message I:
1) Switch to the backgrounds
tab
2) Make a copy of my existing
background
3) Click the edit button on the
copy to open the paint
editor
(I hope your win screen looks
better than mine! )
4) Inside the paint editor, I add my win message to
the new background
Now I have two backgrounds, one that displays the
general background for my game, and another that
displays the “you win” message.
You can create whatever win message you like,
using the Scratch library of backgrounds, or a
background you create yourself.
The last step is to actually have my background
change when the dinosaur gets 10 points. I can
do this by choosing switch to background blocks
from the looks menu.
Notice that I also set up my background so that
when I start the game, I always start with the
plain background.
mbrace Game Development Workbook Page 26

You might have noticed that when the dinosaur gets 10 points, the background switches to display the
win message, but everything else keeps going (for example, the duck keeps moving). I want to change it
so that everything stops when the player wins and all the sprites disappear. I could check if points = 10
for every sprite, but there is a better way to coordinate all of my sprites. I can broadcast a message
telling all of my sprites that the game is over.
To broadcast a message, I pick the broadcast
block from the control menu.
I am going to broadcast my message from
my stage since that is where I am checking
for the game ending condition.
To send a message, I first need to create it,
so I click on the arrow in the broadcast block
and choose new to create a new message.
This will pop open a new window.
In the window that opens, I give my new message a
name, I am going to call my message “Game Over”
because that is what it will signal to my sprites.
The last step is to tell my sprites what to do when they receive
the game over message.
For each sprite, I choose a when I receive block from the
control menu and then a hide block from the looks menu to
have the sprite disappear when the player wins the game.
Since I am hiding all of my sprites when the game ends, I may
also need to go back and add a show block when the green
flag is clicked so that the sprite reappears when I restart the
game.
Notice that the block for receiving the Game Over message will be the same for all of my sprites. If you
have code that you want to duplicate exactly for multiple sprites, you can drag the block of code over
each of the sprites in the sprite list. Viola! You only had to write the code once, and all of your sprites
can use it!
mbrace Game Development Workbook Page 27

Now I have my winning condition set. How about a losing condition? I want my player to lose when
their score is negative points (less than zero). I can set up the losing condition exactly the same way I set
up the winning condition:
1) Create a new background that displays a losing message
2) Use an if block to check for a score that is less than zero
3) When the score is less than zero, display my losing background and broadcast the game over
message.
This is just one example of how a player can win or lose a game. Be creative and think of what works
best for your game. For example:
You could have the win condition be based on capturing a specific item, or completing a specific
task.
You could use two different variables: a points variable to track points and determine if the
player wins and a health variable that decreases and is used to determine if a player loses (when
their health variable is zero)
Another option is to use a timer. Let’s say that I only want my player to win if they can score 10 points
in less than 100 seconds. I can use Scratch’s built in time to check for this.
The timer is located in the sensing blocks. To use the timer:
1) Click the checkbox next to timer to show the timer value on the stage
2) Choose when to start timing. I want to start my timer when the green flag is clicked (as soon as
the game starts). Since I am handling winning and losing in the scripts for my stage, I will control
the timer there as well.
3) Drag a reset timer block to where you want to start the timer
mbrace Game Development Workbook Page 28

Click the
checkbox next
to timer to
make it show
up
Add a reset timer
block where you want
to start the timer
Timer will show up
here on the stage.
If you play the game now, you will see that the timer will count the seconds that the game is being
played. Now we need to add a check based on the timer. We are updating our win conditions like this:
The player WINS if: They score 10 points AND they have been playing for less than 100 seconds
The player LOSES if: They have negative points OR they have been playing for more than 100
seconds
AND and OR are called Boolean expressions in programming and are used a lot when we have more
than one thing that we want to check.
Use an AND when you have multiple conditions and ALL of them must be true
o This is like the case for winning since it must be true that the user has 10 points and it
must also be true that they have been playing for less than 100 seconds
Use an OR when you have multiple conditions and only ONE of them must be true
o This is like the case for losing since either the player must have a negative points value
or they must have been playing for more than 100 seconds, but both do not have to be
true.
and and or blocks are available from the operators menu. Both
have two slots for the conditions involved.
mbrace Game Development Workbook Page 29

Now that we know about and and or blocks, we can update our win and lose conditions for our player.
You can use and and or blocks throughout your program any time you want to check multiple conditions!
You can also use the same blocks we have talked about today to create more challenges for your games.
For example, you can:
Create multiple levels – advancing to a new level can be dependent on reaching a certain
number of points, or any other condition
Make your game more challenging as players accumulate more points, for example, I could
make the duck move faster once the dinosaur has 5 points
Be creative! There is no limit to the kinds of games you can create using Scratch!
Adding Sound to Your Program
You can also add sounds to your program. The sound blocks are bright purple.
If you add sounds to your game, please be
respectful of the other students in the lab and
keep the volume on your computer low!
To play a sound, you must first add it to your
sprite.
There are two ways to add a sound to your
sprite. You can either record a sound using a
microphone, or you can import a sound. If you
import a sound, you can use the built in sounds
from the scratch library, or upload your own
sound/music file.
All of the options for sounds are on the sounds
tab in the current sprite pane.
mbrace Game Development Workbook Page 30

Scratch Review
Now you have built your first computer game using Scratch! For our next activity, we will be using the
Google App Inventor to build applications for Android phones. Many of the principles you learned using
Scratch will be directly applicable to App Inventor and beyond. Once you learn the basics of
programming in one environment, to learn a new environment you just have to learn the new syntax for
the environment or language. In programming the syntax of a language refers to the specific commands
(blocks in Scratch/App Inventor) that you use to implement the logic of your program.
Here are some of the programming basics that we learned in Scratch that apply to programming in
general.
Execution order
o Sequential
o Branching
o Looping
Variables
o Creating variables
o Giving variables initial values
o Changing the value of a variable
Using random numbers
Logical expressions
o And
o Or
o Checking equality
Using timers
Capturing user events (e.g. key presses)
Using libraries of commands
Importing/using media files (sound, pictures, etc)
DEBUGGING!
These are among the principles of computing that we teach in introductory programming courses at
CSUMB – they are core to understanding programming and computer science! If you have any
questions about any of these concepts, make sure you ask.
mbrace Game Development Workbook Page 31

Introduction to App Inventor
These materials are based on the App Inventor tutorials available online: http://appinventor.googlelabs.com/learn/tutorials/
What is App Inventor?
App Inventor is free software available from Google that allows you to build apps for Android phones
using a drag-and-drop interface similar to that of Scratch.
Where can I get App Inventor?
App Inventor is available for free download at: http://appinventor.googlelabs.com/about/ Follow the
directions to install it at home
Do I need an Android Phone?
If you have an Android based smart phone, you can put the apps you create on your phone. However, if
you don’t have an Android phone, you can still build apps with App Inventor. The Inventor contains an
emulator that lets you simulate a phone on your computer.
Example of the Android emulator that you can use
to test your App Inventor programs.
What do I need to run App Inventor?
To use App Inventor, you will need a Google account. If you have gmail, you already have a Google
account. If you do not have gmail, you can easily set up a Google account using your existing email
address.
To create a Google account, go to www.google.com and click on the Sign In link in the upper right
hand corner of the screen. On the next page, click on create an account now. Follow the
instructions that appear to create your account. Note that you will need access to an existing
email account to complete the process. Make sure you have a Google account before proceeding
with the App Inventor portion of the workbook.
mbrace Game Development Workbook Page 32

App Inventor Interface
The App Inventor interface is a bit more complicated than Scratch. You will use three different windows
to work on your project.
The first window you will use is App Inventor
itself. You will use this window to create new
projects and to add user interface elements
and resources (like sound files and images) to
your programs.
App Inventor is run through a web browser,
like Firefox or Chrome and can be found at
http://appinventor.googlelabs.com
From App Inventor, you can open the Blocks
Editor. Blocks Editor looks a lot like the script
building area of Scratch. There is a menu of
blocks on the left hand side of the screen. You
have one tab for built in blocks that can be
used in all projects. The other tab says my
blocks and contains blocks that are tied to
specific user interface elements in your
program.
From the blocks editor, you can launch and
connect to an emulator. The emulator is used
to build and debug your program if you don’t
have access to an Android phone.
In this workbook, we will be using the emulator
for all of our work. If you have access to an
Android phone, you can follow the directions
online for running your programs on your
phone.
mbrace Game Development Workbook Page 33

Mole Mash Game
To learn App Inventor, we are going to step through one of the Google tutorials to build a simple Whacka-Mole
game. We’ll also add a few bells and whistles of our own. The first thing we will need to do is to
start App Inventor and create a new project.
A new project looks like this:
This palate contains
the different user
interface elements
that you can use in
your programs
The middle portion of
the screen is where
you lay out the
interface for your
application
To start App Inventor, go to
http://appinventor.googlelabs.com.
Click on the My Projects link at the top of the page.
Click on the new button in the upper
left hand corner of the screen.
In the dialog box that opens, give your
new game a name. I will call mine
MoleMash*
This section shows you a
list of the components and
media items that have
already been added to your
project.
Here you can see and
change the properties of an
individual interface
component
*The name that I gave my game might look a little funny. I wrote “Mole Mash” with no spaces, and I capitalized the first letter
of each word. This kind of formatting is called camel case. Camel case is used extensively in programming for naming different
parts of projects. When you learn a new programming language it is always important to learn the conventions (like camel case)
that programmers use in that language. It is also important to learn whether a language is case sensitive. In some languages
MoleMash, molemash and MOLEMASH would all be the same thing – those are case insensitive languages. In other languages
each different combination of upper/lowercase letters would name a distinct entity.
mbrace Game Development Workbook Page 34

The first thing that we will do is change the name of our project. In the Properties portion of the screen
(far right hand side), where it says title type the name of your game.
The name that
you gave your
game will now
show up in the
title bar on the
screen
You will notice that now we have changed the title of our screen to be MoleMash (the same as the
name of our program). Each element in our interface also has a name that we can use to refer to the
element in our program. The screen is called Screen 1.
Now we need to set up the interface that a user will see when they start the game. There will be two
elements in our user interface:
1) A canvas which will serve as the area that our game is played on. A canvas is a very useful
element that can be blank or contain a background image. For our purposes, one very useful
property of canvas elements is that we can capture when a user touches or drags their finger on
a canvas.
2) An image of a mole. This image will move around on the canvas and the user will touch it to
score points (just like Whack-a-mole).
To get the canvas element, drag a Canvas block from the Basic palate onto Screen1.
Type the name
of your game
here
mbrace Game Development Workbook Page 35

When the canvas is created, it is given the default name Canvas1 by App Inventor. Let’s rename the
canvas – we will give all of our elements new names to help us keep them straight when we are writing
our program. To rename the canvas:
Now we will change the size of our canvas
element. Again, make sure that the
MyCanvas element is selected in the
Components part of the screen. In the
Properties section, change the width and the
height to 300 pixels.
Note the other properties that you can set at
this point. For each element we use, there
will be a selection of properties that you can
set using this panel of the App Inventor.
1) In the Components section of the
screen make sure that Canvas1 is
selected (highlighted green)
2) Click on the rename button at the
bottom of the panel
3) In the dialog that pops up, give the
canvas element a new name, I am going
to call mine MyCanvas
Now that we have our canvas all set up, we need to add our mole image. Go to this url:
http://appinventor.googlelabs.com/learn/tutorials/molemash/MoleMashAssets/mole.png
You will need to save the mole image to your desktop. To do this
on a PC, right-click on the image (on a Mac, hold down the CTRL
button and click the mouse). Choose Save Image As from the
menu that pops up. Make sure you save the image on your
desktop so that you can easily find it later.
mbrace Game Development Workbook Page 36

To add the mole to our program, we will use an ImageSprite. A sprite (like in Scratch) is an element that
can move around on a canvas element. The sprite element is located in the Animation block menu.
Drag an ImageSprite from the
Animation menu onto the
MyCanvas element in the
Viewer. Make sure you put the
sprite on the canvas and not on
the background of the screen.
Now we need to associate our mole image with our sprite. In the
Properties panel, click on Picture. This will pop open a menu. On
the menu, click the Add button and use the Browse feature in the
Upload File box to find our mole picture (it should be called
mole.png and will be located on your desktop).
Every time we use an image or sound, we will add it to our project
like this. Unlike Scratch, there is not a library of built in images for
App Inventor. You can create your own images, or use images that
you find using the Internet. You could even use the images from
the Scratch library in your App Inventor programs if you have
Scratch on the same computer. On a PC, the Scratch Images are
located in: C:\Program Files\Scratch\Media\Costumes
At this point, also change the name of the ImageSprite to Mole.
[Hint, refer back to how we changed the name of the canvas if you
need a reminder].
In the Properties panel for the Mole, you will see an X and Y.
These are the coordinates for the sprite on the canvas. If you
drag the sprite around on the canvas, you will see that the X and
Y values automatically update.
mbrace Game Development Workbook Page 37

Now that we have the mole on the canvas, let’s think about how we are going to get him to move
around. The way that Whack-a-Mole works:
The mole shows up at random locations
The mole is only visible for a short period of time
Then the mole moves to a new random location
This means that we will need some sort of way to control how long the mole is visible each time it
appears. Luckily, just like Scratch had a built in timer that we could use, App Inventor has a Clock
element that we can add to our program.
Drag a Clock block from the Basic palate
onto the MoleMash screen in the Viewer
pane. Instead of showing up on the screen,
the clock will show up underneath in a
section labeled non-visible components.
Now that the clock is added, rename it
MoleTimer. Also, under Properties, set the
interval to be 500. The interval is in
milliseconds – there are 1000 milliseconds in
a second, so by setting the interval to 500,
our clock will trigger every half-second.
Now we are all ready to write the code that will move our mole around the screen! So far we have been
using the interface builder in App Inventor. To write code, we need to open the Blocks Editor
To open the Blocks Editor, click the button in the
upper right-hand corner of your screen. You may see
some security warnings from Windows. Blocks Editor
is 100% safe to run, so click OK or Run on the
warning dialog boxes that pop up.
mbrace Game Development Workbook Page 38

Your Blocks Editor Screen should look something like this:
Here is the menu of blocks
that you can use in your
programs. There are two
tabs. Built-in contains blocks
that can be used in any
program. My Blocks
contains blocks that are
specific to the user interface
elements in your app. If you
click on the My Blocks tab
you should see a list of the
elements we have used.
Clicking on any element or
category will open a menu of
blocks that you can use
Drag the blocks into this
center area to create a
program.
In our game, we are going to need to move the mole twice:
1) The mole will move every time the timer expires
2) The mole will move every time the user successfully touches it
We could write two separate pieces of code to move the mole, however the movement is the same in
each case – the mole disappears and reappears at a new random location on the screen. Instead of
writing the movement code twice, we are going to write one procedure that moves our mole. A
procedure (may also be called a method or function) is a way to give a name a chunk of code. Then,
you can use the name to call the procedure from multiple places in your program. Each call to a
procedure runs the code associated with it.
The Blocks Editor gives us an easy way to create methods. In the Built-In blocks, under Definition we
can use the to procedure arg block to define a new procedure.
Drag a to procedure arg block into
the middle area of the screen to
add it to your program.
If you make a
mistake and need to
delete a block, drag it
to the trash can in
the bottom right
hand corner.
mbrace Game Development Workbook Page 39

Click on the word procedure to change the name of the procedure.
We will call our procedure MoveMole. In programming when you
are naming things, you want to make sure you use descriptive
names. This will help you remember how your program is working!
Now we just need to fill in the MoveMole procedure with the commands that move the mole the way
we want it to. How will we tell the mole where to go? Do you remember the X and Y properties of the
mole sprite? We can access those properties and change them using blocks! We can tell the mole to go
to a new location by setting (changing) the value of the X and Y properties.
If you click on the My Blocks tab, you will see that
Mole is one of the options. If you click on Mole,
you will see a list of blocks that allow you to
manipulate the Mole sprite using code! Here, we
want to change the X and Y properties of the mole.
Scroll all the way to the bottom of the menu of
Mole blocks. You will see blocks that say set
Mole.X to and set Mole.Y to. Mole.X means “the X
property of the sprite Mole”. So these are the
blocks that we want.
Drag one set Mole.X to block and one set Mole.Y
to into the MoveMole procedure.
Now we need to figure out what we want the new
X and Y values for the Mole to be. We want the
mole to reappear at a new random location on the
screen. Just like Scratch, App Inventor has some
built in tools that allow us to generate random
numbers. However, it is a little trickier than in
Scratch to set the parameters for the random
number.
To generate the random location on the screen, we will use several different blocks from the Math
menu which is located in the Built-In tab – we will need call random fraction and some of the simple
calculation blocks.
mbrace Game Development Workbook Page 40

We know that our X and Y locations can be anywhere on the canvas. Since we set our canvas to be 300
pixels by 300 pixels, we know that the X and Y coordinates range from 0 to 300. The call random
fraction block calls a procedure that generates a random number between 0 and 1. This is a built in
procedure which means we don’t have to write it ourselves, we can just call it. If we multiply 300 (the
width of the canvas) by 0, we get 0 (the smallest possible X coordinate). If we multiply 300 by 1, we get
300 (the largest possible X coordinate). So, that means that if we multiply 300 by any number between
0 and 1, we are guaranteed to get a valid X coordinate. We can do the same thing for the height of the
canvas and Y coordinates. In code, that would look like this:
You can get the MyCanvas.Width and MyCanvas.Height blocks from the MyCanvas menu on the My
Blocks tab. Notice the difference between the set Mole.X to block and the MyCanvas.Width block.
Blocks that say set ___ to and are darker blue allow you to update the value of a property. Blocks that
just have the name of the property (like MyCanvas.Width) and are lighter blue-gray just get the value of
a property. You can see on the Mole menu of blocks that both types of blocks are available for each
property. There is a set Mole.X to block that allows you to change the value of the Mole.X property and
a Mole.X block that allows you to find out what the current value of that property is. In programming,
blocks like set Mole.X to are called mutators, since you are changing or mutating the value of a property.
Blocks like Mole.X are called accessors since you are accessing the value of a property.
Now we are almost done with our MoveMole procedure, but there is one small change to make. Right
now it is possible for our Mole to appear only partially on the screen. We can fix this issue by updating
our procedure like this:
Why does this work? Here, we worked out the whole procedure for moving the mole in one step, but
often in programming, you will build a procedure in small pieces over time. You will test each piece as
you go. Remember that the way to learn programming is just to play and try new things. If your
program doesn’t work the way you expect it to, just undo the last step you did and try something else!
This process of trial and error is one of the things that makes programming FUN!
mbrace Game Development Workbook Page 41

Let’s see what our procedure looks like when it runs on a phone. To do this, we will need to start the
Android emulator.
Once your emulated phone is ready to go, you
need to connect to it. You do this through the
Blocks Editor by clicking on the Connect to
Device button and choosing the emulator from
the drop down list (there should only be one
option). As the Block Editor connects to the
emulator, the little phone icon will first turn
yellow, and then green.
When the phone icon is green, your Blocks
editor is connected to your emulator and your
app will show up on the simulated screen. Any
changes you make to your app in App Inventor
or the Blocks Editor will automatically show up
in the emulator.
Click on the New emulator
button on the top of the
screen.
This will open a window
telling you to be patient. Click
OK and be patient
Your emulated phone will fire up and initialize.
When you see the middle screen, drag the
green lock to “unlock” the phone. When you
see the screen on the far right, your emulated
phone is all ready to go!
mbrace Game Development Workbook Page 42

Our mole shows up in the emulator, but he isn’t moving. What’s wrong? We need to call our
MoveMole procedure – this is true of every procedure, you must call it when you want it to run. When
do we want our MoveMole procedure to run? Every time our timer goes off. Where do you think we
could find a block for the timer?
On the My Blocks tab, there is a menu for
MoleTimer. One of the blocks is when
MoleTimer.Timer do. This block allows us to
specify certain commands to run every time that
the timer goes off.
What do we want to do each time the timer goes off? We
want to call our MoveMole function. To do this, we want to
go to the My Definitions menu on the My Blocks tab. Our
procedure shoes up in this menu, because it is a procedure
that we defined. We will need the call MoveMole block
This is what the code to call our function should look like.
Now if you look at the emulator, the mole should be jumping
around the screen.
What should the next step in our project be? Right now, nothing happens if the user touches the mole.
Let’s add onto our program so that when the user touches the mole, his/her score goes up by one. The
steps for this process will be:
1) Create a variable called score to hold the user’s score (just like we did in the dinosaur game)
2) Add an element to the interface to display the current score
3) Add one to the value of score every time the user touches the mole
To create a variable, we will use the def variable as
block from the Definition menu in the Built-In tab.
You will notice that when you drag this block into the
program area, there is a yellow exclamation point in the
block. This is because Blocks Editor wants you to give
the variable an initial value. Let’s set the initial value to
zero since the player will start the game with zero
points.
mbrace Game Development Workbook Page 43

When you want to add a block, you can select it from a
menu, or you can start typing and Blocks Editor will try
to guess which block you want.
If I type a 0, Blocks Editor will open a menu with its
guesses on which block I want. Here there is only one
guess, I want the number 0. Go ahead and select the
0. Blocks Editor will create a number block for you
that you can attach to your variable block. The yellow
exclamation point should go away.
Now let’s add a user interface element that displays a user’s current score. To do this, we will need to
go back to the App Inventor window [Hint: remember that App Inventor is running in your web browser]
Drag a Label element so that it shows up
underneath the canvas on our screen in the Viewer.
Change the name of the label to be ScoreLabel.
You can use the Text field in the Properties pane to
set the initial value of the label to be Score: 0
Now, switch back to the Blocks Editor. If you go to the My Blocks tab, you should now see that there is a
menu available for ScoreLabel. The next step is to figure out what we want the label to display. We
always want the label to show the current value of the variable score. Let’s write a new procedure that
updates ScoreLabel with the current value of Score. I will call my new procedure UpdateScore.
We want to update the Text field of the ScoreLabel, so we need
the set ScoreLabel.Text to block from the ScoreLabel menu.
Since ScoreLabel is a text label, we will need
to use some blocks from the Text menu to
set its value. We want the value to be the
word “Score: “ followed by the value of the
variable score. To combine multiple things,
we will use the join block from the Text
menu. The text block can be used for static
text that will not change like “Score: “.
mbrace Game Development Workbook Page 44

The last thing we need is the value of the variable score. Since score is a variable that we defined, we
can get its value from the My Definitions menu. The word “global” just refers to the fact that score is a
global variable - it can be accessed from anywhere in our program.
Here is the completed UpdateScore procedure:
Now, for step three, we need to increment the value of the
score variable when the mole is touched. If you go to the
Mole menu on the My Blocks tab, you will see a big green
block named when Mole.Touched do. This block captures
the user event created when the user touches the mole
and allows us to run commands only when that happens.
When you drag the Mole.Touched block onto the program area,
you will see that two blocks (x and y) are automatically created.
These blocks give you two local variables called x and y. Local
variables can only be used inside the procedure where they are
created. These variables give you access to the x and y coordinates
where the mole was touched when the event was captured. We
don’t need this information in our game, but for other touch events
it can be very useful to have!
What do we want to do when the Mole.Touched event occurs? We want to:
1) Add one to the value of the score variable
2) Call the UpdateScore function to update the ScoreLabel in the interface
3) Call MoveMole to move our mole to a new location
(Do you see now why procedures are handy?)
Try to fill in the do portion of the Mole.Touched block to accomplish steps 1-3 above.
mbrace Game Development Workbook Page 45

Does your code look a little bit like this?
Now give your game a try. You should be able to run up the score by clicking (this is how you simulate a
touch) on the mole as it pops up on the screen. Is your game too hard or too easy? You can modify the
difficulty by changing the value on the timer.
Let’s add a reset button that starts the user over at a score of zero. What are the steps to add a new
element to our game?
1) Add the interface element in App Builder
2) Use Blocks Editor to write code to implement the behavior of the element.
Here is what my interface looks like after I add a RESET button.
Above you can see the code that sets the score back to zero
when the user clicks the button. A button click, is handled just
like a screen touch – you can capture the event using a green
block.
Now you should see the pattern for adding new elements to your game. Right now the game is very
basic. What kinds of things could we add to make the game more fun? More challenging? Could you
change the game so that it gets harder as the user scores more points? How about changing it so that
the user loses points if they click and miss the mole? Think about how you might make some of these
changes. Pick one change (it can be one of the ones listed here, or you can come up with your own) and
add it to the game.
Think about how you might figure out how to use new blocks or to accomplish tasks that we haven’t
covered.
mbrace Game Development Workbook Page 46

Team Project Worksheet
We have learned two different programming tools: Scratch and App Inventor and you have had the
chance to build a simple game in each. Now it is time for you to make a game of your own! You will do
this project in small groups and each group will be able to choose which platform they would like to use
and how their game will work. To help plan your game, fill out this worksheet with your group.
Group members:
Our game will use: (Circle one) Scratch App Inventor
Why did you choose this platform?
Our game is called:
Short description of how game is played:
How does someone win your game?
How does someone lose your game?
What elements (timers, sprites, variables, etc) will you need in your game?
mbrace Game Development Workbook Page 47

What resources/media files (images, sounds, etc) will you need for your game?
What do you think will be the main challenges that your group will encounter while working on your
game?
Are there things that you don’t know how to do in Scratch/App Inventor that you will need to figure out
to build your game? What are they? How will your team learn them?
mbrace Game Development Workbook Page 48