1 of 397

Interactive Animations and Games

Lesson 1: Programming for Entertainment

Lesson 2: Plotting Shapes

Lesson 3: Drawing in Game Lab

Lesson 4: Shapes and Parameters

Lesson 5: Variables

Lesson 6: Random Numbers

Lesson 7: Sprites

Lesson 8: Sprite Properties

Lesson 9: Text

Lesson 10: Mini-Project: Captioned Scenes

Lesson 11: The Draw Loop

Lesson 12: Sprite Movement

Lesson 13: Mini-Project: Animations

Lesson 14: Conditionals

Lesson 15: Keyboard Input

Lesson 16: Mouse Input

Lesson 17: Project: Interactive Card

Lesson 18: Velocity

Lesson 19: Collision Detection

Lesson 20: Mini-Project: Side Scroller

Lesson 21: Complex Sprite Movement

Lesson 22: Collisions

Lesson 23: Mini-Project: Flyer Game

Lesson 24: Functions

Lesson 25: The Game Design Process

Lesson 26: Using the Game Design Process

Lesson 27: Project: Design a Game

2 of 397

Interactive Animations and Games

Lesson 1

Programming for Entertainment

4 of 397

Journal Prompt:

What is your favorite form of entertainment, and what

problem does it solve for you?

Interactive Animations and Games Lesson 1 - Warm Up

5 of 397

Question of the Day

How is computer science used in entertainment?

Interactive Animations and Games Lesson 1 - Warm Up

7 of 397

Entertainment Exploration

Today, you’ll look into some of the ways people are developing software that entertains.

You will research how computer science plays a role in...

Movies and Television
Music
Games
Art
Another topic identified in the warm-up

Interactive Animations and Games Lesson 1 - Activity

8 of 397

Research your Topic

Go online to search for how computer science has impacted your field of entertainment.

Record notes about

interesting products you find
patterns that you’re seeing
problems in your topic that people are trying to address

Interactive Animations and Games Lesson 1 - Activity

9 of 397

Interesting Information

Based on the research your group did on the last page, select one of the uses of CS you found to focus on.

What problem does it solve?
How is it an Improvement?
What’s an interesting fact or use?
What is an open question in the field?

Interactive Animations and Games Lesson 1 - Activity

10 of 397

Share out

Share your findings with the rest of the class.

Listen to other groups’ findings. What is interesting about them? How are they the same as or different from yours?

Interactive Animations and Games Lesson 1 - Activity

11 of 397

Sample Programs

Explore these sample programs made in Game Lab, the tool you will be using to build animations and games this unit.

Interactive Animations and Games Lesson 1 - Activity

13 of 397

Interactive Animations and Games Lesson 1 - Wrap Up

Journal:

Based on what you saw today, both in your research and the example apps, what kinds of programs are you most interested in learning to create?

14 of 397

Interactive Animations and Games Lesson 1 - Wrap Up

Question of the Day

How is computer science used in entertainment?

15 of 397

Interactive Animations and Games

Lesson 2

Plotting Shapes

17 of 397

Drawing Challenge

Two volunteers sit at the front of the room and

DON’T look at the screen.

Everyone else looks at a picture and

explains how to draw it.

What makes this challenging?

Interactive Animations and Games Lesson 2 - Warm Up

18 of 397

Drawing Challenge

Interactive Animations and Games Lesson 2 - Warm Up

19 of 397

Journal Prompt:

What are the different "challenges" or problems we're going to need to solve in order to successfully communicate these kinds of drawings?

Interactive Animations and Games Lesson 2 - Warm Up

20 of 397

Question of the Day

How can we clearly communicate how to draw something on a screen?

Interactive Animations and Games Lesson 2 - Warm Up

22 of 397

Code Studio, Level 2

Do This

Press “Run” to start the program.
With your partner, explore the tool.

What are some tips for someone using this tool?

Interactive Animations and Games Lesson 2 - Activity

23 of 397

Plotting Shapes Activity

You each have two different sets of pictures to describe to your partner. Take turns describing the pictures for your partner to draw on the screen.

Describer: Describe the drawing in detail, but do not look at the computer screen!

Drawer: Listen carefully to the instructions, but do not look at the paper!

Interactive Animations and Games Lesson 2 - Activity

25 of 397

Interactive Animations and Games Lesson 2 - Wrap Up

Journal:

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

What's a way you have seen similar problems solved in the past?

26 of 397

Interactive Animations and Games Lesson 2 - Wrap Up

Question of the Day

How can we clearly communicate how to draw something on a screen?

27 of 397

Interactive Animations and Games

Lesson 3

Drawing in Game Lab

29 of 397

Journal Prompt:

Based on what you know about computers, what do you think will be different between telling a person about your image and telling a computer about your image?

Interactive Animations and Games Lesson 3 - Warm Up

30 of 397

Question of the Day

How can we communicate to a computer how to draw shapes on the screen?

Interactive Animations and Games Lesson 3 - Warm Up

32 of 397

Code Studio, Level 2

Do This

Look at the line of code in the workspace and discuss with your partner where you think the shape will be drawn on the grid.
Click to run the program and see what happens.
Change the numbers inside the block, then try running the program again.
Try to place the rectangle near the bottom right of the screen.

Interactive Animations and Games Lesson 3 - Activity

33 of 397

Interactive Animations and Games Lesson 3 - Activity

Where can you find more information about using the blocks?

What’s an advantage of using block mode?

34 of 397

Code Studio, Level 4

Do This

Place two rectangles exactly in the corners of the screen, just like the picture.

Interactive Animations and Games Lesson 3 - Activity

35 of 397

Interactive Animations and Games Lesson 3 - Activity

What’s the difference between stroke and fill?

36 of 397

Interactive Animations and Games Lesson 3 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

Code Studio, Levels 6-8

37 of 397

Code Studio, Level 9

Practice your new skills on these levels
Check with your teacher before moving on

Interactive Animations and Games Lesson 3 - Activity

38 of 397

Code Studio, Level 10

Assessment Level

Check out the "Key Concept" tab
This tab appears on assessment levels
Describes how to demonstrate your understanding

Interactive Animations and Games Lesson 3 - Activity

39 of 397

Code Studio, Level 11

Challenge yourself on these levels
Learn new blocks or use the same ones in new ways.

Interactive Animations and Games Lesson 3 - Activity

3 - Activity

40 of 397

Share your Creations

Choose an image you are particularly proud of.
Share your image with others and see what they have made, too!

Interactive Animations and Games Lesson 3 - Activity

3 - Activity

42 of 397

Interactive Animations and Games Lesson 3 - Wrap Up

Journal:

Today you learned how to draw in

Game Lab for the first time.

What type of advice would you share with a friend who was going to learn about drawing in Game Lab to make it easier for them?

43 of 397

Interactive Animations and Games Lesson 3 - Wrap Up

Question of the Day

How can we communicate to a computer how to draw shapes on the screen?

