The Research Experience for Teachers Program
“Creating Coordinate Plane Games with Scratch”
http://www.cs.appstate.edu/ret
Introduction/Motivation:
One of the best ways to master concepts is to use them in another creative form. For example, writing a story,
composing a song, or teaching a lesson. For this module you will use creative and computational thinking to
master concepts about the coordinate plane by creating a computer game.
Materials List:




Computer
Scratch editor installed on computer or
Online by creating an account at https://scratch.mit.edu/
Lab activity sheet
Lab Activity:
A) Scratch Review:
1) Open up Scratch on the computer. If you are using the online version of Scratch, go to https://scratch.mit.edu/
and create an account.
2) Take some time to familiarize yourself again with Scratch by doing the following:
 Under Scripts click on the blue Motion commands. You can click on many of these to observe
what they do. At the bottom of the list are three commands with check boxes. Check the boxes
and observe what they record.
 Next do the same with the Looks, Sounds, Pen, and Events buttons. If you haven’t used some
of them before, try to guess what they are for and experiment to find out how they work.
3) Right click on Sprite 1, the cat, and delete it. For the coordinate plane we want to use smaller sprite. Click on
the sprite library to choose a symmetric sprite like a ball or star. Then go to the costumes tab to shrink your
sprite down to a smaller size. Finally, click on the re-center tool:
in the top right corner and drag it to
the center of your sprite.
Click back to the scripts tab.
4)
Next in the bottom left section of your screen click on Stage Backdrop. Click the painting icon to choose a
backdrop from the library. Under other, select the xy-grid backdrop. Then click back on to your sprite.
B) Creating and using variables:
1) Under Scripts, click on the orange Data button. It’s fairly empty because no variables have been
created yet. Variables are used to remember values that can change. For example:
The script
always is 10 steps unless the programmer goes back and changes it.
The script
will move “a” steps, and “a” can change according to the program.
2) Click Make a Variable and name it “xsprite”, this is to keep track of the x value of the sprite on the
coordinate plane. Repeat this naming the second variable “ysprite”. You can name your variables
all kinds of ways. It is helpful if the name helps you, the programmer, remember what they
represent.
3) Okay let’s start some script. Make sure your sprite is highlighted and you are on the script tab.
Build the following script:
 “when clicked” is under Events (runs program)
 “clear” is under Pen (clears the screen)
 “set” is under data where we created our variables
use the drop down menu to choose “xsprite” then
go to Operators and drag the pick random command
into the set command
 After getting the go to command from Motion go back
to data and drag the variables into it.
4) Now click the
at the top of the display. Your sprite should move to a random location.
At the top left of the
display there is a readout of each variable.
Now add a few changes. Click on the yellow Control commands and choose the repeat bracket and
drag it around the all the current code, except the clear command. Change the repeat from 10 to 3.
Now go to the Pen commands and place a stamp command after the go to. Now let’s change the go
to a glide command, moving the xsprite and ysprite variables into it.



With glide it is easier to see the progression
of each time the variables are being changed
This is progress, but when the program ends
there is no record of the exact values of the
first two points.
Let’s try renaming our variables each time.
5) Go back under the Data commands. Let’s add four more variables: Ax, Ay, Bx, By. Now add
some blocks like below to try to reassign the values to the new variables. Change the repeat to 2.
 Run this script
 Does it keep track of both sets of points?
 What is wrong with it?
 Can you think of a way to fix it?
C) Making a list
1) The last script did not work. It is possible to reassign the values to different variables, by not using a
repeat and doing each point with a new set of commands, but that would get really long, especially if
you had more points. Another way to keep track of values is by using a list.
2) Go back to the Data commands and hit the button to Make a List. Name your list “Points” since
that is what we want to keep track of in this program.
3) Modify your code as seen below




