Interactive Animations and Games ('23-'24)

Programming for a Purpose

Resources
Animation and Games Word Search

Word Search
Overview
Working with a team, find the following words in the grid. They may be horizontal, vertical, or diagonal in any direction.
BOOLEAN, CONDITIONAL, COUNTER PATTERN, DEBUGGING, DRAW LOOP, FUNCTION, INPUT, PARAMETER,
PROPERTIES, SPRITE, VARIABLE, VELOCITY

Objective
Find and circle all 12 words as quickly as you can using your chosen strategy!

X B P V C E A T A R R A N Q C
D R A W L O O P U Z L O C O Y
S E I T R E P O R P I O U A T
P A R A M E T E R T N N Q K I
E D Q R A A O G C E T I D R C
C M E G V V M N C E L B H T O
E X B B Y A U V R V T O G Q L
B L F L U F R P Y J Y O I M E
U I I U K G A I H F L L B T V
M W Y N V T G T A Z F E C I S
E A Y B T U D I S B B A O E P
I R N E R J W R N U L N C H R
A S R D A X L J O G X E V G I
N N L A N O I T I D N O C Q T
B X G M J I N U P Y H U I V E

1
 Interactive Animation and Games - Lesson 1
Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Animation & Game Designs for Users

Choosing The Right Interactive Design

An animation and game design company has five template designs they can use for potential clients. These templates
are available in Code Studio for you to look at.

The list below represents several potential clients who are looking for interactive design help. Your task is to
recommend a particular template to each client based on their needs.

1) Maria: “I’m an elementary school teacher and I want something cute and fun to use with my 8 year old students
to help them read.”

Recommendation: Template ______ Why did you pick this template? _____________________________

________________________________________________________________________________________

________________________________________________________________________________________

2) Richard: “I care about the environment and I want to design a game where you separate trash from plastic so
people learn how to separate trash from recycling.“

Recommendation: Template ______ Why did you pick this template? _____________________________

________________________________________________________________________________________

________________________________________________________________________________________

3) Layla: “I am a grandmother and would like to create and send messages to my grandchildren every now and
then that they will enjoy and know I’m thinking of them, even if it isn’t a holiday or their birthday,.”

Recommendation: Template ______ Why did you pick this template? _____________________________

________________________________________________________________________________________

________________________________________________________________________________________

4) Emma: “I love sharks! I want to design a game where a shark moves up and down on one side of the screen,
eating small fish coming towards him while at the same time avoiding swimming people that are also moving
across the screen towards the shark. I hope this helps people see that sharks don’t actually want to harm us!”

Recommendation: Template ______ Why did you pick this template? _____________________________

________________________________________________________________________________________

________________________________________________________________________________________

5) Levi: “I write my own short comic books (3-4 pages) and I would like to turn them into digital stories where the
scene is moving while the character(s) interact with their surroundings.”

Recommendation: Template ______ Why did you pick this template? _____________________________

________________________________________________________________________________________

________________________________________________________________________________________

1
Creating your Own Design
You’ve now been asked to create a design for a client. Choose one of the clients below and circle or
highlight your selection on this guide. Then, either on a sheet of paper or using a provided digital template,
sketch out a design that matches the client’s needs below.

Tatiana: “I run a business that makes greeting cards and would like to have
digital versions specifically for appreciation and thank you cards. My greeting
cards are humorous in nature and my appreciation/thank you cards, in particular,
feature cute and funny puns. I would like the cards to be interactive as well so
that the user has to click on something or move a character using keyboard keys
to see the "punchline" of the pun appear. It would also be great if the card had
instructions so the user knows how to interact with the card."

Daniel: “I want to make a game for my grandma that is easy to play and stars
her dog, a butterfly-chasing corgi. The game should include the corgi trying to
catch butterflies. Her corgi doesn’t like the color green so it would be fun if there
were different green items like green apples or green veggies that the corgi had
to avoid. It would be great if the game kept score too!”

Define: Choose one of the users above and create a defining sentence:
_________________ needs a way to ________________________________________
__________________________________________ in order to___________________
______________________________________________________________________.
It should ______________________________________________________________
______________________________________________________________________.

Prepare: Consider how you want to design their animation or game idea. List any
images to include, colors to use, or places for text. List your ideas below:

Try: On a sheet of paper or in a digital template: create a prototype of the design

Reflect:
What is one thing that you think your design does well and really meets the needs of the
user? ______________________________________________________________
______________________________________________________________________
What’s an area that you think can still be improved to meet the needs of your user?
______________________________________________________________________

2
The Problem-Solving Process with Design

The Problem-Solving Process with Design

The Problem Solving Process is useful when trying to design a new product for
someone, like a new website or app or device. This process will help you clarify
and break down a problem into manageable steps so you can create something
that meets the needs of your user.

🔎 Define
● Identify individuals or groups of people who could benefit from your
product
● Identify the needs and wants of people who would use your product
● Imagine you’re one of your users. Write down what a user might see or hear or feel when experiencing
their need or want.
● If possible, interview potential users to learn more about what they want
● Consider creating sentences like “_____________ needs a way to _____________ in order to
_________. It should ___________________”

📝 Prepare
● Set aside your own personal beliefs or assumptions so you can empathize with the users.
● Brainstorm potential solutions that meet the needs and wants of your users
● Research what exists and how others have addressed similar problems and see what you can learn
● Create a “pros” and “cons” list for potential solutions to help decide which one to create
● You won’t be able to create everything all at once - decide on the “minimum” you need to create to start
testing and learn what works and what doesn’t

🖥 Try
● Sketch your idea on paper or with a digital tool
● Create a prototype of your product, which is a quick, low-stakes version of your idea that you can test
● Identify a specific aspect of your prototype you want to test and receive feedback on
● Share your prototype with others and get feedback, then group that feedback into categories

🤔 Reflect
1. What categories of feedback did you get from your design? What improvements can you make based
on that feedback?
2. What was the reaction to your prototype when you shared it with others? How can you build on positive
reactions? How can you make changes to avoid negative reactions?
3. What aspect of your prototype are you most proud of? What part needs improvement?
4. Based on your testing, if you were to restart the Problem-Solving Process at the Define step, what new
problems would you try to identify? How might you iterate on what you have to make it more useful to
your users?

1
Interactive Animations and Games ('23-'24)
Plotting Shapes
Resources
 Interactive Animations and Games - Lesson 2
Name_______________________________________________ Period ______ Date ___________________

Activity Guide - Plotting Shapes A

IMPORTANT!! DON’T LET YOUR PARTNER SEE THIS PAPER!

Overview
Your partner should have the Drawing Tool open on a computer where you cannot see it. Alternate turns trying
explaining how to draw your image. Afterwards check their work but make sure to keep your drawings hidden.

Drawing 1A (Color) Drawing 1A (Black and White)

Drawing 2A (Color) Drawing 2A (Black and White)

Draw Your Own
Use the space below to draw your own image with the shapes. Then see if you can communicate it to your partner to
draw using the shape drawing tool in Game Lab. You can also give your drawing to another group to use as a
challenge.

Reflect

What things were important in communicating about position, color, and order of the shapes in this activity?

What’s another way you have seen similar problems solved in the past?

2
 Interactive Animations and Games - Lesson 2
Name_______________________________________________ Period ______ Date ___________________

Activity Guide - Plotting Shapes B

IMPORTANT!! DON’T LET YOUR PARTNER SEE THIS PAPER!

Overview
Your partner should have the Drawing Tool open on a computer where you cannot see it. Alternate turns trying
explaining how to draw your image. Afterwards check their work but make sure to keep your drawings hidden.

Drawing 1B (Color) Drawing 1B (Black and White)

Drawing 2B (Color) Drawing 2B (Black and White)

Draw Your Own
Use the space below to draw your own image with the shapes. Then see if you can communicate it to your partner to
draw using the shape drawing tool in Game Lab. You can also give your drawing to another group to use as a
challenge.

Reflect

What things were important in communicating about position, color, and order of the shapes in this activity?

What’s another way you have seen similar problems solved in the past?

2
Interactive Animations and Games ('23-'24)
Mini-Project - Robot Faces
Resources
 Interactive Animations and Games - Lesson 7

Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Robot Face Planning

Sprite Scene Overview

Using shapes, variables, and randomNumbers, you’re going to create a unique robot face. Be as creative as you can!
Think about how you can make your robot unique in design; from the shape of its head, the number of eyes or mouths,
or if it has antennas! There is no limit, so let's come up with something original and unexpected!

Before you jump into programming your robot face, you need to plan! Let’s use our handy Problem-Solving Process to
help us! You can refer back to the Problem Solving Process and Programming handout to help you with the steps!

Define
Write out a short description of your robot face, including what sorts of shapes and random features it will include.

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