44 of 397

Interactive Animations and Games

Lesson 4

Shapes and Parameters

46 of 397

Journal Prompt:

The ‘rect()’ block has two inputs that control where it's drawn - the x and y position. If you wanted these commands to draw different sizes of rectangles, what additional inputs would you need to give the blocks?

Interactive Animations and Games Lesson 4 - Warm Up

47 of 397

Key Vocabulary

Parameter - An extra piece of information passed to a function to customize it for a specific need

Interactive Animations and Games Lesson 4 - Warm Up

48 of 397

Question of the Day

How can we use parameters to give the computer more specific instructions?

Interactive Animations and Games Lesson 4 - Warm Up

50 of 397

Code Studio, Level 2

Do This

Look at the line of code in the workspace and discuss with your partner how the Game Lab code made the different rectangles
Look at the code and try to figure out how the last two inputs in ‘rect’ work.
Change the numbers in the second ‘rect’ to make red rectangle longer than the blue one.

Interactive Animations and Games Lesson 4 - Activity

51 of 397

Interactive Animations and Games Lesson 4 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

Code Studio, Levels 3-6

52 of 397

Code Studio, Level 7

Practice your new skills on these levels
Check with your teacher before moving on

Interactive Animations and Games Lesson 4 - Activity

53 of 397

Code Studio, Level 8

Assessment Level

Check out the "Key Concept" tab
This tab appears on assessment levels
Describes how to demonstrate your understanding

Interactive Animations and Games Lesson 4 - Activity

54 of 397

Code Studio, Level 9

Challenge yourself on these levels
Learn new blocks or use the same ones in new ways.

Interactive Animations and Games Lesson 4 - Activity

3 - Activity

56 of 397

Interactive Animations and Games Lesson 4 - Wrap Up

Journal:

You use parameters to control your shape's location and size.

Can you think of any other situations in which parameters might be useful?

57 of 397

Interactive Animations and Games Lesson 4 - Wrap Up

Key Vocabulary

Parameter - An extra piece of information passed to a function to customize it for a specific need

58 of 397

Interactive Animations and Games Lesson 4 - Wrap Up

Question of the Day

How can we use parameters to give the computer more specific instructions?

59 of 397

Interactive Animations and Games

Lesson 5

Variables

61 of 397

Journal Prompt:

At the beginning of the course, we learned that input, output, storage, and processing were common to all computers.

Where do you see input, output, storage, and processing in Game Lab?

Interactive Animations and Games Lesson 5 - Warm Up

62 of 397

Key Vocabulary

Variable - a label for a piece of information used in a program

Interactive Animations and Games Lesson 5 - Warm Up

63 of 397

Question of the Day

How can we use variables to store information in our programs?

Interactive Animations and Games Lesson 5 - Warm Up

65 of 397

Code Studio, Level 2

Do This

Look at the two lines of code, and predict where the circle will be drawn
Predict what will happen if you change the number in line 1
Run the code to see what happens

Interactive Animations and Games Lesson 5 - Activity

66 of 397

What are variables used to do?

How do you create a variable and assign it a value?

What can go into a variable?

Interactive Animations and Games Lesson 5 - Activity

67 of 397

Code Studio, Level 4-6

Interactive Animations and Games Lesson 5 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

68 of 397

Code Studio, Level 7

Practice your new skills on these levels
Check with your teacher before moving on

Interactive Animations and Games Lesson 5 - Activity

69 of 397

Code Studio, Level 8

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 5 - Activity

70 of 397

Code Studio, Level 9

Challenge yourself on these levels
Learn new blocks or use the same ones in new ways.

Interactive Animations and Games Lesson 5 - Activity

72 of 397

Interactive Animations and Games Lesson 5 - Wrap Up

Journal:

What is your own definition of a variable?

Why are variables useful in programs?

73 of 397

Interactive Animations and Games Lesson 5 - Wrap Up

Question of the Day

How can we use variables to store information in our programs?

74 of 397

Interactive Animations and Games

Lesson 6

Random Numbers

76 of 397

Journal Prompt:

So far, our programs have done the same thing every time that we run them.

Are there any times that you'd want a program to do something differently each time it was run?

Interactive Animations and Games Lesson 6 - Warm Up

77 of 397

Question of the Day

How can we make our programs behave differently each time they are run?

Interactive Animations and Games Lesson 6 - Warm Up

79 of 397

Code Studio, Level 2

Do This

Look at the `randomNumber` block in line 4 of the program
Run the program several times to see what it does.
Change the numbers inside `randomNumber` and run the program a few more times.
Click on the block in the toolbox and choose "See examples" to read more about how it works.

Interactive Animations and Games Lesson 6 - Activity

80 of 397

Code Studio, Levels 3-5

Interactive Animations and Games Lesson 6 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

81 of 397

Code Studio, Level 6

Practice your new skills on these levels
Check with your teacher before moving on

Interactive Animations and Games Lesson 6 - Activity

82 of 397

Code Studio, Level 7

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 6 - Activity

83 of 397

Code Studio, Level 8

Challenge yourself on these levels.
Learn new blocks or use the same ones in new ways.

Interactive Animations and Games Lesson 6 - Activity

85 of 397

Interactive Animations and Games Lesson 6 - Wrap Up

Journal:

So far, we've only looked at random numbers. Are there any other things that you might like to be random in your program?

86 of 397

Interactive Animations and Games Lesson 6 - Wrap Up

Question of the Day

How can we make our programs behave differently each time they are run?

87 of 397

Interactive Animations and Games

Lesson 7

Sprites

89 of 397

Review:

So far we've written programs that put simple shapes on the screen.

List of all of the different pieces of information that you have used to control how these shapes are drawn.

Interactive Animations and Games Lesson 7 - Warm Up

90 of 397

Journal Prompt:

If you wanted to create programs with more detailed images, maybe even characters that you could interact with, what other pieces of information might you need in your code?

Interactive Animations and Games Lesson 7 - Warm Up

91 of 397

Question of the Day

How can we use sprites to help us keep track of lots of information in our programs?

Interactive Animations and Games Lesson 7 - Warm Up

93 of 397

Code Studio, Level 2

Code Exploration: Sprites

Run the code
Read the code and discuss how you think it works with your partner.
Change some lines and see what happens.
What do you think each line is doing?

Interactive Animations and Games Lesson 7 - Activity

94 of 397

What is a sprite?

What are properties?

What problem do sprites solve?

Interactive Animations and Games Lesson 7 - Activity

95 of 397

Key Vocabulary

Sprite - A character on the screen with properties that describe its location, movement, and look.
Property - A label for a characteristic of a sprite, such as its location and appearance.
Dot Notation - the way that sprites' properties are used in Game Lab, by connecting the sprite and property with a dot.

Interactive Animations and Games Lesson 7 - Activity

96 of 397

Code Studio, Level 4-6

Interactive Animations and Games Lesson 6 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

97 of 397