As you can see, it does keep track of a list of values
It shows four values instead of ordered pairs because we
added the xsprite and ysprite separately.
There are other options for our list depending on
if we want to use the list to just display the points
or if we want to be able to recall those values
for later calculations.
Another option is to create multiple lists. One for
the x values, one for the y values and one to
display the coordinates.
4) Go back to Data commands add two more lists “xvalues” and “yvalues”. Uncheck the boxes.
5) Now go to the Operator commands and pull out 4 joins. Nest them together inside each other.
6) We want it to display a coordinate point. “(x,y)” Type a parenthesis in the first and last blanks, a
comma in the middle blank, and drag the xsprite and ysprite from Data into the others. See below:
7) Now get another add to command from Data to place under the other adds in the repeat loop. Drag
this join statement into the blank to add to the list points.
8) Change the other add statements lists to “xvalues” and “yvalues”, respectively.
9) Add 3 delete all commands at the beginning of the code.
10) Click the green flag to run the script. It should show all 3 lists. Now we can change our repeat to
many points. Try 6 or 10.
 Lists are very useful
 You don’t have to display them, they can
safely store information or they can be
displayed at specific times in a program
 You can recall just a specific value in a list.
 You can delete, add, or replace an item.
 Take a moment to look at the commands
under lists.
11) Let’s try one of those commands out. Find the say command under the Looks commands and add it
to the bottom of your code. Find the item command and change it to say item 4 of points. Drag it
into the say
command. Run the script.
D) User Interaction
1) When making a game you need to provide ways for the user to interact with the game. This can be
using arrow keys, the mouse, or another piece of hardware attached to the computer like a joystick or
MaKey-MaKey. A user can also use the keyboard to type in answers in response to a question.
2) First, go under Data and uncheck any boxes you might have checked. Next, detach the code from
the top of the repeat down. We will use part of this later but for now we don’t want it to run.
3) Run it one time to delete the lists and clear the graph
4) Add a new Sprite as a player. Click on the new sprite then make sure you are on the scripts tab. It
should be blank.
5) Add the following code to see types of interaction. Click the green flag to try it out.






This makes things a whole lot more fun.
Interaction is under the Sensing commands.
Try the up arrow, touching and clicking with the
mouse pointer.
Interaction is unlimited, use your imagination.
Be careful to think of what might go wrong. It is
important to consider all the possible user inputs.
Your user may put in a value that isn’t expected or
cause the Sprite to go outside the game parameters.
For example, now if the user keeps hitting the up
arrow the Sprite will go off the screen.
6) Now let’s try questions. Remove the code from step 5 above. Under Sensing commands find the
ask ________ and wait command. Drag it to your Script.
7) Find the answer command and click the box. Run the Script and type in your name.
8) By clicking the answer box it displays it on the screen. Unclick the answer box to hide it.
9) You can ask all types of questions. So now we need to know what to do with the answers.
10) If you need to keep track of more than one answer store them with variables or lists.
11) Try the code below:
 Storing with variables lets you
recall an answer even after
another question is asked.
 A variable can be recalled
anytime or multiple times as long
as it hasn’t been reassigned.
 Lists might be more efficient
in some applications.
E) Using Boolean Logic and Conditional Statements for decision making
1) Boolean Logic is a system of operators that evaluate to the answers True or False
2) The Comparison Operators are = , ≠, >, ≥, <, ≤, that you see in math expressions. For example,
we could compare a user’s age input to 10. Then based on a true response do something and a false
response do something else.
3) To do this you need to use a Conditional Statement: If Then, or If  Then; Else. We have used
some of these already. These direct the program based on input.
4) Logical Operators are “and”, “or”, “not”, “not or”. This way we can check if two things are both
true, one out of two are true, or is something is not true. It is a comparison of sets.
5) Let’s try an example to see how these work. Try the code below.
 In a game these are helpful to direct the flow
 You can tell a player if their answer is correct
 You can give options for answer formats