Prepare
The space below is 50 by 50. That means each square on the paper will map to 50 pixels on the computer. Sketch out
your robot face using at least 4 different shape commands. List the variables you’ll use on the next page.
Shapes:

background(color)

rect(x, y, width, height)

ellipse(x, y, width, height)

line(x1, y1, x2, y2)

arc(x, y, width, height, start, stop)

point(x, y)

regularPolygon(x, y, sides, size)

shape(x1, y1, x2, y2, … xN, yN)

fill(“color”)

noFill()

stroke(“color”)

noStroke()

strokeWeight()
List at least 4 variables you’ll use to give your robot face random features below.

Variable Name Description

Try

Once your teacher has approved your plan, go to Code Studio and start coding.

Reflect

Answer the following questions from the Problem Solving Process and Programming handout:

Compare your program to the defined problem … Were you successful in solving all aspects of the problem? How do
you know?

_______________________________________________________________________________________

_______________________________________________________________________________________

What part of your animation are you most proud of?

_______________________________________________________________________________________

_______________________________________________________________________________________

What was the most challenging?

_______________________________________________________________________________________

_______________________________________________________________________________________

Are there any changes or improvements you can make to this program or another like it in the future?

_______________________________________________________________________________________

_______________________________________________________________________________________

2
The Problem-Solving Process with Programming

Problem-Solving Process with Programming

The Problem Solving Process is useful when writing code for a challenging program. This process will help
you clarify and break down a problem into manageable steps so you can easily identify the code you need to
write for each step.

🔎 Define
● Read the instructions carefully to make sure you understand the
goals and intended outcomes of the program.
● If there is a sample program, run it to ensure you understand what it
does.
● If there is starter code, read it to understand what it does.
● Rephrase the problem in your own words.
● Identify any skills you are being asked to apply.
● Decide which aspect of the problem you want to complete first.

📝 Prepare
● Brainstorm as many ideas for the different ways you could program the problem to solve all of its parts.
● Write out in plain English or pseudocode your ideas for how to solve the problem so that the program
does what it is supposed to do.
● List what you already know how to do and what you don't yet.
● Describe your ideas to a classmate
● Review similar programs that you may have written in the past.
● Sketch out your idea on paper if needed

🖥 Try
● Pick one idea from the previous step and document why you chose that idea.
● Implement your chosen idea and write one small piece of code at a time.
● Test your program often.
● Use comments to document and keep track of what your code does.
● Go back to the previous step to look at your other ideas for solving the problem if you get stuck
● Apply appropriate debugging strategies

🤔 Reflect
1. Compare your program to the defined problem … Were you successful in solving all aspects of the
problem? How do you know?
2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
5. Are there any changes or improvements you can make to this program or another like it in the future?

1
Robot Faces Project Rubric
Key Concept Extensive Evidence Convincing Evidence Limited Evidence No Evidence

Program They sequenced the Program may contain Program has Errors in program
Development - program well1 and all a few incorrectly significant sequencing are
Program shapes on the sequenced code sequencing errors, significant
Sequence screen appear as resulting in a few resulting in many enough to keep
intended. shapes hidden behind shapes the output from
others unintentionally. unintentionally resembling
hidden or intended drawing.
overlapping others.

Position - They used at least 4 They only use the They use at least 1 They used no
Shapes different types of ellipse and rect shape and place it shapes in the
shapes2 and placed shapes and place correctly on the program.
them correctly on the them correctly on the screen using the
screen using the screen using the coordinate system.
coordinate system. coordinate system.

Variables / The program creates They created at least They created at No variables or
Storing and correctly uses at 4 variables and used least 1 variable and randomNumbers
Information least 4 variables. All them correctly in the used it in the are used in the
variables have program. All variables program.
program.
descriptive names have descriptive
and use the names. Only 2 of the They used
randomNumber variables use the randomness in the
block to give the randomNumber block program, but not
program a different to give the program a within a variable.
look each time the different look each
program is run. time the program is
run.

Creating a They used elements Elements are They used some They did not fill
Digital Artifact as described in the generally used as elements as the project guide
project guide and described in the described in the out, or it is
clearly displayed a project guide. project guide. unrelated to the
robot face. program.

1. Sequenced the program well

● If the program code is not sequenced correctly, some elements, such as shapes, may be
unintentionally hidden behind other shapes.

2. Different types of shapes:

● Each shape listed below would be considered a “different type” of shape. Students should use at
least 4 different types of shapes.
○ rect(x, y, width, height)
○ ellipse(x, y, width, height)
○ line(x1, y1, x2, y2)
○ arc(x, y, width, height, start, stop)
○ point(x, y)
○ regularPolygon(x, y, sides, size)
○ shape(x1, y1, x2, y2, … xN, yN)
Interactive Animations and Games ('23-'24)
Mini-Project - Captioned Scenes
Resources
Captioned Scenes Project Rubric
Key Concept Extensive Evidence Convincing Evidence Limited Evidence No Evidence

Program They sequenced the Program may Program has Errors in program
Development - program well1 and contain a few significant sequencing are
Program and all elements on incorrectly sequencing errors, significant
Sequence the screen appear as sequenced code resulting in many enough to keep
intended. resulting in a few elements the output from
elements hidden unintentionally hidden resembling the
behind others or overlapping others intended scene.
unintentionally.

Modularity - At least 2 sprites At least 1 sprite At least 1 sprite No sprites are

Sprites and created, each with at created with at least created. No used in the
Sprite least one property one property properties updated program.
Properties updated after updated after after creation.
creation2. creation.

Position - At least 2 shapes, 2 At least 1 shape, 2 A cumulative of at No elements

Elements and sprites, and 2 lines of sprites, and 1 line of least a total of 3 (shapes, sprites,
the Coordinate text are placed text are placed on elements are placed or text) are
System correctly on the the screen using the on the screen using placed on the
screen using the coordinate system. the coordinate screen using the
coordinate system.. system (e.g 2 sprites coordinate
& 1 line of text or 1 system.
sprite, 1 shape, & 1
line of text)

Creating a Elements are used Elements are Some elements are The project guide
Digital Artifact as described in the generally used as used as described in is not filled out or
project guide and described in the the project guide. is unrelated to the
clearly display a project guide. program.
captioned scene.

1. Sequenced the program well

● If the program code is not sequenced correctly, some elements, such as shapes, sprites, and
text, may be unintentionally hidden behind others.
● In the specific case of sprites, if the drawSprites() code is not sequenced correctly, some or all
sprites may not appear on the screen.

2. Updated after creation:

● Sprites are created with these two lines of code:
var sprite = createSprite(200, 200);
sprite.setAnimation("animation_1");
● After the above two lines, a sprite property listed below should be updated
○ rotation
○ scale
○ tint
○ alpha
○ width
○ height
The Problem-Solving Process with Programming

Problem-Solving Process with Programming

The Problem Solving Process is useful when writing code for a challenging program. This process will help
you clarify and break down a problem into manageable steps so you can easily identify the code you need to
write for each step.

🔎 Define
● Read the instructions carefully to make sure you understand the
goals and intended outcomes of the program.
● If there is a sample program, run it to ensure you understand what it
does.
● If there is starter code, read it to understand what it does.
● Rephrase the problem in your own words.
● Identify any skills you are being asked to apply.
● Decide which aspect of the problem you want to complete first.

📝 Prepare
● Brainstorm as many ideas for the different ways you could program the problem to solve all of its parts.
● Write out in plain English or pseudocode your ideas for how to solve the problem so that the program
does what it is supposed to do.
● List what you already know how to do and what you don't yet.
● Describe your ideas to a classmate
● Review similar programs that you may have written in the past.
● Sketch out your idea on paper if needed

🖥 Try
● Pick one idea from the previous step and document why you chose that idea.
● Implement your chosen idea and write one small piece of code at a time.
● Test your program often.
● Use comments to document and keep track of what your code does.
● Go back to the previous step to look at your other ideas for solving the problem if you get stuck
● Apply appropriate debugging strategies

🤔 Reflect
1. Compare your program to the defined problem … Were you successful in solving all aspects of the
problem? How do you know?
2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
5. Are there any changes or improvements you can make to this program or another like it in the future?

1
 Interactive Animations and Games - Lesson 11

Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Sprite Scene Planning

Sprite Scene Overview

Using shapes, sprites, and text, you’re going to create a simple scene. You can think of this like a page in a story, a
panel in a comic, or just a standalone scene.

Before you jump into programming your scene, you need to plan! Let’s use our handy Problem-Solving Process to help
us! You can refer back to the Problem Solving Process and Programming handout to help you with the steps!

Define
Write out a short description of your scene which should include at least 2 shapes, 2 sprites and 2 lines of text.

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

Prepare
The first thing to consider when designing your scene is what your background will look like. You can use the drawing
commands that you’ve used in the past to lay out a simple background over which you will place your sprites.
The space below is 50 by 50. That means each square on the paper will map to 50 pixels on the computer. Sketch out
your background using only the drawing commands (use at least 2 shapes). List the sprites you’ll use on the next
page.
Shapes:

background(color)

rect(x, y, width, height)

ellipse(x, y, width, height)

line(x1, y1, x2, y2)

text(string, x, y, width, height)

textSize(pixels)

Color and Style:

fill(‘color’)

noFill()

stroke(‘color’)

noStroke()

strokeWeight()
List at least 2 sprites you’ll use below.

Sprite Label Description Sprite Property (scale, rotation, tint, etc)

List at least 2 lines of text you’ll use below.

Text Text style (location, size, color)

Try

Once your teacher has approved your plan, go to Code Studio and start coding.

Reflect

Answer the following questions from the Problem Solving Process and Programming handout:

Compare your program to the defined problem … Were you successful in solving all aspects of the problem? How do
you know?
_______________________________________________________________________________________

_______________________________________________________________________________________

What part of your animation are you most proud of?

_______________________________________________________________________________________

_______________________________________________________________________________________

What was the most challenging?

_______________________________________________________________________________________

_______________________________________________________________________________________

Are there any changes or improvements you can make to this program or another like it in the future?
_______________________________________________________________________________________

_______________________________________________________________________________________

2
Interactive Animations and Games ('23-'24)
Mini-Project - Animation
Resources
Animated Scene Project Rubric
Key Concept Extensive Evidence Convincing Evidence Limited Evidence No Evidence

Program You sequenced the You property You have several Errors in program
Development - program well1 and separated code in sequencing errors, sequencing are
Program Sequence properly separated and out of the draw resulting in many significant enough to
code in and out of the loop, however they elements keep the output from
draw loop2. have a few incorrectly unintentionally hidden resembling the
sequenced code or overlapping others. intended scene or the
resulting in a few Some code is Draw loop is not used
elements hidden improperly placed in to create animation
behind others or out of the lo
unintentionally.

Modularity - Sprites At least 2 sprites At least 1 sprite At least 1 sprite No sprites are used in
and Sprite Properties created, each with at created with at least created. No the program.
least one property one property updated properties updated
updating in the draw inside the draw loop inside the draw loop.
loop3.

Position and At least 2 shapes, 2 At least 1 shape, 2 A cumulative of at No elements (sprites,

Movement sprites, and 2 lines of sprites, and 1 line of least a total of 3 shapes, or text) are
text are placed text are placed on the elements are placed placed on the screen
correctly on the screen using the on the screen using using the coordinate
screen using the coordinate system. At the coordinate system.
coordinate system. At least 1 element system (e.g 2 sprites
least 2 elements moves during the & 1 line of text or 1
move in different program. sprite, 1 shape, & 1
ways4. line of text).

Optional “Stretch” Feature

Variables At least 2 non-sprite At least 1 non-sprite At least 1 non-sprite No non-sprite

variables are created variable is created variable is created variables are created
and their values are and its value is and used in the and used.
updated in the draw updated in the draw program but does not
loop and affect the loop and affects the update in the draw
program output. program output. loop.

1. Sequenced the program well

● If the program code is not sequenced correctly, some elements, such as shapes, sprites, and text, may be unintentionally hidden behind others.
● In the specific case of sprites, if the drawSprites() code is not sequenced correctly, some or all sprites may not appear on the screen.

2. Code in and out of the draw loop

● Code inside the draw loop is for things that are changing as the program is running. This includes updating properties or non-sprite variables as
well as any shapes for the background, text, and the drawSprites() block.

3. Updating in the draw loop:

● Sprites are created with these two lines of code outside of the draw loop:
var sprite = createSprite(200, 200);
sprite.setAnimation("animation_1");
● After the above two lines, a sprite property, such as the ones listed below, should be continuously updating inside the draw loop
○ x ○ scale ○ width
○ y ○ tint ○ height
○ rotation ○ alpha

4. Move in different ways

● One element should have random movement using randomNumber()
● One element should move using the counter pattern (x = x + 1)
 Interactive Animations and Games - Lesson 14

Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Animated Scene

Using random numbers and the counter pattern, you’re going to create an animated scene.

Before you jump into programming your scene, you need to plan! Let’s use our handy Problem-Solving Process to help
us! You can refer back to the Problem Solving Process and Programming handout to help you with the steps!

Define

Write out a short description of your scene that includes at least 2 sprites, 2 shapes, and 2 lines of text. Include the
sorts of animations your scene will include in your description.

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

Prepare

Before thinking about the animations, sketch out exactly what the scene will look like as it just starts. This is the set up
that you will need to code outside of the draw loop. Make sure you know which parts are shapes and which are
sprites.
You need to create and use at least 2 sprites. List the sprites you will use in the box below.
Sprite Label Description

For each sprite that will be animated, choose the sprite property that will be updated in the draw loop, and whether you
will use random numbers or the counter pattern
Sprite Property Counter Pattern or Random?

You need to have at least 2 lines of text. List them in the box below along with how you’d like the text to look.
Text Description (size, color, location)

Do you need variables to store information about where something is?

Variable Label Description

Try
Once your teacher has approved your plan, go to Code Studio and start coding.

Reflect
Compare your program to the defined problem … Were you successful in solving all aspects of the problem? How do
you know?
_______________________________________________________________________________________

_______________________________________________________________________________________

What part of your animation are you most proud of?

_______________________________________________________________________________________

_______________________________________________________________________________________

What was the most challenging?

_______________________________________________________________________________________

_______________________________________________________________________________________

Are there any changes or improvements you can make to this program or another like it in the future?
_______________________________________________________________________________________

_______________________________________________________________________________________

2
The Problem-Solving Process with Programming

Problem-Solving Process with Programming

The Problem Solving Process is useful when writing code for a challenging program. This process will help
you clarify and break down a problem into manageable steps so you can easily identify the code you need to
write for each step.

🔎 Define
● Read the instructions carefully to make sure you understand the
goals and intended outcomes of the program.
● If there is a sample program, run it to ensure you understand what it
does.
● If there is starter code, read it to understand what it does.
● Rephrase the problem in your own words.
● Identify any skills you are being asked to apply.
● Decide which aspect of the problem you want to complete first.

📝 Prepare
● Brainstorm as many ideas for the different ways you could program the problem to solve all of its parts.
● Write out in plain English or pseudocode your ideas for how to solve the problem so that the program
does what it is supposed to do.
● List what you already know how to do and what you don't yet.
● Describe your ideas to a classmate
● Review similar programs that you may have written in the past.
● Sketch out your idea on paper if needed

🖥 Try
● Pick one idea from the previous step and document why you chose that idea.
● Implement your chosen idea and write one small piece of code at a time.
● Test your program often.
● Use comments to document and keep track of what your code does.
● Go back to the previous step to look at your other ideas for solving the problem if you get stuck
● Apply appropriate debugging strategies

🤔 Reflect
1. Compare your program to the defined problem … Were you successful in solving all aspects of the
problem? How do you know?
2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
5. Are there any changes or improvements you can make to this program or another like it in the future?

1
Interactive Animations and Games ('23-'24)
Project - Interactive Card
Resources
 Computer Science Discoveries

Name(s)________________________________________ Period ______ Date ________________

Computer Science Practices Reflection

How I’ve grown Practice How I want to grow

Problem Solving

Persistence

Creativity

Collaboration

Communication

1
Interactive Card Project Rubric
Key Concept Extensive Evidence Convincing Evidence Limited Evidence No Evidence

Program You gave thoughtful feedback You gave and responded to You gave some feedback You did not give feedback
Development - to peers and you responded peer feedback. to peers. to peers
Peer Feedback to peer feedback by making
appropriate changes to
program

Program You sequenced the program You property separated You have several Errors in program
Development - well1 and properly separated code in and out of the draw sequencing errors, sequencing are
Program code in and out of the draw loop, however they have a resulting in many elements significant enough to
Sequence loop2. few incorrectly sequenced unintentionally hidden or keep the output from
code resulting in a few overlapping others. Some resembling the intended
elements hidden behind code is improperly placed scene or the Draw loop is
others unintentionally. in or out of the loop. not used to create
animation

Modularity - At least 3 sprites created, At least 1 sprite created At least 1 sprite created. No sprites are used in the
Multiple Sprites each with at least one with at least one property No properties properly program.
property updating in the draw updating inside the draw updating inside the draw
loop3 loop. loop.

Algorithms and Your program responds to at Your program responds to 1 Your program contains Your program does not
Control - User least 2 different types of user type of user input. code, such as keyDown(), have user input.
Input input4. for user input but it is not
used correctly and the
program does not respond.