What are the steps to adding an image to a sprite?

What are the different ways to get an image?

Interactive Animations and Games Lesson 7 - Activity

98 of 397

Code Studio, Level 8

Debugging Images

Run the code to see what happens.
Fix the two problems in the code.

Interactive Animations and Games Lesson 6 - Activity

99 of 397

Code Studio, Level 9

Match Level

Do This

Match the code to the output

Interactive Animations and Games Lesson 7 - Activity

100 of 397

Code Studio, Level 10

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 7 - Activity

101 of 397

Code Studio, Level 11

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 7 - Activity

102 of 397

Code Studio, Level 12

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 7 - Activity

104 of 397

Interactive Animations and Games Lesson 7 - Wrap Up

Journal:

So far we've been able to change a sprite's location and image. What else might you want to change about your sprites?

105 of 397

Interactive Animations and Games Lesson 7 - Wrap Up

Key Vocabulary

Sprite - A character on the screen with properties that describe its location, movement, and look.
Property - A label for a characteristic of a sprite, such as its location and appearance.
Dot Notation - the way that sprites' properties are used in Game Lab, by connecting the sprite and property with a dot.

106 of 397

Interactive Animations and Games Lesson 7 - Wrap Up

Question of the Day

How can we use sprites to help us keep track of lots of information in our programs?

107 of 397

Interactive Animations and Games

Lesson 8

Sprite Properties

109 of 397

Journal Prompt:

What is your definition of a sprite?
What sprite properties do you know how to use?
What other sprite properties might be useful?

Interactive Animations and Games Lesson 8 - Warm Up

110 of 397

Question of the Day

How can we use sprite properties to change their appearance on the screen?

Interactive Animations and Games Lesson 8 - Warm Up

112 of 397

Code Studio, Level 2

Do This

Look at the code below and predict where the bee sprite will appear.

A. a bee sprite in the middle of the screen
B. a bee sprite in the bottom right corner
C. two bees, one in the middle and one in the bottom right corner
D. three bee sprites, all in different places
E. nothing, there will be an error

Interactive Animations and Games Lesson 8 - Activity

113 of 397

Code Studio, Level 3-4

Interactive Animations and Games Lesson 8 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

114 of 397

Code Studio, Level 5

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 8 - Activity

115 of 397

Code Studio, Level 6

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 8 - Activity

116 of 397

Code Studio, Level 7

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 8 - Activity

118 of 397

Interactive Animations and Games Lesson 8 - Wrap Up

Journal Prompt:

What is one way sprite properties are the same as variables?

What's one way that sprite properties are different from variables?

119 of 397

Interactive Animations and Games Lesson 8 - Wrap Up

Question of the Day

How can we use sprite properties to change their appearance on the screen?

120 of 397

Interactive Animations and Games

Lesson 9

Text

122 of 397

Journal Prompt:

Interactive Animations and Games Lesson 9 - Warm Up

Look at this cartoon that was made in Game Lab.

What do you think the alien should be saying?

123 of 397

Question of the Day

How can we use text to improve our scenes and animations?

Interactive Animations and Games Lesson 9 - Warm Up

125 of 397

Code Studio, Level 2

Interactive Animations and Games Lesson 9 - Activity

Code Prediction

Read the code and discuss with your partner what you think it will do.

What will it show on the screen?
Where will it be displayed?

Run the code and test your prediction.

126 of 397

Code Studio, Levels 3-4

Interactive Animations and Games Lesson 9 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

127 of 397

Code Studio, Level 5

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 9 - Activity

128 of 397

Code Studio, Level 6

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 9 - Activity

129 of 397

Code Studio, Level 7

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 9 - Activity

131 of 397

Interactive Animations and Games Lesson 9 - Wrap Up

Journal Prompt:

You've drawn with both text and shapes to the screen.

What are two ways drawing with text is similar to drawing shapes?
What is one way that drawing with text is different from drawing with shapes?

132 of 397

Interactive Animations and Games Lesson 9 - Wrap Up

Question of the Day

How can we use text to improve our scenes and animations?

133 of 397

Interactive Animations and Games

Lesson 10

Mini-Project: Captioned Scenes

135 of 397

Journal Prompt:

Write down as many blocks as you can remember from Game Lab.

Make sure you know what each one does, especially the inputs, or parameters, for each of the blocks.

Interactive Animations and Games Lesson 10 - Warm Up

136 of 397

Question of the Day

How can we use Game Lab to express our creativity?

Interactive Animations and Games Lesson 10 - Warm Up

138 of 397

Sprite Scenes

Interactive Animations and Games Lesson 10 - Activity

Sketch out your idea

Sketch out a scene that you'd like to make at the end of this lesson.

Is there anything else that you still need to learn how to do?
Are there any skills that you'd like to review?

139 of 397

Sprite Scenes

Interactive Animations and Games Lesson 10 - Activity

Code Your Scene

Use your plan to code your scene, following the steps in Code Studio

Create the background
Add sprites
Add text

140 of 397

Sprite Scenes

Interactive Animations and Games Lesson 10 - Activity

Review Your Scene

Check over your scene one last time to make sure you have included everything that you want.

Did you follow your plan?
Are there any last changes you want to make?
What are you most proud of?

141 of 397

Sprite Scenes

Interactive Animations and Games Lesson 10 - Activity

Gallery Walk

Look at the scenes your classmates have created.

What is interesting about each scene?
How did they use their coding skills creatively?
Is there anything you see that you’d like to try?

143 of 397

Interactive Animations and Games Lesson 10 - Wrap Up

Journal Prompt:

What was one especially creative way you saw someone else use the blocks today?

144 of 397

Interactive Animations and Games Lesson 10 - Wrap Up

Question of the Day

How can we use Game Lab to express our creativity?

145 of 397

Interactive Animations and Games

Lesson 11

The Draw Loop

147 of 397

How does the flip book work?

How does it "trick our eyes" into thinking something is moving?

Interactive Animations and Games Lesson 11 - Warm Up

This YouTube video from Marnic Bos shows animation using a flip book.

148 of 397

Question of the Day

How can we animate our images in Game Lab?

Interactive Animations and Games Lesson 11 - Warm Up

150 of 397

What does the draw function do?

Interactive Animations and Games Lesson 11 - Activity

151 of 397

Code Studio, Level 3

Interactive Animations and Games Lesson 11 - Activity

Code Exploration: Draw Loop

Here's an example of the draw loop at work.

Run the code and see how it works.
Discuss with your partner whether this looks like the flip book you saw in the video. Why or why not?

152 of 397

Code Studio, Level 4

Interactive Animations and Games Lesson 11 - Activity

Try it out: Draw Loop

This code draws green circles.

Add code to this program so that your drawing has orange circles being drawn, too.
Move on when your program looks like the picture to the right.

153 of 397

Code Studio, Level 5

Prediction: Draw Loop

This program has one small difference that will make it run a little differently. What will this program do?