F) Let’s Make a Slope Game
1) Now let’s put together what we have learned to make a complete game. We already have a lot of the
components we need.
2) First, let’s welcome the player and ask their name.
a) Go to your 2nd Sprite
b) You may choose to change the background for your welcome and hide the Sprite.
c) Change your code question back to asking their name and save it with the name variable.
d) Delete the age variable and other pieces of code that you don’t need
e) Give them a prompt and way to start the game. Then use a broadcast under Events to switch to
the game (1st Sprite)
3) Now add “When I receive broadcast” Event command at the top of your detached code in Sprite 1
4) You only need to repeat the loop twice to get two points
5) You can choose to keep displaying the points list or maybe use a say to display the points on the
graph itself. Do not show the other two lists, xvalues and yvalues.
6) Move the clear and three delete statements down under the beginning of the broadcast and above the
loop, because you will need to clear these each round.
7) Create a variable “Score” to the keep the total score for all the rounds. Under the click to start
button set the score to 0. That way we can play multiple rounds and only clear the score when the
game is restarted.
8) Add a line drawn between the two points created. You can do this by using the pen up and pen
down feature. Experiment until you find the correct way to place these commands.
9) Once your points, line, and, coordinates are displayed ask the player to Find the Slope and wait for
their response. Make sure you give clear instructions on how they should format their answer.
10) You might want to Broadcast to a “Check Answer” piece of code. It is sometimes helpful to keep
your code in smaller sections if you need to fix problems later.
11) Now the challenge is to check the answers for correctness. You will need to have the computer
determine the correct answer from the x and y values stored in your list. Then you will have to use a
Boolean comparison operator to compare their answer to the correct one and respond correctly
12) If their answer is correct, remember to add points to their score.
13) Ask the player if they want play another round. Use and If – Then – Else statement to either rebroadcast “Play Round” or “End the Game”.
14) At the END GAME go to a new screen and display their final score
BONUS: Create a List to keep (indefinitely) a list of Top Ten High Scores with the players’ names attached.
Project Extension: Make a Coordinate Plane Game
1) Choose one of the following Challenges:
Create an expanded version of the Slope Game. It should include finding slope from a
graph, from two points, and from an Ax + By = C equation. It should have different
backgrounds for each level and keep total scores for each type.
Create a game to find the Distance and Midpoint between two points.
Create a game to find the Equation of a Line from two points on a graph
Create a game to graph a line from a given equation in either standard or slopeintercept form.
Create a game to graph a line parallel or perpendicular to a given line, through a given
point.
2) Your game must include:
a) Welcome and Game Over Screens
b) User interaction
c) Display of Graphs and Equations Needed
d) Automated Grading and Scoring
e) Top Scores List
3) Your game may not include images from the internet that are not open source or copied portions
of other games.
4) Grading Rubric:
Welcome/G.O.
User Interaction
Graphs/Equations
Appearance(W)
The graphics make
the game visually
interesting.
Usability (W)
The screen and
instructions are
easy to read.
Appearance(G.O)
The graphics make
the game visually
interesting.
Usability (G.O)
The screen and
instructions are
easy to read.
Bonus
Points are given
outstanding
creativity /ideas
Total:
/20
Personalize
Addressing the
player by name.
Points
Plotted and or
labeled as
appropriate
Lines
Drawn correctly
between points
User Choice
Allowing user to
choose levels or
features
Different Types
Using multiple
types of inputs
Parameters Set
Clear parameters
for user input
Bonus
Points are given
outstanding
creativity /ideas
Total:
/20
Grading/Scoring
Computer Answer
The method for
getting the answer
is correct
Grades Correct
If user is correct it
grades it as such
and gives feedback
Equations
Grades Incorrect
Randomly
If user is incorrect
generated or from grades it as such
a list.
and gives feedback
Appearance
Score
Graphs and
Keeps score of
Equations are neat multiple rounds
and by type
Bonus
Bonus
Points are given
Points are given
outstanding
outstanding
creativity /ideas
creativity /ideas
Total:
/20 Total:
/20
Top Scores/2
Player
Appearance
Scores are well
displayed
Top Scores of
overall points or
player
comparisons
Top scores based
on percentage of
correct rounds per
player
Uniqueness
Adding a
multiplayer
feature
Bonus
Points are given
outstanding
creativity /ideas
Total:
/20