Algorithms and Your program uses at least 3 Your program uses at least Your program either has Your program does not
Control - conditionals inside the draw 2 conditionals inside the conditionals that all use any conditionals.
Conditionals loop - 1 (or more) responds to draw loop - 1 that responds respond to user input (or all
user input and 1 (or more) is to user input and 1 that is using sprite
triggered by a variable or triggered by a variable or properties/variables) or
sprite property5. sprite property. only has 1 conditional
inside the draw loop.

Position and At least 3 sprites are placed At least 2 sprites are placed At least one sprite is placed No elements (sprites or
Movement on the screen using the on the screen using the on the screen using the shapes) are placed on
coordinate system, and move coordinate system and coordinate system. the screen using the
in different ways6. move during the program. coordinate system.

Optional “Stretch” Feature

Variables At least 2 non-sprite variables At least 1 non-sprite At least 1 non-sprite No non-sprite variables
are created and their values variable is created and its variable is created and are created and used in
are updated in the draw loop value is updated in the used in your program but the program
and affect how the program draw loop and affects how does not affect how the
runs. the program runs. program runs.

1. Sequenced the program well

● If the program code is not sequenced correctly, some elements, such as shapes, sprites, and text, may be unintentionally hidden
behind others.
● In the specific case of sprites, if the drawSprites() code is not sequenced correctly, some or all sprites may not appear on the
screen.

2. Code in and out of the draw loop

● Code outside the draw loop is used to set up the program and its starting elements (creating sprites, setting sprite properties that
won’t change, etc).
● Code inside the draw loop is for things that are changing as the program is running. This includes updating properties or non-sprite
variables as well as any shapes for the background, text, and the drawSprites() block.
3. Updating in the draw loop:
● Sprites are created with these two lines of code outside of the draw loop:
var sprite = createSprite(200, 200);
sprite.setAnimation("animation_1");
● After the above two lines, a sprite property, such as the ones listed below, should be updating inside the draw loop.
○ x ○ scale ○ width
○ y ○ tint ○ height
○ rotation ○ alpha ○ visible
● Assigning value to a sprite property inside the draw loop, such as sprite.scale = 0.4, does not count as updating a property
unless it is in a conditional.

4. Different types of user input

● This includes keyboard and mouse inputs.
● Two different types can include two different keyboard inputs such as keyDown(“left”) and keyDown(“space”)

5. Triggered by a variable or sprite property

● A conditional should have a boolean statement that uses a variable, such as (count > 10), or a sprite property, such as (scale >
50).

6. Move in different ways

● Both types of the following movement should be used:
○ Random movement using randomNumber()
○ Smooth movement using the counter pattern (sprite.x = sprite.x + 1)
 Interactive Animations and Games - Lesson 18

Name(s)_______________________________________________ Period ______ Date ___________________

Project Guide - Interactive Card

Overview
You’re going to be developing an interactive digital card to share with someone you care about, but you’ll need to do
some planning before you start to program.

Before you jump into programming your scene, you need to plan! Let’s use our handy Problem-Solving Process to help
us! You can refer back to the Problem Solving Process and Programming handout to help you with the steps!

Define
Write out a short description of your scene, thinking about ways to include the following requirements: 3 sprites with
updating properties (both random movement and counter pattern), 2 conditionals responding to user input and 1
conditional triggered by a variable or sprite property. What sorts of shapes, sprites, animation, and text do you want to
include to meet those criteria?

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

_______________________________________________________________________________________

Prepare
Take a few minutes to sketch out your idea. It can include shapes, text, and sprites!

Shapes:

background(color)
rect(x, y, width, height)
ellipse(x, y, width, height)
line(x1, y1, x2, y2)
text(string, x, y, width, height)
textSize(pixels)
Color and Style:
fill(‘color’)
noFill()
stroke(‘color’)
noStroke()
strokeWeight()
Sprites: Use the table below to plan out your sprites. (You need at least 3, but you can use more if you want!) Next to
each sprite, plan out the image it will use and which properties will be updated in the draw loop and how (you need to
use both randomNumber and the counter pattern movements).

Sprite Label Image(s) Properties

Interactions: The final element of your card to consider is how the user will interact with it, and how the sprites may
interact with each other. You’ll want to include at least 2 conditionals that respond to user input (such as keyDown()) as
well as a conditional that responds to changing variables or sprite properties (such as sprite.y > 300). Use the table
below to plan out all of your conditionals and the corresponding action (you can add more rows if needed)

If / Else if / Else Condition Action

Do you need variables to store information about where something is?

Variable Label Description

Try

Once your teacher has approved your design, go to Code Studio to program your card.

Check your card to make sure it has everything it needs.

Reflect
Answer at least three of the reflection questions below:

1. Compare your program to the defined problem … Were you successful in solving all aspects of the problem? How
do you know?

2. Ask a classmate to try your program … Are there places where they struggle or show confusion?

3. Ask a classmate to read your code … Is your code and documentation clear and accurate?

2
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?

5. Are there any changes or improvements you can make to this program or another like it in the future?

3
 Interactive Animations and Games - Lesson 18

Peer Review - Interactive Card

Pre-Review
Creator’s Name: __________________________________

One thing I want feedback on is… ___________________________________________________________________

______________________________________________________________________________________________

Reviewer Section
Reviewer’s Name: _________________________________

Evidence I Found Types of Evidence Ideas for More

Multiple sprites, with multiple

properties updated in the
draw loop

Program responds to
multiple types of user input
and uses at least one
random number

Program is well sequenced

and properly separates code
in and out of the draw loop.

Uses multiple conditionals

inside the draw loop, at least
one of which is triggered by
a variable or sprite property

Multiple elements are placed

on the screen using the
coordinate system, and
move in different ways.

Multiple variables are used

and their values are updated
during the program. At least
one variable or property
uses the counter pattern.
Free Response Feedback

I like… _______________________________________________________________________________________

______________________________________________________________________________________________

I wish… ______________________________________________________________________________________

______________________________________________________________________________________________

What if… _____________________________________________________________________________________

______________________________________________________________________________________________

Creator’s Reflection

1. What piece of feedback was most helpful to you? Why?

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

2. What piece of feedback surprised you the most? Why?

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

3. Based on feedback, what changes will you make to your interactive card?

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

2
Interactive Card Project - Student Checklist
Key Concept Extensive Evidence

Program ❒ You gave thoughtful feedback to peers

Development -
Peer Feedback ❒ You responded to peer feedback by making appropriate changes to program

Program ❒ Your program is well sequenced

Development -
Program Sequence ❒ Your program properly separates code that belongs in and out of the draw loop.

Modularity - ❒ You used at least 3 sprites

Multiple Sprites
❒ You have at least 1 property for each sprite updating in the draw loop

Algorithms and ❒ Your program responds to at least 2 different types of user input
Control - User
Input

Algorithms and ❒ Your program uses at least 3 conditionals inside the draw loop
Control -
Conditionals ❒ At least 2 of the conditionals respond to user input

❒ At least 1 of the conditionals is triggered by a variable or sprite property

Position and ❒ At least 3 sprites and 2 other elements are placed on the screen using the
Movement coordinate system

❒ Sprites and elements move in different ways (some have random movement with
randomNumber() and some have smooth movement using the counter pattern).

Optional “Stretch” Feature

Variables ❒ Your program uses at least 2 variables

❒ Your variable values are updated in the draw loop and affect how the program runs.
The Problem-Solving Process with Programming

Problem-Solving Process with Programming

The Problem Solving Process is useful when writing code for a challenging program. This process will help
you clarify and break down a problem into manageable steps so you can easily identify the code you need to
write for each step.

🔎 Define
● Read the instructions carefully to make sure you understand the
goals and intended outcomes of the program.
● If there is a sample program, run it to ensure you understand what it
does.
● If there is starter code, read it to understand what it does.
● Rephrase the problem in your own words.
● Identify any skills you are being asked to apply.
● Decide which aspect of the problem you want to complete first.

📝 Prepare
● Brainstorm as many ideas for the different ways you could program the problem to solve all of its parts.
● Write out in plain English or pseudocode your ideas for how to solve the problem so that the program
does what it is supposed to do.
● List what you already know how to do and what you don't yet.
● Describe your ideas to a classmate
● Review similar programs that you may have written in the past.
● Sketch out your idea on paper if needed

🖥 Try
● Pick one idea from the previous step and document why you chose that idea.
● Implement your chosen idea and write one small piece of code at a time.
● Test your program often.
● Use comments to document and keep track of what your code does.
● Go back to the previous step to look at your other ideas for solving the problem if you get stuck
● Apply appropriate debugging strategies

🤔 Reflect
1. Compare your program to the defined problem … Were you successful in solving all aspects of the
problem? How do you know?
2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
5. Are there any changes or improvements you can make to this program or another like it in the future?

1
Interactive Animations and Games ('23-'24)
Collision Detection
Resources
 Interactive Animations and Games - Lesson 20

Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Collisions A

Draw Your Sprites:

In the grid below, draw two square sprites on the bottom line. The sprites can be touching or not. Don’t let your
partner see your sprites.