Remember:

All your code outside the draw loop is run first, one time
All your code inside the draw loop is run over and over forever

Interactive Animations and Games Lesson 11 - Activity

154 of 397

Code Studio, Level 6

Interactive Animations and Games Lesson 11 - Activity

Sprites in the Draw Loop

By changing sprite properties in the draw loop, you can animate your characters.

Run the code to see how it works.
Discuss with your partner why some code is inside the draw loop and some code is outside.
Try changing the numbers in the random number block and running the program again.

155 of 397

Code Studio, Level 7

Interactive Animations and Games Lesson 11 - Activity

Updating Properties

This animation already is updating one sprite's x property to make it look like it's shaking.

Run the program to see how it works.
Edit the code in this program to make the second sprite shake like the first one.
Move on when your program looks like the picture to the right.

156 of 397

Code Studio, Level 8

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 11 - Activity

157 of 397

Code Studio, Level 9

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 11 - Activity

158 of 397

Code Studio, Level 10

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 11 - Activity

160 of 397

Interactive Animations and Games Lesson 11 - Wrap Up

Journal Prompt:

How does the draw loop help us make animations?

161 of 397

Interactive Animations and Games Lesson 11 - Wrap Up

Question of the Day

How can we animate our images in Game Lab?

162 of 397

Interactive Animations and Games

Lesson 12

Sprite Movement

164 of 397

Review:

List out all of the sprite properties you can think of and what aspect of a sprite they affect.

Interactive Animations and Games Lesson 12 - Warm Up

165 of 397

Journal Prompt:

What kinds of animations could you make if you could control these properties?

Think about adding and subtracting from properties, or even updating multiple properties at the same time.

Interactive Animations and Games Lesson 12 - Warm Up

166 of 397

Question of the Day

How can we control sprite movement in Game Lab?

Interactive Animations and Games Lesson 12 - Warm Up

168 of 397

Code Studio, Level 2

Code Prediction

This program creates a variable counter and then uses the counter pattern to make it count up. When you run the program what do you think you'll see on the screen?

Read the program and predict what the output will be.
Run the program to check your prediction.
Discuss with a neighbor. Can you explain what you observed?

Interactive Animations and Games Lesson 12 - Activity

169 of 397

The Draw Loop

What is the counter pattern?

How does the counter pattern move sprites across the screen?

Interactive Animations and Games Lesson 12 - Activity

170 of 397

Code Studio, Level 4-6

Interactive Animations and Games Lesson 12 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

171 of 397

Code Studio, Level 8

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 12 - Activity

172 of 397

Code Studio, Level 9

Assessment Level

Do This

Follow the instructions in Code Studio.
The "Key Concept" tab describes how to demonstrate your understanding.
Check out the Help & Tips tab if you need help.

Interactive Animations and Games Lesson 12 - Activity

173 of 397

Code Studio, Level 9

Challenge Levels

Do This

Do any or all of the challenge levels.
Follow the instructions in Code Studio.
Check out the Help & Tips tab if you need help.

Interactive Animations and Games Lesson 12 - Activity

175 of 397

Interactive Animations and Games Lesson 12 - Wrap Up

Journal Prompt:

You've seen two ways to create animations with the draw loop: random numbers and the counter pattern

What is one type of movement that you'd want to use random numbers for?
What is one type of movement that you would want to use the counter pattern for?
Are there any movements that might combine the counter pattern and random numbers?

176 of 397

Interactive Animations and Games Lesson 12 - Wrap Up

Question of the Day

How can we control sprite movement in Game Lab?

177 of 397

Interactive Animations and Games

Lesson 13

Mini Project: Animation

179 of 397

Journal Prompt:

Write down as many types of movement and animations as you can remember from the previous lesson.

Make sure you know what blocks and patterns you need to make those movements, and when those movements would be useful.

Interactive Animations and Games Lesson 13 - Warm Up

180 of 397

Question of the Day

How can we combine different programming patterns to make a complete animation?

Interactive Animations and Games Lesson 13 - Warm Up

182 of 397

Animated Scenes

Interactive Animations and Games Lesson 13 - Activity

Sample Scene

Take a look at the example in Code Studio and think about what you'd like to make.

What movements do you see in this scene?
Which movements use random numbers?
Which movements use the counter pattern?

183 of 397

Animated Scenes

Interactive Animations and Games Lesson 13 - Activity

Define - Describe your idea

Write out a short description of your scene, including what sorts of animations it will include.

What will the scene look like?
How will it change/animate over time?
Are the animations random or planned movement?

184 of 397

Animated Scenes

Interactive Animations and Games Lesson 13 - Activity

Prepare - Plan Your Animation

Draw a detailed sketch of your animation.

Are they shapes or sprites?

Describe the sprites you will need.
Describe your animations and how you will code them.

Will you use random numbers or the counter pattern?

185 of 397

Animated Scenes

Interactive Animations and Games Lesson 13 - Activity

Try - Code Your Scene

Use your plan to code your scene, following the steps in Code Studio

Create the background
Add sprites
Add text
Add movement

186 of 397

Animated Scenes

Interactive Animations and Games Lesson 13 - Activity

Review Your Scene

Check over your scene one last time to make sure you have included everything you want.

Did you follow your plan?
Are there any last changes you want to make?
What are you most proud of?

187 of 397

Animated Scenes

Interactive Animations and Games Lesson 13 - Activity

Gallery Walk

Look at the animations your classmates have created.

What is interesting about each animation?
How did they use their coding skills creatively?
Is there anything you see that you’d like to try?

189 of 397

Interactive Animations and Games Lesson 13 - Wrap Up

Journal Prompt:

What was one interesting way that you saw sprite movement used today?

190 of 397

Interactive Animations and Games Lesson 13 - Wrap Up

Question of the Day

How can we combine different programming patterns to make a complete animation?

191 of 397

Interactive Animations and Games

Lesson 14

Conditionals

193 of 397

If your last name has more than five letters, draw a square on your paper.
If your last name less than seven letters, draw a circle.
If you are wearing anything green, add 3 + 2.
If the teacher is tapping their pencil, draw an 'X'.
If the teacher is in the front of the room, fold your paper in half.

Interactive Animations and Games Lesson 14 - Warm Up

194 of 397

Journal Prompt:

When we program, we give the computer instructions of what to do.

How are these instructions different from the instructions that we have been giving in Game Lab?

Interactive Animations and Games Lesson 14 - Warm Up

195 of 397

Key Vocabulary

Condition - Something a program checks to see whether it is true before deciding to take an action.

Conditionals - Statements that only run under certain conditions.

Interactive Animations and Games Lesson 14 - Warm Up

196 of 397

Question of the Day

How can programs react to changes as they are running?

Interactive Animations and Games Lesson 14 - Warm Up

198 of 397

Code Studio, Level 2

Code Prediction

Read the code and discuss with your partner what you think will be printed by the program.
Run the code to test your prediction.
Discuss how the code works with your partner.