0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Sprite Properties:

Using the grid, find the x position of the sprite (right in the middle of the square) and the sprite’s width. This is the only
information you should tell your partner about the sprites.

x width

sprite 1

sprite 2
 Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Collisions A

Collision Detection:

Copy the information from the first page onto this chart, then turn your picture over so your partner can’t peek. The
chart below is the only information your partner should see about your sprites. Once you’ve filled out the first chart,
trade this worksheet with your partner so you can both try out your collision detectors.

x width

sprite1

sprite2

STOP!
Trade worksheets with your partner before continuing.

Look at the information on the chart above. Can you think of any way that you could use these numbers to figure out
whether the two sprites are touching? Brainstorm your ideas below.

Do you think the sprites are touching?. Why or why not?

Check your partner’s drawing to see whether you were correct. Do you think your strategy was effective?

2
 Interactive Animations and Games - Lesson 20

Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Collisions B

Draw Your Sprites:

In the grid below, draw two square sprites on the left hand line. The sprites can be touching or not. Don’t let your
partner see your sprites.

1
Sprite Properties:
2
Using the grid, find the y position of the sprite (right in the middle of
3
the square) and the sprite’s height.
4

6
y height
7
sprite 1
8

9 sprite 2

10

11

12

13

14

15

16

17

18

19

20
 Name(s)_______________________________________________ Period ______ Date ___________________

Activity Guide - Collisions B

Collision Detection:

Copy the information from the first page onto this chart, then turn your picture over so your partner can’t peek. The
chart below is the only information your partner should see about your sprites. Once you’ve filled out the first chart,
trade this worksheet with your partner so you can both try out your collision detectors.

y height

sprite1

sprite2

STOP!
Trade worksheets with your partner before continuing.

Look at the information on the chart above. Can you think of any way that you could use these numbers to figure out
whether the two sprites are touching? Brainstorm your ideas below.

Do you think the sprites are touching?. Why or why not?

Check your partner’s drawing to see whether you were correct. Do you think your strategy was effective?

2
Interactive Animations and Games ('23-'24)
Mini-Project - Side Scroller
Resources
The Problem-Solving Process with Programming

Problem-Solving Process with Programming

The Problem Solving Process is useful when writing code for a challenging program. This process will help
you clarify and break down a problem into manageable steps so you can easily identify the code you need to
write for each step.

🔎 Define
● Read the instructions carefully to make sure you understand the
goals and intended outcomes of the program.
● If there is a sample program, run it to ensure you understand what it
does.
● If there is starter code, read it to understand what it does.
● Rephrase the problem in your own words.
● Identify any skills you are being asked to apply.
● Decide which aspect of the problem you want to complete first.

📝 Prepare
● Brainstorm as many ideas for the different ways you could program the problem to solve all of its parts.
● Write out in plain English or pseudocode your ideas for how to solve the problem so that the program
does what it is supposed to do.
● List what you already know how to do and what you don't yet.
● Describe your ideas to a classmate
● Review similar programs that you may have written in the past.
● Sketch out your idea on paper if needed

🖥 Try
● Pick one idea from the previous step and document why you chose that idea.
● Implement your chosen idea and write one small piece of code at a time.
● Test your program often.
● Use comments to document and keep track of what your code does.
● Go back to the previous step to look at your other ideas for solving the problem if you get stuck
● Apply appropriate debugging strategies

🤔 Reflect
1. Compare your program to the defined problem … Were you successful in solving all aspects of the
problem? How do you know?
2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
5. Are there any changes or improvements you can make to this program or another like it in the future?

1
 Side Scroller Project Rubric
Key Concept Extensive Evidence Convincing Evidence Limited Evidence No Evidence

Program Development - The project guide is The project guide is mostly The project guide is filled The project guide is
Project Guide complete and reflects complete and is generally out, but is not complete incomplete or missing.
the project as submitted. reflective of the submitted or does not reflect the
project. submitted project.

Program Development - You sequenced the You property separated code You have several Errors in program
Program Sequence program well1 and in and out of the draw loop, sequencing errors, sequencing are
properly separated code however they have a few resulting in many significant enough to
in and out of the draw incorrectly sequenced code elements unintentionally keep the output from
loop2. resulting in a few elements hidden or overlapping resembling the
hidden behind others others. Some code is intended scene or the
unintentionally. improperly placed in or Draw loop is not used
out of the draw loop. to create animation

Modularity - Multiple At least 3 sprites At least 2 sprites created At least 2 sprites created No sprites are used in
Sprites created and animations and animations set properly. and animations set. The the program.
set3 properly. The x The x velocity of the target x velocity of the target or
velocity of the target and or obstacle properly set obstacle not set or set
obstacle properly set outside the draw loop. inside the draw loop.
outside the draw loop.

Algorithms and Control - Your program has Your program has Your program responds Your program does not
Player Control conditionals to control conditionals meant to control to the up key but does have conditionals to
Conditionals the player sprite’s the player sprite’s jumping, not have the additional respond to user input.
jumping4 inside the draw however the sprite does not conditionals to control
loop. respond as expected5. the sprite jumping
movement.

Algorithms and Control - Your program has Your program has Your program either Your program does not
Looping Conditionals conditionals to control conditionals in the draw loop does not have all use any conditionals to
multiple sprites’ looping meant to control multiple conditionals in the draw control looping
behavior6 inside the sprites’ looping behavior, loop needed to control behavior.
draw loop. however one of them does multiple sprites’ looping
not work as expected. behavior, or has required
conditionals but none of
them work as expected.

Algorithms and Control - Your program has Your program has Your program either Your program does not
Interaction Conditionals conditionals to control conditionals in the draw loop does not have all use any conditionals to
multiple sprite meant to control multiple conditionals in the draw control sprite
interactions7 inside the sprite interactions, however loop required to control interactions.
draw loop. one of them does not work multiple sprite
as expected. interactions, or has
required conditionals but
none of them work as
expected.

Variables Your program properly Your program properly Your program properly Your program does not
updates the two updates the two provided updates at least one update any of the
provided non-sprite non-sprite variables during provided non-sprite provided non-sprite
variables during the the game and properly variable during the game variables during the
game and properly updates at least one of the and properly updates at game.
displays the variable variable totals on the screen. least one of the variable
totals on the screen. totals on the screen.

The below explanations and examples give criteria guidance for students choosing to recreate the sample Side Scroller.

1. Sequenced the program well

● If the program code is not sequenced correctly, some elements, such as shapes, sprites, and text, may be unintentionally
hidden behind others.
● In the specific case of sprites, if the drawSprites() code is not sequenced correctly, some or all sprites may not appear on the
screen.
2. Code in and out of the draw loop
● Code outside the draw loop is used to set up the program and its starting elements (creating sprites, setting starting properties,
sprite velocities that won’t change, etc).
● Code inside the draw loop is for things that are changing as the program is running, such as user interaction. This also includes
updating properties or non-sprite variables as well as any shapes for the background, text, and the drawSprites() block.

3. Sprites created and animations set:

● Sprites are created and their animations are set with these two lines of code outside of the draw loop:
var sprite = createSprite(200, 200);
sprite.setAnimation("animation_1");

4. Conditionals to control the player sprite’s jumping

● This includes the use of at least 3 conditionals (at least one of which utilizes user input)
● Examples:
○ One responding to user input with the keyDown(“up”) to change the sprite’s y velocity
○ One checking the y value of the player sprite to see if it has reached the “top” of it’s jump and then send the sprite back
down the screen
○ One checking the y value of the player sprite to see if it is “on the ground” and then stop the sprite from falling

5. Sprite does not respond as expected

● The sprite’s movement should simulate the player jumping up when the “up” key is pressed, followed by the sprite coming back
down to the ground on its own once it reaches the height of its jump. The sprite should also “land” back on the ground where it
started.

6. Conditionals to control multiple sprites’ looping behavior

● This includes the use of at least 1 conditional for the target sprite and at least 1 conditional for the obstacle sprite.
● Examples:
○ The conditional for the target sprite should check if the sprite’s x value has reached the left side of the screen and then reset
it’s x value to the right side of the screen
○ The conditional for the obstacle sprite should also check if the sprite’s x value has reached the left side of the screen and
then reset it’s x value to the right side of the screen

7. Conditionals to control multiple sprite interactions

● This includes the use of at least 1 conditional for the target sprite and at least 1 conditional for the obstacle sprite.
● Examples:
○ The conditional for the target sprite should use the isTouching() to detect interaction between the player sprite and target
sprite.
■ If the two sprites touch, the score variable should increase and the x value of the target sprite should reset to the right
side of the screen
○ The conditional for the obstacle sprite should also use the isTouching() to detect interaction between the player sprite and
the obstacle sprite.
■ If the two sprites touch, the health variable should decrease and the obstacle sprite should change in some way
● For example, the obstacle sprite’s rotation property could change to make the sprite appear to be knocked over or
the tint property of the obstacle sprite could change to make the sprite appear red indicating it was touched).
 Interactive Animations and Games - Lesson 21

Name(s)_______________________________________________ Period ______ Date ___________________

Project Guide - Side Scroller

Overview
In this project, you’ll use what you have learned to make a side scroller, a type of game with backgrounds that move
across the screen from side to side. There’s a sample side scroller in Code Studio.

Before you jump into programming your scene, you need to plan! Let’s use our handy Problem-Solving Process to help
us! You can refer back to the Problem Solving Process and Programming handout to help you with the steps!

Define
Play the sample game a few times. You can make your game just like this one, or change it to fit your preferences. Fill
out the chart below with what you want to keep the same about each of the requirements listed and what you want to
change about the requirements.

Requirements Example Game Things to Keep the Same Things to Change

At least 3 sprites Frog (player), fly (target),

mushroom (obstacle)

Player controls Up key to jump

Other sprite Target and obstacle both

controls loop back to the right side

Sprite Target disappears and

interactions loops and points
increase. Obstacle
rotation changes and
health decreases.

Variables score and health

Other Features

Prepare
What parts of programming this game are you not sure how to do yet?

______________________________________________________________________________________________

______________________________________________________________________________________________

Sprites: You need at least 3 sprites. The sample game has the player (frog), the obstacle (mushroom) and the target
(fly). If you plan on using different sprites, fill out the chart below with what you want to use for your player, obstacle,
and target, and where you will find the images.

Sprite Sample Your Choice Image/Animation Source

Player frog

Obstacle mushroom
 Target fly
Background: What do you want the background to look like? Draw a picture, and describe the shapes you will use to
make it.
____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

Player Controls: Fill in the chart below to plan how you are going to use conditionals to control your player sprite’s
movement.
Condition (example: up key) Action (example: move player sprite up the screen)

Other Sprite Controls: Fill in the chart below to plan how the other sprites are going to move and how you are going
to use conditionals to control your sprites’ movement.
Sprites Movement Condition (example: x < Action (example: reset x to right side of screen)
0)

Obstacle

Target

Sprite Interactions: Fill in the chart below to plan how each of the sprites are going to interact with each other.
Sprite Interactions Result

Player

Obstacle

Target

Variables: Fill in the chart below with the variables you plan to use during the game and display on the screen
Variable Label Description

2
Try

Once your teacher has approved your design, go to Code Studio to create your game.

Check your program to make sure it has everything it needs.

Reflect

Answer at least three of the reflection questions below:

1. Compare your program to the defined problem … Were you successful in solving all aspects of the problem?
How do you know?

2. Ask a classmate to try your program … Are there places where they struggle or show confusion?

3. Ask a classmate to read your code … Is your code and documentation clear and accurate?

4. Try to "break" your program … Did you find types of interaction or input that you could handle better?

5. Are there any changes or improvements you can make to this program or another like it in the future?

3
Interactive Animations and Games ('23-'24)
Mini-Project - Flyer Game
Resources
 Flyer Game Project Rubric
Key Concept Extensive Evidence Convincing Evidence Limited Evidence No Evidence

Program Development - The project guide is The project guide is mostly The project guide is filled The project guide is
Project Guide complete and reflects complete and is generally out, but is not complete incomplete or missing.
the project as submitted. reflective of the submitted or does not reflect the
project. submitted project.

Program Development - You sequenced the You property separated code You have several Errors in program
Program Sequence program well1 and in and out of the draw loop, sequencing errors, sequencing are
properly separated code however they have a few resulting in many significant enough to
in and out of the draw incorrectly sequenced code elements unintentionally keep the output from
loop2. resulting in a few elements hidden or overlapping resembling the
hidden behind others others. Some code is intended scene or the
unintentionally. improperly placed in or Draw loop is not used
out of the draw loop to create animation

Modularity - Multiple At least 4 sprites are At least 2 sprites created At least 2 sprites created No sprites are used in
Sprites created and their and animations set properly. and animations set. The the program.
animations are set The x velocity of the target x velocity of the target or
properly3 . The velocities or obstacle properly set obstacle not set or set
of the obstacles are outside the draw loop. inside the draw loop.
properly set outside the
draw loop.

Algorithms and Control - Your program has Your program has Your program responds Your program does not
Player Control conditionals to respond conditionals to respond to to at least one user input have conditionals to
Conditionals to multiple types of user multiple types of user input key but does not have respond to user input.
input that control the that are meant to control the the additional
player sprite’s player sprite’s movement, conditionals to control
movement4 inside the however the sprite does not the sprite movement.
draw loop. respond as expected5.

Algorithms and Control - Your program has Your program has Your program either Your program does not
Looping Conditionals conditionals to control conditionals in the draw loop does not have all use any conditionals to
the obstacle sprites’ meant to control the obstacle conditionals in the draw control looping
looping behavior6 inside sprites’ looping behavior, loop needed to control behavior.
the draw loop. however one of the the obstacle sprites’
obstacles does not behave looping behavior, or has
as expected. required conditionals but
none of them work as
expected.

Algorithms and Control - Your program has a Your program has a Your program either Your program does not
Interaction Conditionals & conditional and at least conditional and at least 1 does not have a use any conditionals to
Collision Detection 2 collision detection collision detection block in conditional in the draw control sprite
blocks to control the draw loop meant to loop required to control interactions.
multiple sprite control multiple sprite player interactions with
interactions7 with the interactions with the player, the target, or has the
player inside the draw however one of them does required conditional but it
loop. not work as expected. does not work as
expected.

Optional “Stretch” Feature

Variables Your program properly Your program properly Your program properly Your program does not
creates at least 2 creates at least 1 non-sprite creates at least 1 create or update any
non-sprite variables variable, updates it during non-sprite variable and non-sprite variables.
(such as score or the game, and properly updates it during the
health), updates them displays the variable total on game but does not
during the game, and the screen. properly display the
properly displays the variable total on the
variable totals on the screen.
screen.

The below explanations and examples give criteria guidance for students choosing to recreate the sample Flyer Game.
1. Sequenced the program well
● If the program code is not sequenced correctly, some elements, such as shapes, sprites, and text, may be unintentionally
hidden behind others.
● In the specific case of sprites, if the drawSprites() code is not sequenced correctly, some or all sprites may not appear on the
screen.

2. Code in and out of the draw loop

● Code outside the draw loop is used to set up the program and its starting elements (creating sprites, setting starting properties,
sprite velocities that won’t change, etc).
● Code inside the draw loop is for things that are changing as the program is running, such as user interaction. This also includes
updating properties or non-sprite variables as well as any shapes for the background, text, and the drawSprites() block.

3. Sprites are created and their animations are set properly:

● Sprites are created and their animations are set with these two lines of code outside of the draw loop:
var sprite = createSprite(200, 200);
sprite.setAnimation("animation_1");

4. Conditionals to respond to multiple types of user input that control the player sprite’s movement
● This includes the use of 3 conditionals that use different keyboard input (left arrow and right arrow) and/or mouse input.
● This also includes using the counter pattern with the sprite’s y velocity in order to create the complex acceleration movement
(i.e. falling behavior)

5. Sprite does not respond as expected

● The sprite’s movement should simulate the player going up when the “up” key is pressed, followed by the sprite accelerating
falling back down the screen on its own. The sprite should also move left and right when those keys are pressed..

6. Conditionals to control the obstacle sprites’ looping behavior

● This includes the use of at least 1 conditional per obstacle sprite to control the looping on both the x and y axis’.

7. Conditional and at least 2 collision detection blocks to control multiple sprite interactions
● This includes the use of at least 1 conditional that checks if the player sprite is touching the target sprite and then moves the
target to a random location
● This also includes the use of at least two collision detection blocks, such as collide() or bounceOff(), to have the obstacles
interact with the player sprite
 Interactive Animations and Games - Lesson 24
Name(s)_______________________________________________ Period ______ Date ___________________

Project Guide - Flyer Game

Overview
In this project, you’ll use what you have learned to make a flyer game. There’s a sample flyer game in Code Studio.

Before you jump into programming your scene, you need to plan! Let’s use our handy Problem-Solving Process to help
us! You can refer back to the Problem Solving Process and Programming handout to help you with the steps!

Define
Play the sample game a few times. You can make your game just like this one, or change it to fit your preferences. Fill
out the chart below with what you want to keep the same about each of the requirements listed and what you want to
change about the requirements.

Requirements Example Game Things to Keep the Same Things to Change

At least 4 sprites Flyer (player), coin

(target), rocks (obstacles)

Player controls Up key to fly up, floating

left and right with left and
right keys. Player falls
when not pressing
anything

Other sprite Obstacles loop across the

controls screen. Target moves to a
random location.

Sprite Target moves to a random