Interactive Animations and Games Lesson 14 - Activity

199 of 397

What is a Boolean expression?

What’s an expression that would evaluate to true?

What’s an expression that would evaluate to false?

Interactive Animations and Games Lesson 14 - Activity

200 of 397

Interactive Animations and Games Lesson 14 - Activity

Key Vocabulary

Boolean Expression - in programming, an expression that evaluates to True or False.

201 of 397

Code Studio, Level 4

Matching

Match the boolean expression to the English description.

Interactive Animations and Games Lesson 14 - Activity

202 of 397

Code Studio, Level 4

Try it Out

Use booleans to figure out when the race car crosses the finish line.
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

Interactive Animations and Games Lesson 14 - Activity

203 of 397

Code Studio, Level 6

Code Prediction

Read the code for this race car program.
What will the program do when the car reaches the finish line?
Why is the if block inside the draw loop?

Interactive Animations and Games Lesson 14 - Activity

204 of 397

When would you want to use an if statement?

Interactive Animations and Games Lesson 14 - Activity

205 of 397

Code Studio, Level 8

Try it Out

Use a conditional in the draw loop to check whether fruit.scale is greater than 2. If it is, change the fruit's animation to "pear".

Interactive Animations and Games Lesson 14 - Activity

206 of 397

Code Studio, Level 9

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 14 - Activity

207 of 397

Code Studio, Level 10

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 14 - Activity

208 of 397

Code Studio, Level 11

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 14 - Activity

210 of 397

Interactive Animations and Games Lesson 14 - Wrap Up

Journal Prompt:

Now that you know how conditionals work, where you do think that they are used in games or other programs and apps that you already use?

211 of 397

Interactive Animations and Games Lesson 14 - Wrap Up

Key Vocabulary

Condition - Something a program checks to see whether it is true before deciding to take an action.

Conditionals - Statements that only run under certain conditions.

Boolean Expression - in programming, an expression that evaluates to True or False.

212 of 397

Interactive Animations and Games Lesson 14 - Wrap Up

Question of the Day

How can programs react to changes as they are running?

213 of 397

Interactive Animations and Games

Lesson 15

Keyboard Input

215 of 397

Journal Prompt:

So far all of the programs you've written run without any input from the user.

How might adding user interaction make your programs more useful, effective, or entertaining?
How might a user provide input into your program?

Interactive Animations and Games Lesson 15 - Warm Up

216 of 397

Question of the Day

How can our programs react to user input?

Interactive Animations and Games Lesson 15 - Warm Up

218 of 397

Code Studio, Level 2

Code Prediction

Read the program carefully.
Make a prediction about what will happen when you press the space bar and write it in the box below. Be specific!
Run the program.
While the program is running, press the space bar on your keyboard.
Were you correct? Were you surprised? Discuss with a classmate.

Interactive Animations and Games Lesson 15 - Activity

219 of 397

Code Studio, Level 3-5

Interactive Animations and Games Lesson 15 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

220 of 397

Code Studio, Level 6

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 15 - Activity

221 of 397

Code Studio, Level 7

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 15 - Activity

222 of 397

Code Studio, Level 8

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 15 - Activity

224 of 397

Interactive Animations and Games Lesson 15 - Wrap Up

Journal Prompt:

Think back to all of the programs you've written so far.

How might you use user interaction to improve one of your programs from past lessons?
What condition would you check, and how would you respond to it?

225 of 397

Interactive Animations and Games Lesson 15 - Wrap Up

Question of the Day

How can our programs react to user input?

226 of 397

Interactive Animations and Games

Lesson 16

Mouse Input

228 of 397

3-2-1 Review:

What are three different things that you've been able to do with conditionals?
What are two big things that everyone should remember when using conditionals?
What's one thing you still want to learn how to program?

Interactive Animations and Games Lesson 16 - Warm Up

229 of 397

Question of the Day

What are more ways that the computer can react to user input?

Interactive Animations and Games Lesson 16 - Warm Up

231 of 397

Code Studio, Level 2

Code Prediction

Read through the following program, paying special attention to the `ifelse` block on Line 10. After discussing the following questions with your partner, write down your predictions and run the code to see what the program does.

What happens when you press the space bar?
What happens when you don't press the space bar?

Interactive Animations and Games Lesson 16 - Activity

232 of 397

What’s an example of when you would need an “if/else” statement?

Interactive Animations and Games Lesson 16 - Activity

233 of 397

Code Studio, Level 4

Try it Out

These gears already spin one direction when you press the space bar, now you'll want them to spin the other direction when the space bar isn't pressed.

Make the gears spin the opposite way when the space bar is not being pressed.

Interactive Animations and Games Lesson 16 - Activity

234 of 397

Code Studio, Level 5

Try it Out

Here is the same program, but with one small difference.

Read the program carefully, especially Line 13, to figure out how to control the gears.
Run the program and test whether you were correct.
Make the gears spin the opposite way when there is no user input.

Interactive Animations and Games Lesson 16 - Activity

235 of 397

Code Studio, Level 6-7

Interactive Animations and Games Lesson 16 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

236 of 397

Code Studio, Level 8

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 16 - Activity

237 of 397

Code Studio, Level 9

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 16 - Activity

238 of 397

Code Studio, Level 10

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 16 - Activity

240 of 397

Interactive Animations and Games Lesson 16 - Wrap Up

Journal Prompt:

You now have many different ways to detect user input.

With a partner, choose three different user input commands and think of an example of when you might use them.

Be ready to share with the class!

241 of 397

Interactive Animations and Games Lesson 16 - Wrap Up

Question of the Day

What are more ways that the computer can react to user input?

242 of 397

Interactive Animations and Games

Lesson 17

Project: Interactive Card

244 of 397

Journal Prompt:

Think of one time you gave or received a card from someone.

Who was that person?
What was the purpose of the card?
What about the card made it specific to that purpose?

Interactive Animations and Games Lesson 17 - Warm Up

245 of 397

Question of the Day

What skills and practices are important when creating an interactive program?

Interactive Animations and Games Lesson 17 - Warm Up

247 of 397

Example Project

Interactive Animations and Games Lesson 16 - Activity

1) Which elements appear to use drawing commands?

2) Which elements appear to be sprites?

3) For each sprite, which properties are being updated?

4) Where do you see conditionals being used?

5) Are there elements that you don’t understand?

248 of 397

Interactive Card Project

You’re going to be developing an interactive digital card to share with someone you care about.

You will show that you can…

Use sprites and sprite properties
Respond to user input and use random numbers
Use the draw loop and sequence code correctly
Use the coordinate system to draw things onto the screen
Use variables and the counter pattern

Interactive Animations and Games Lesson 16 - Activity

249 of 397

Project Guide

Do This

Brainstorm what kind of card to make and who the recipient will be
Fill out the project guide

Draw a background
Sprites you will need
Conditionals you will use to make it interactive