interactions location. Obstacles push
player.

Other Features

Prepare
What parts of programming this game are you not sure how to do yet?

________________________________________________________________________________________

________________________________________________________________________________________

Sprites: You need at least 4 sprites. The sample game has the player (flybot), two obstacles (rocks) and the target
(coin). If you plan on using different sprites, fill out the chart below with what you want to use for your player, obstacle,
and target, and where you will find the images.
Sprite Sample Your Choice Image/Animation Source

Player flybot

Obstacle (2) rocks

Target coin
Background: What do you want the background to look like? Draw a picture, and describe the shapes you will use to
make it.
____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

____________________________________________

Player Controls: Fill in the chart below to plan how you are going to use conditionals to control your player sprite’s
movement.
Condition (example: up key) Action (example: move player sprite up the screen)

Other Sprite Controls: Fill in the chart below to plan how the other sprites are going to move and how you are going
to use conditionals to control your sprites’ movement.
Sprites Movement Condition (example: x < Action (example: reset x to right side of screen)
0)

Obstacles

Target

Sprite Interactions: Fill in the chart below to plan how each of the sprites are going to interact with each other.
Sprite Interactions Result

Player

Obstacles

Target

Variables: Fill in the chart below with any variables you plan to use during the game.
Variable Label Description

Try

Once your teacher has approved your design, go to Code Studio to create your game.
2
Check your program to make sure it has everything it needs.

Reflect

Answer at least three of the reflection questions below:

1. Compare your program to the defined problem … Were you successful in solving all aspects of the problem?
How do you know?

2. Ask a classmate to try your program … Are there places where they struggle or show confusion?

3. Ask a classmate to read your code … Is your code and documentation clear and accurate?

4. Try to "break" your program … Did you find types of interaction or input that you could handle better?

5. Are there any changes or improvements you can make to this program or another like it in the future?

3
The Problem-Solving Process with Programming

Problem-Solving Process with Programming

The Problem Solving Process is useful when writing code for a challenging program. This process will help
you clarify and break down a problem into manageable steps so you can easily identify the code you need to
write for each step.

🔎 Define
● Read the instructions carefully to make sure you understand the
goals and intended outcomes of the program.
● If there is a sample program, run it to ensure you understand what it
does.
● If there is starter code, read it to understand what it does.
● Rephrase the problem in your own words.
● Identify any skills you are being asked to apply.
● Decide which aspect of the problem you want to complete first.

📝 Prepare
● Brainstorm as many ideas for the different ways you could program the problem to solve all of its parts.
● Write out in plain English or pseudocode your ideas for how to solve the problem so that the program
does what it is supposed to do.
● List what you already know how to do and what you don't yet.
● Describe your ideas to a classmate
● Review similar programs that you may have written in the past.
● Sketch out your idea on paper if needed

🖥 Try
● Pick one idea from the previous step and document why you chose that idea.
● Implement your chosen idea and write one small piece of code at a time.
● Test your program often.
● Use comments to document and keep track of what your code does.
● Go back to the previous step to look at your other ideas for solving the problem if you get stuck
● Apply appropriate debugging strategies

🤔 Reflect
1. Compare your program to the defined problem … Were you successful in solving all aspects of the
problem? How do you know?
2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
5. Are there any changes or improvements you can make to this program or another like it in the future?

1
Interactive Animations and Games ('23-'24)
The Game Design Process
Resources
 Interactive Animations and Games - Lesson 26
Name(s)_______________________________________________ Period ______ Date ___________________

Project Guide - Defender Game

Overview
Building a larger piece of software like a game can quickly get complex. Starting with a plan can help you stay
organized and identify issues ahead of time. A lot of the work you do here will make it much easier to keep track of
what you need to do once you begin writing your actual code.

Gameplay and Visuals

Start by thinking about what your game actually does. What does it look like? How do you actually play it? What will
make it fun, interesting, or relevant to the player?

Describe Your Game

In a couple of sentences describe the game you are going to build and how it will work.

You are an alien defending your cake from evil ladybugs. Ladybugs march across a bridge
towards your cake. You’ll need to push the ladybugs off the bridge into the water. Get points for
stopping ladybugs and lose points for letting ladybugs get through..
Draw Your Game
Draw a quick sketch of how your game will work. Who are the characters. What does the background look like? How

do things move? Label things to make them more clear.

Sprites and Variables
Using the description of your game above, figure out what information and characters you’ll need to keep track of
through your game. Fill in a description for each in the space below.

Sprites
In the table below list information about the different sprites in your game. Where are they located? How do they
move? How do they interact with other sprites?

Name (Label) and At Start of Game User and Sprite and Interactions
Appearance (Animation, position, (Does the user control this sprite? How does it move?
rotation, velocity, rotation Does it ever need to reset its position? Does it interact
speed) with other sprites? How?)

player - alien x: 300 Arrow keys move the sprite in 4 directions

y: 200 Displaces ladybugs
No rotation or velocity

cake - cake x: 350 Never moves

y: 200 When ladybugs touch you lose points
No rotation or velocity

enemy1 - x: 0 Moves across the screen left to right

ladybug y: random between Player sprite can displace the ladybugs
150 and 250 If they hit the water reset and give the player
velocityX: 2 (may need a point.
to make faster) If they hit the cake reset, remove 5 points

enemy2 - x: 0 Same as the other one

ladybug y: random between
150 and 250
velocityX: 2 (may need
to make faster)

2
Variables
Think about the information your game needs to keep track of. Is there a score? A number of lives? Describe each
variable in the space below.

Name (Label) What It Keeps Track Of How It Changes During the Game
(What’s the starting value, when will it change?)

score Player’s score Starts at 0. When ladybugs pushed in water

get 1 point. When ladybugs hit cake lose 5
points.

Functions
Your draw loop shouldn’t have a lot of complex code. Instead, break your program up into the major steps you’ll need
for your game to work. The different behaviors you described for your sprites and variables should help you decide
what these steps should be. Then describe what the code for that function should do.

Function Name What Happens In This Function

What behaviors that you outlined for your sprites does this function include? Can this
function be used at multiple places in your program?

gameBackground() Draws the background of the game

enemiesTouchCake() Resets enemies when they touch the cake. Decreases the player’s
score.

movePlayer() Moves the player with arrow keys and changes animations

displaceEnemies() Player pushes the ladybugs

enemiesTouchWater() If either ladybug touches the water they get reset and the player’s
score is increased

showScore() Shows the score on the screen

3
Interactive Animations and Games ('23-'24)
Using the Game Design Process
Resources
 Unit 3 Lesson 27

Name(s)_______________________________________________ Period ______ Date _________________

Project Guide - Planning Your Platform Game

Overview
Building a larger piece of software like a game can quickly get complex. Using the Problem Solving Process can help
you stay organized and identify issues ahead of time. A lot of the work you do here will make it much easier to keep
track of what you need to do once you begin writing your actual code.

Define
Start by thinking about what your game actually does. What does it look like? How do you actually play it? What will
make it fun, interesting, or relevant to the player?

Describe Your Game: In a couple of sentences describe the game you are going to build and how it will work.

______________________________________________________________________________________________

______________________________________________________________________________________________

______________________________________________________________________________________________

______________________________________________________________________________________________

________________________

Prepare
Draw a quick sketch of how your game will work. Who are the characters? What does the background look like? How
do things move? Label things to make them more clear.
Sprites and Variables: Using the description of your game above, figure out what information and characters you’ll
need to keep track of through your game. Fill in a description for each in the space below.

Sprites: In the table below list information about the different sprites in your game. Where are they located? How do
they move? How do they interact with other sprites?

Name (Label) and At Start of Game User and Sprite and Interactions
Appearance (Animation, position, (Does the user control this sprite? How does it move?
rotation, velocity, rotation Does it ever need to reset its position? Does it interact
speed) with other sprites? How?)

2
Variables: Think about the information your game needs to keep track of. Is there a score? A number of lives?
Describe each variable in the space below.

Name (Label) What It Keeps Track Of How It Changes During the Game
(What’s the starting value, when will it change?)

Functions: Your draw loop shouldn’t have a lot of complex code. Instead, break your program up into the major steps
you’ll need for your game to work. The different behaviors you described for your sprites and variables should help you
decide what these steps should be. Then describe what the code for that function should do.

Function Name What Happens In This Function

What behaviors that you outlined for your sprites does this function include? Can this
function be used at multiple places in your program?

Try
Once your teacher has approved your design, go to Code Studio to create your game.

3
Check your program to make sure it has everything it needs.

Reflect
Answer at least three of the reflection questions below:

1. Compare your program to the defined problem … Were you successful in solving all aspects of the problem? How
do you know?

2. Ask a classmate to try your program … Are there places where they struggle or show confusion?

3. Ask a classmate to read your code … Is your code and documentation clear and accurate?