Interactive Animations and Games Lesson 16 - Activity

250 of 397

Code Studio, Level 4-8

Interactive Animations and Games Lesson 16 - Activity

Do This

Follow the instructions on each level
Use your project guide to help you
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

251 of 397

Peer Review

Do This

Decide what you would like feedback on.
Trade places with another students and fill out their review sheet with your thoughts on their project.

Pay special attention to the parts they wanted feedback on.

Trade back and read the feedback they left for your project.

How can you use this feedback to make your project better?

Interactive Animations and Games Lesson 16 - Activity

252 of 397

Final Changes and Rubric

Based on the feedback, make the final changes to your card.

Check the rubric to make sure that you have demonstrated what you have learned in this chapter.

Interactive Animations and Games Lesson 16 - Activity

254 of 397

Interactive Animations and Games Lesson 17 - Wrap Up

Journal Prompt:

Choose one of the five practices in which you believe you demonstrated growth in this lesson.

problem solving, persistence, creativity, collaboration, communication

What is something you did that exemplified this practice?
Choose one practice you think you can continue to grow in. What’s one thing you’d like to do better?
Choose one practice you thought was especially important for this project. What made it so important?

255 of 397

Interactive Animations and Games Lesson 17 - Wrap Up

Question of the Day

What skills and practices are important when creating an interactive program?

256 of 397

Interactive Animations and Games

Lesson 18

Velocity

258 of 397

Volunteers?

I will need a couple of volunteers to act as my “sprites” at the beginning of this lesson.

Interactive Animations and Games Lesson 18 - Warm Up

259 of 397

Journal Prompt:

I was just giving instructions to my "sprite", but they seemed to get pretty repetitive.

How could I have simplified my instructions?

Interactive Animations and Games Lesson 18 - Warm Up

260 of 397

Question of the Day

How can programming languages hide complicated patterns so that it is easier to program?

Interactive Animations and Games Lesson 18 - Warm Up

262 of 397

Code Studio, Level 2

Code Exploration

Try out the velocityX block with your partner.
Don’t forgot to use the block outside the draw loop, right after you create your sprite.
Check out the "Help & Tips" section if you get stuck

Interactive Animations and Games Lesson 18 - Activity

263 of 397

Why might you want to use a velocity block instead of the counter pattern?

Give an example of a counter pattern and how you could use a velocity block instead.

Interactive Animations and Games Lesson 18 - Activity

264 of 397

Code Studio, Level 4-8

Interactive Animations and Games Lesson 18 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

265 of 397

Code Studio, Level 9

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 18 - Activity

266 of 397

Code Studio, Level 10

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 18 - Activity

267 of 397

Code Studio, Level 11

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 18 - Activity

269 of 397

Interactive Animations and Games Lesson 18 - Wrap Up

Journal Prompt:

As you went through the puzzles, though, you started doing some interesting movements that we hadn't been able to do before.

Describe one of those movements, and how you made it.
Describe another block that you'd like to have.

What would you name it?
What would it do?
What code would it hide inside?
How would it help you?

270 of 397

Interactive Animations and Games Lesson 18 - Wrap Up

Question of the Day

What are more ways that the computer can react to user input?

271 of 397

Interactive Animations and Games

Lesson 19

Collision Detection

273 of 397

Example Animation

Interactive Animations and Games Lesson 19 - Warm Up

274 of 397

Journal Prompt:

An interesting aspect of this animation is that the sprites change when they touch each other.

Can you think of any way that the computer could use the sprites’ properties to figure out whether they are touching each other?

Interactive Animations and Games Lesson 19 - Warm Up

275 of 397

Question of the Day

How can programming help make complicated problems more simple?

Interactive Animations and Games Lesson 19 - Warm Up

277 of 397

Interactive Animations and Games Lesson 19 - Activity

Collision Detection

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

Using the grid, find the position of the sprite (right in the middle of the square) and the sprite’s size.

Copy the information about the sprite’s position and size onto the back of your worksheet. This is the only information you should tell your partner about the sprites.

278 of 397

Interactive Animations and Games Lesson 19 - Activity

Collision Detection

Trade worksheets with your partner only looking at the back.

Can you use the numbers to decide whether the sprites are touching? Brainstorm some ideas to figure it out.

Try out your ideas, then check the drawing to see whether you were correct. Do you think your strategy was effective?

279 of 397

Interactive Animations and Games Lesson 19 - Activity

Collision Detection

What strategies did you and your partner use?

What can you discover from other people’s strategies?

280 of 397

Code Studio, Level 3

Interactive Animations and Games Lesson 19 - Activity

Look at how the computer uses math to figure out whether the sprites are touching each other.

Read the if statements inside the draw loop and find the different sprite properties and how they are compared.
Discuss the code with your partner.
Why does the code only use the width and x properties, and not the height and y properties?
Would you want to write this code every time you checked whether something was touching?

281 of 397

Code Studio, Level 4-6

Interactive Animations and Games Lesson 19 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

282 of 397

Code Studio, Level 7

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 19 - Activity

283 of 397

Code Studio, Level 8

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 19 - Activity

284 of 397

Code Studio, Level 9

Challenge Level

Do This

Do any or all of the challenge levels.
Follow the instructions in Code Studio.
Check out the Help & Tips tab if you need help.

Interactive Animations and Games Lesson 19 - Activity

286 of 397

Interactive Animations and Games Lesson 19 - Wrap Up

Journal Prompt:

At the beginning of the lesson, you saw that it's possible to do everything that the isTouching block does without using the block at all.

What makes this block useful?

287 of 397

Interactive Animations and Games Lesson 19 - Wrap Up

Key Vocabulary

Abstraction- a simplified representation of something more complex.

288 of 397

Interactive Animations and Games Lesson 19 - Wrap Up

Question of the Day

How can programming help make complicated problems more simple?

289 of 397

Interactive Animations and Games

Lesson 20

Mini-Project: Side Scroller

291 of 397

Review:

Think of all of the things that you have learned how to do in this unit so far.

Be ready to share with the class!

Interactive Animations and Games Lesson 20 - Warm Up

292 of 397

Question of the Day

How can the new types of sprite movement and collision detection be used to create a game?

Interactive Animations and Games Lesson 20 - Warm Up

294 of 397

Side Scroller - Define

Interactive Animations and Games Lesson 20 - Activity

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.

Play the sample game a few times.

What do you want to keep the same?
What do you want to change?
What parts of programming this game are you not sure how to do yet?

295 of 397

Side Scroller - Prepare

Interactive Animations and Games Lesson 20 - Activity

What do you want to use for your sprites?

Where will you find the images?

What do you want the background to look like?

Describe the shapes you will use to make it.

Are there any other things you would like to change about the way the sprites move or interact with each other?

296 of 397

Side Scroller - Try

Interactive Animations and Games Lesson 20 - Activity

Go to Code Studio and start coding your game.

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

297 of 397

Side Scroller - Reflect

Interactive Animations and Games Lesson 20 - Activity

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

Play your game a few times to check for bugs.
Look over your project guide to make sure you have not missed anything.
Make any last changes.

What part of your program are you most proud of? Why?
If you had more time, what improvement would you make to your game?

299 of 397

Interactive Animations and Games Lesson 20 - Wrap Up

Journal Prompt:

What was one challenge in making this game?

What is your advice for someone else who has the same challenge?

300 of 397

Interactive Animations and Games Lesson 20 - Wrap Up

Question of the Day

How can the new types of sprite movement and collision detection be used to create a game?

301 of 397

Interactive Animations and Games

Lesson 21

Complex Sprite Movement

303 of 397

Journal Prompt:

What is the difference between these two kinds of jumping?

How would you create the second kind of jumping?

Interactive Animations and Games Lesson 21 - Warm Up

304 of 397

Question of the Day

How can previous blocks be combined in new patterns to make interesting movements?

Interactive Animations and Games Lesson 21 - Warm Up

306 of 397

Code Studio, Level 2

Code Prediction

Using the counter pattern with a sprite's x and y property makes a sprite move smoothly across the screen. In this program the counter pattern is being used with the sprite.velocityX property instead.

What do you think will happen when the code is run? Why?
Discuss with your partner, then run the code to check your prediction.

Interactive Animations and Games Lesson 21 - Activity

307 of 397

Code Studio, Level 3-5

Interactive Animations and Games Lesson 21 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

308 of 397

Code Studio, Level 6

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 21 - Activity

309 of 397

Code Studio, Level 7

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 21 - Activity

310 of 397

Code Studio, Level 8

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 21 - Activity

312 of 397

Interactive Animations and Games Lesson 21 - Wrap Up

Journal Prompt:

Make a list of new things you can program to do after today's lesson.

Then, write down a list of all the new blocks you learned today.

313 of 397

Interactive Animations and Games Lesson 21 - Wrap Up

Review:

Today we built lots of new sprite movements like gravity and jumping, but none of this required us to learn new blocks.

How were you able to do new things without learning any new blocks?

314 of 397

Interactive Animations and Games Lesson 21 - Wrap Up

Question of the Day

How can the new types of sprite movement and collision detection be used to create a game?

315 of 397

Interactive Animations and Games

Lesson 22

Collisions

317 of 397

Journal Prompt:

Using the blocks we already know how to use, how could we create the sprite interaction we can see in this program?

Here are some blocks to consider:

sprite.isTouching()
sprite.velocityX
sprite.velocityY
sprite.x
sprite.y

Interactive Animations and Games Lesson 22 - Warm Up

318 of 397

Interactive Animations and Games Lesson 22 - Warm Up

Vocabulary Review

Abstraction- a simplified representation of something more complex.

319 of 397

Question of the Day

How can programmers build on abstractions to create further abstractions?

Interactive Animations and Games Lesson 22 - Warm Up

321 of 397

Code Studio, Level 3

Try it out!

Use your plan to make the giraffe push the monkey off the screen.

Interactive Animations and Games Lesson 22 - Activity

322 of 397

Code Studio, Level 4

Try it out!

Now make the elephant push the hippo off the screen.

Interactive Animations and Games Lesson 22 - Activity

323 of 397

Code Studio, Level 5-6

Interactive Animations and Games Lesson 22 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

324 of 397

Code Studio, Level 7

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 22 - Activity

325 of 397

Code Studio, Level 8

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 22 - Activity

326 of 397

Code Studio, Level 9

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 22 - Activity

328 of 397

Interactive Animations and Games Lesson 22 - Wrap Up

Journal Prompt:

How did having the "isTouching" block and the "velocityX" block make it easier to solve the problem of one sprite pushing another?

329 of 397

Interactive Animations and Games Lesson 22 - Wrap Up

Vocabulary Review

Abstraction- a simplified representation of something more complex.

330 of 397

Interactive Animations and Games Lesson 22 - Wrap Up

Question of the Day

How can programmers build on abstractions to create further abstractions?

331 of 397

Interactive Animations and Games

Lesson 23

Mini-Project: Flyer Game

333 of 397

Review:

Think of all of the things that you have learned how to do in this unit so far.

Be ready to share with the class!

Interactive Animations and Games Lesson 23 - Warm Up

334 of 397

Question of the Day

How can the new types of collisions and modeling movement be used to create a game?

Interactive Animations and Games Lesson 23 - Warm Up

336 of 397

Flyer - Define

Interactive Animations and Games Lesson 20 - Activity

In this project, you’ll use what you have learned to make a flyer, a type of game that has the player character fly around the screen.

Play the sample game a few times.

What do you want to keep the same?
What do you want to change?
What parts of programming this game are you not sure how to do yet?

337 of 397

Flyer - Prepare

Interactive Animations and Games Lesson 20 - Activity

What do you want to use for your sprites?

Where will you find the images?

What do you want the background to look like?

Describe the shapes you will use to make it.

Are there any other things you would like to change about the way the sprites move or interact with each other?

338 of 397

Flyer - Try

Interactive Animations and Games Lesson 20 - Activity

Go to Code Studio and start coding your game.

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

339 of 397

Flyer - Reflect

Interactive Animations and Games Lesson 20 - Activity

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

Play your game a few times to check for bugs.
Look over your project guide to make sure you have not missed anything.
Make any last changes.

What part of your program are you most proud of? Why?
If you had more time, what improvement would you make to your game?

341 of 397

Interactive Animations and Games Lesson 23 - Wrap Up

Journal 3-2-1:

Take some time to play each others' games if you haven't already!

What are three things you saw in someone else's game that you really liked?
What are two improvements you'd make to your game if you had more time?
What's one piece of advice you'd give to someone making this type of game?

342 of 397

Interactive Animations and Games Lesson 23 - Wrap Up

Question of the Day

How can the new types of collisions and modeling movement be used to create a game?

343 of 397

Interactive Animations and Games

Lesson 24

Functions

345 of 397

Journal Prompt:

What's one block you'd like to have in Game Lab?
What would it do?
What code would it use to work?

Interactive Animations and Games Lesson 24 - Warm Up

346 of 397

Question of the Day

How can programmers use functions to create their own abstractions?

Interactive Animations and Games Lesson 24 - Warm Up

348 of 397

Think of a time when a function might have helped you write a program.

What code would go in the definition of the function?
When would you call the function?
What would you name it?

Interactive Animations and Games Lesson 24 - Activity

349 of 397

Key Vocabulary

Function - a named bit of programming instructions

Interactive Animations and Games Lesson 24 - Activity

350 of 397

Code Studio, Level 3-5

Interactive Animations and Games Lesson 24 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

351 of 397

Code Studio, Level 6

Practice Level

Do This

Do any or all of the practice levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 24 - Activity

352 of 397

Code Studio, Level 7

Assessment Level