4. Try to "break" your program … Did you find types of interaction or input that you could handle better?

5. Are there any changes or improvements you can make to this program or another like it in the future?

4
Interactive Animations and Games ('23-'24)
Project - Design a Game
Resources
 Computer Science Discoveries

Name(s)________________________________________ Period ______ Date ________________

Computer Science Practices Reflection

How I’ve grown Practice How I want to grow

Problem Solving

Persistence

Creativity

Collaboration

Communication

1
 Interactive Animations and Games - Lesson 28

Peer Review - Make Your Own Game

Pre-Review
Creator’s Name: __________________________________

One thing I want feedback on is…___________________________________________________________________

______________________________________________________________________________________________

Reviewer Section
Reviewer’s Name: _________________________________

Evidence I Found Types of Evidence Ideas for More

The program code uses

spacing, good naming
conventions, and comments
to make the code easily
readable.

At least three functions are

used to organize code into
logical pieces. At least one
of these functions is called
multiple times in the
program.

The game has at least three

backgrounds that are
displayed while the game is
running, and at least one
change is triggered
automatically through a
variable (e.g. score).

The game includes multiple

different interactions between
sprites, responds to multiple
types of user input (e.g.
different arrow keys).

Complex movement such as

acceleration, moving in a
curve, or jumping is included
in multiple places in the
program.

The game includes multiple

variables that are updated
during the game and affect
how the game is played.
Free Response Feedback

I like… _______________________________________________________________________________________

______________________________________________________________________________________________

I wish… ______________________________________________________________________________________

______________________________________________________________________________________________

What if… _____________________________________________________________________________________

______________________________________________________________________________________________

Creator’s Reflection

1. What piece of feedback was most helpful to you? Why?

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

2. What piece of feedback surprised you the most? Why?

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

3. Based on feedback, what changes will you make to your game proposal?

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

_____________________________________________________________________________________

2
Design a Game Project - Student Checklist
Key Concept Extensive Evidence

Program ❒ Your project guide is complete

Development
❒ Your project guide reflects the project as submitted.

Program ❒ Your program code effectively uses whitespace

Readability
❒ Your program code uses good naming conventions

❒ Your program uses indentation

❒ Your program uses comments to make the code easily readable.

Use of Functions ❒ Your code uses at least three functions to organize code into logical segments.

❒ At least one of your functions is called multiple times in the program

Backgrounds ❒ Your game has at least three backgrounds that are displayed during run time
and Variables
❒ Your game has at least one change that is triggered automatically through a variable (e.g.
score).

Interactions and ❒ Your game includes multiple different interactions between sprites
Controls
❒ Your game responds to multiple types of user input (e.g. different arrow keys).

Position and ❒ Your program includes complex movement such as acceleration, moving in a curve, or
Movement jumping in multiple places

Variables ❒ Your game includes multiple variables that are updated during the game and affect how
the game is played.
 Interactive Animations and Games - Lesson 28
Name(s)_______________________________________________ Period ______ Date ___________________

Project Guide - Planning Your Game

Overview
Building a larger piece of software like a game can quickly get complex. Using the Problem Solving Process can help
you stay organized and identify issues ahead of time. A lot of the work you do here will make it much easier to keep
track of what you need to do once you begin writing your actual code.

Define
Start by thinking about what your game actually does. What does it look like? How do you actually play it? What will
make it fun, interesting, or relevant to the player?

Describe Your Game: In a couple of sentences describe the game you are going to build and how it will work.

______________________________________________________________________________________________

______________________________________________________________________________________________

______________________________________________________________________________________________

______________________________________________________________________________________________

________________________

Prepare
Draw a quick sketch of how your game will work. Who are the characters? What does the background look like? How
do things move? Label things to make them more clear.
Sprites and Variables: Using the description of your game above, figure out what information and characters you’ll
need to keep track of through your game. Fill in a description for each in the space below.

Sprites: In the table below list information about the different sprites in your game. Where are they located? How do
they move? How do they interact with other sprites?

Name (Label) and At Start of Game User and Sprite and Interactions
Appearance (Animation, position, (Does the user control this sprite? How does it move?
rotation, velocity, rotation Does it ever need to reset its position? Does it interact
speed) with other sprites? How?)

2
Variables: Think about the information your game needs to keep track of. Is there a score? A number of lives?
Describe each variable in the space below.

Name (Label) What It Keeps Track Of How It Changes During the Game
(What’s the starting value, when will it change?)

Functions: Your draw loop shouldn’t have a lot of complex code. Instead, break your program up into the major steps
you’ll need for your game to work. The different behaviors you described for your sprites and variables should help you
decide what these steps should be. Then describe what the code for that function should do.

Function Name What Happens In This Function

What behaviors that you outlined for your sprites does this function include? Can this
function be used at multiple places in your program?

3
4
Try
Once your teacher has approved your design, go to Code Studio to create your game.

Check your program to make sure it has everything it needs.

Reflect
Answer at least three of the reflection questions below:

1. Compare your program to the defined problem … Were you successful in solving all aspects of the problem? How
do you know?

2. Ask a classmate to try your program … Are there places where they struggle or show confusion?

3. Ask a classmate to read your code … Is your code and documentation clear and accurate?

4. Try to "break" your program … Did you find types of interaction or input that you could handle better?

5. Are there any changes or improvements you can make to this program or another like it in the future?

5
Design a Game Project Rubric
Key Concept Extensive Evidence Convincing Evidence Limited Evidence No Evidence

Program Your project guide is complete Your project guide is Your project guide is Your project
Development and reflects the project as mostly complete and is filled out, but is not guide is
submitted. generally reflective of complete or does not incomplete or
the submitted project. reflect the submitted missing.
project.

Program Your program code effectively Your program code Your program code Your program
Readability uses whitespace, good naming makes use of has few comments code does not
conventions, indentation and whitespace, indentation, and does not contain
comments to make the code and comments. consistently use comments and
easily readable. formatting such as is difficult to
whitespace and read.
indentation.

Use of Functions At least three functions are At least two functions At least one function There are no
used to organize your code are used in your is used in your functions in your
into logical segments. At least program to organize program. program.
one of these functions is called your code into logical
multiple times in your program. segments.

Backgrounds Your game has at least three Your game has multiple Your game has Your game does
and Variables backgrounds that are backgrounds that are multiple backgrounds. not have
displayed during run time, and displayed during run multiple
at least one change is time (e.g. main backgrounds.
triggered automatically through background and “end
a variable (e.g. score). game” screen)

Interactions and Your game includes multiple Your game includes at Your game responds Your game
Controls different interactions between least one type of sprite to user input through a includes no
sprites, and it responds to interaction and it conditional. conditionals.
multiple types of user input responds to user input.
(e.g. different arrow keys).

Position and Complex movement such as Your program includes Your program includes There is no
Movement acceleration, moving in a some complex simple independent movement in
curve, or jumping is included in movement, such as movement, such as a your program,
multiple places in your jumping, acceleration, or straight line or other than direct
program. moving in a curve. rotation. user control.

Variables Your game includes multiple Your game includes at There is at least one There are no
variables that are updated least one variable that is variable used in your variables, or
during the game and affect updated during the program. they are not
how the game is played. game and affects the updated.
way the game is played
The Problem-Solving Process with Programming

Problem-Solving Process with Programming

The Problem Solving Process is useful when writing code for a challenging program. This process will help
you clarify and break down a problem into manageable steps so you can easily identify the code you need to
write for each step.

🔎 Define
● Read the instructions carefully to make sure you understand the
goals and intended outcomes of the program.
● If there is a sample program, run it to ensure you understand what it
does.
● If there is starter code, read it to understand what it does.
● Rephrase the problem in your own words.
● Identify any skills you are being asked to apply.
● Decide which aspect of the problem you want to complete first.

📝 Prepare
● Brainstorm as many ideas for the different ways you could program the problem to solve all of its parts.
● Write out in plain English or pseudocode your ideas for how to solve the problem so that the program
does what it is supposed to do.
● List what you already know how to do and what you don't yet.
● Describe your ideas to a classmate
● Review similar programs that you may have written in the past.
● Sketch out your idea on paper if needed

🖥 Try
● Pick one idea from the previous step and document why you chose that idea.
● Implement your chosen idea and write one small piece of code at a time.
● Test your program often.
● Use comments to document and keep track of what your code does.
● Go back to the previous step to look at your other ideas for solving the problem if you get stuck
● Apply appropriate debugging strategies

🤔 Reflect
1. Compare your program to the defined problem … Were you successful in solving all aspects of the
problem? How do you know?
2. Ask a classmate to try your program … Are there places where they struggle or show confusion?
3. Ask a classmate to read your code … Is your code and documentation clear and accurate?
4. Try to "break" your program … Did you find types of interaction or input that you could handle better?
5. Are there any changes or improvements you can make to this program or another like it in the future?