What are three ways that functions can be useful when you are writing programs?

Hint: Go back to the practice levels for review if you are not sure.

Interactive Animations and Games Lesson 24 - Activity

353 of 397

Code Studio, Level 8-9

Interactive Animations and Games Lesson 24 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

354 of 397

Code Studio, Level 10

Assessment Level

Do This

Follow the instructions in Code Studio
The "Key Concept" tab describes how to demonstrate your understanding
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 24 - Activity

355 of 397

Code Studio, Level 11

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 24 - Activity

357 of 397

Interactive Animations and Games Lesson 24 - Wrap Up

Journal Prompt:

Why would we say that functions allow us to "create our own blocks"?
Why is this something we'd want to do?
Why would a function count as an abstraction?

358 of 397

Interactive Animations and Games Lesson 24 - Wrap Up

Question of the Day

How can programmers use functions to create their own abstractions?

359 of 397

Interactive Animations and Games

Lesson 25

The Game Design Process

361 of 397

Play Cake Defender

If you were making this program…

What sprites would you need?
What variables would you need?
What functions would you use?

Interactive Animations and Games Lesson 25 - Warm Up

362 of 397

Question of the Day

How does having a plan help to make a large project easier?

Interactive Animations and Games Lesson 25 - Warm Up

364 of 397

Interactive Animations and Games Lesson 25 - Activity

Project Guide

The project guide has already been filled out for you.

Does it describe the same sprites that you thought of?
Does it use the same variables to store information?
Are the functions that it describes the same as the functions you described?

365 of 397

Code Studio, Level 4-13

Interactive Animations and Games Lesson 25 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

366 of 397

Code Studio, Level 14

Challenge Level

Do This

Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 25 - Activity

368 of 397

Interactive Animations and Games Lesson 25 - Wrap Up

Journal Prompt:

Today, you used a filled-out project guide as you completed your program.

How did the project guide help you as you coded?
What do you think will be important to remember when you fill out your own project guide?

369 of 397

Interactive Animations and Games Lesson 25 - Wrap Up

Question of the Day

How does having a plan help to make a large project easier?

370 of 397

Interactive Animations and Games

Lesson 26

Using the Game Design Process

372 of 397

Journal Prompt:

The Problem Solving Process helps us work through all kinds of problems. Think about the problem of building a larger piece of software, like the game we built in the last lesson.

What did each of the four steps look like in the game from last lesson?
Why were they important?

Interactive Animations and Games Lesson 26 - Warm Up

373 of 397

Question of the Day

How can the problem solving process help programmers to manage large projects?

Interactive Animations and Games Lesson 26 - Warm Up

375 of 397

Code Studio, Level 2 - Define

Play Alien Jumper

How would you describe this game to someone?

Interactive Animations and Games Lesson 26 - Activity

376 of 397

Project Guide - Prepare

Sketch your game
What sprites will you need?

What are their set-ups and interactions?

What variables will you need?

What information will they store?

What functions will you need?

What instructions will they run?

Interactive Animations and Games Lesson 26 - Activity

377 of 397

Code Studio, Level 4-17 - Try

Interactive Animations and Games Lesson 26 - Activity

Do This

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

378 of 397

Code Studio, Level 18 - Reflect

Look over your project guide, and play your game a few times to make sure you have completed everything.

Does the player sprite move the way it should?
Do all of your interactions work?
Are the platforms moving correctly?
Does the scoreboard work?

Interactive Animations and Games Lesson 26 - Activity

379 of 397

Code Studio, Level 19-21

Challenge Level

Do This

Look at the sample games.
Do any or all of the challenge levels
Follow the instructions in Code Studio
Check out the Help & Tips tab if you need help

Interactive Animations and Games Lesson 26 - Activity

381 of 397

Interactive Animations and Games Lesson 26 - Wrap Up

Journal Prompt:

Before you started coding your game, you first had to fill out a project guide with a plan.

How did having a plan change the way that you coded your game?
Will you do anything differently when you make your plan for your final project?

382 of 397

Interactive Animations and Games Lesson 26 - Wrap Up

Question of the Day

How can the problem solving process help programmers to manage large projects?

383 of 397

Interactive Animations and Games

Lesson 27

Project: Design a Game

385 of 397

Journal Prompt:

Today, you'll start the final project of the unit, in which you will design and code your own game.

Before you start, what are three skills or qualities that you think will be important as you complete this project?

Interactive Animations and Games Lesson 27 - Warm Up

386 of 397

Question of the Day

How can the five CS practices

(problem solving, persistence, communication, collaboration, and creativity)

help programmers to complete large projects?

Interactive Animations and Games Lesson 27 - Warm Up

388 of 397

Define: Describe your Game

Play the sample games on Code Studio
Think about ideas for a game
Describe your game in the project guide

Interactive Animations and Games Lesson 27 - Activity

389 of 397

Prepare: Plan your Game

Sketch your game
What sprites will you need?

What are their set-ups and interactions?

What variables will you need?

What information will they store?

What functions will you need?

What instructions will they run?

Interactive Animations and Games Lesson 27 - Activity

390 of 397

Try: Code your Game

Code Studio, Level 3-12

Interactive Animations and Games Lesson 27 - Activity

Follow the instructions on each level
If you get stuck, try…

Help and Tips Tab
Code Documentation

If you make a big mistake…

Use version history to go back

391 of 397

Reflect: Review your Game

Interactive Animations and Games Lesson 27 - Activity

Code Studio, Level 18

Look over your project guide, and play your game a few times to make sure you have completed everything.

Have you included comments in your code?
Do you use functions to organize your code and make it easier to read?
Do the functions and variables have meaningful names?
Are you using conditionals and sprite interactions to make the game more interesting?

392 of 397

Interactive Animations and Games Lesson 27 - Activity

Peer Review

Do This

Decide what you would like feedback on.
Trade places with another students and fill out their review sheet with your thoughts on their project.

Pay special attention to the parts they wanted feedback on.

Trade back and read the feedback they left for your project.

How can you use this feedback to make your project better?

393 of 397

Interactive Animations and Games Lesson 27 - Activity

Final Changes and Rubric

Based on the feedback, make the final changes to your game.

Check the rubric to make sure that you have demonstrated what you have learned in this unit.

394 of 397

Interactive Animations and Games Lesson 27 - Activity

Share Out!

Share your game with the class and take time to play the games your classmates made.

What is an interesting use of code in the games you see?

396 of 397

Interactive Animations and Games Lesson 27 - Wrap Up

Journal Prompt:

Of the five practices of CS Discoveries

(Problem Solving, Persistence, Creativity, Collaboration, Communication)

Choose one of the five practices in which you believe you demonstrated growth in this unit.

Write something you did that exemplified this practice

397 of 397

Interactive Animations and Games Lesson 27 - Wrap Up

Question of the Day

How can the five CS practices

(problem solving, persistence, communication, collaboration, and creativity)

help programmers to complete large projects?