Interactive Animations and Games ('24-'25)
In the Interactive Animations and Games unit, students create programmatic images, animations, interactive art, and games. Starting off with simple, primitive shapes and building up to more sophisticated sprite-based games, students become familiar with the programming concepts and the design process computer scientists use daily. They then learn how these simpler constructs can be combined to create more complex programs. In the final project, students develop a personalized, interactive program.
Chapter 1 Overview
Description: Students build up toward programming interactive animations in the Game Lab environment. They begin with simple shapes and sprite objects, then use loops to create flipbook style animations. Next, they learn to use booleans and conditionals to respond to user input. At the end of the chapter, students design and create an interactive animation that they can share with the world.
Goals:
- Create an interactive animation that includes basic programming concepts such as control structures, variables, user input, and randomness.
- Give and respond constructively to peer feedback, and work with their teammates to complete a project.
- View yourself as a computer programmer, and see programming as a fun and creative form of expression.
Big Questions:
- What is a computer program?
- What are the core features of most programming languages?
- How does programming enable creativity and individual expression?
- What practices and strategies will help me as I write programs?
Chapter 2 Overview
Description: In this chapter students combine the constructs that they learned in the first chapter to program more complex movement and collisions in their sprites. As they create more complex programs, they begin to use functions to organize their code. In the end, students use a design process to create an original game.
Goals:
- Create an interactive game that includes basic programming concepts such as control structures, variables, user input, and randomness.
- Give and respond constructively to peer feedback, and work with their teammates to complete a project.
- Work with others to break down programming projects using sprites and functions.
Big Questions:
- How do software developers manage complexity and scale?
- How can programs be organized so that common problems only need to be solved once?
- How can I build on previous solutions to create even more complex behavior?
Implementation Guidance for Interactive Animations and Games
- Guidance for how to support students in programming levels and differentiate tasks are available in the Programming Levels Guide and Differentiation Guide
- You can view the Implementation Guide for more information about this unit
Finished Teaching This Unit?
Answer this short survey to let the Code.org curriculum team know how the unit went.
Key | Instructional Lesson Assessment Unplugged Lesson |
Make all lessons in this Unit visible or hidden for your students.
To kick off a unit devoted to problem-solving and developing animations and games, students begin by investigating the design of different animations and games. Students look at a variety of animations and games and attempt to match each design with a potential user. Then students choose a user and attempt to prototype an animation or game design for them on paper or in a digital template. To conclude the activity, students consider what it means to be an animation and game designer and create resources for other users.
Question of the Day: How can we design animations and games based on the needs of a user?
The primary purpose of this lesson is to introduce students to the coordinate system they will use in Game Lab. Students begin by exploring the challenges of communicating how to draw with shapes and then transition to using a tool that introduces how this problem is approached in Game Lab. The warm-up activity quickly demonstrates the challenges of communicating position without some shared reference point. In the main activity, students explore a Game Lab tool that allows students to interactively place shapes on Game Lab's 400 by 400 grid. They then take turns instructing a partner how to draw a hidden image using this tool, accounting for many challenges students will encounter when programming in Game Lab. Students optionally create their own images to communicate before a final debrief discussion.
Question of the Day: How can we clearly communicate how to draw something on a screen?
This lesson is designed to give students a chance to get used to the programming environment, as well as the basic sequencing and debugging that they will use throughout the unit. Students begin with an introduction to the GameLab interactive development environment (IDE), then learn the three commands (rect
, ellipse
, and fill
) that they will need to code the same types of images that they created on paper in the previous lesson. Challenge levels provide a chance for students who have more programming experience to further explore Game Lab.
Question of the Day: How can we communicate to a computer how to draw shapes on the screen?
In this lesson, students continue to build skills and develop their familiarity with Game Lab by manipulating the width and height of the shapes they use to draw. The lesson kicks off with a discussion that connects expanded block functionality (e.g. different sized shapes) with the need for more block inputs, or "parameters". Students learn to draw with versions of ellipse()
and rect()
that include width and height parameters. They also learn to use the background()
block. Throughout the lesson, students will need to reason about the x-y coordinate plane, consider the order of their code, and slightly increase their programs' complexity.
Question of the Day: How can we use parameters to give the computer more specific instructions?
In this lesson, students learn how to use variables to label a value. Students begin the lesson with a very basic description of the purpose of a variable within the context of the storage component of the input-output-storage-processing model. Students then complete a level progression that reinforces the model of a variable as a way to label or name a number. Students should leave this lesson knowing that variables are a way to label a value in their programs so that they can be reused or referenced later. In the following lesson, students will be introduced to random numbers, in which they will see a more powerful use for variables, and in later lessons, students will continue to expand their understanding of variables and experience more advanced ways they can be used.
Question of the Day: How can we use variables to store information in our programs?
This lesson introduces randomness, which is important both as a way to make programs more interesting and also to motivate the use of variables. Students are introduced to the randomNumber()
block and how it can be used to create new behaviors in their programs. They then learn how to update variables during a program. Combining all of these skills, students draw randomized images.
Question of the Day: How can we make our programs behave differently each time they are run?
After a quick review of the code they have learned so far, students are introduced to their first creative project of the unit. Using the problem-solving process as a model, students define the robot face that they want to create, prepare by thinking of the different code they will need, try their plan in Game Lab, then reflect on what they have created. They also have a chance to share their creations with their peers. The open-ended nature of this lesson also provides flexibility for the teacher to decide how long students should spend on their work, depending on the scheduling demands of the particular course implementation.
Question of the Day: How can we use shapes, variables, and randomness to express our creativity?
In order to create more interesting and detailed images, students are introduced to the sprite object which allows for one variable name to control both the shape and all its aspects. The lesson starts with a discussion of the various information that programs must keep track of, then presents sprites as a way to keep track of that information. Students then learn how to assign each sprite an image, which will greatly increase the complexity of what they can draw on the screen.
Question of the Day: How can we use sprites to help us keep track of lots of information in our programs?
In the last lesson, when students were introduced to sprites, they focused mainly on creating a sprite and assigning it an animation. This lesson starts to dig into what makes sprites such a powerful programming construct - that they have properties that can be modified as a program is running. This lays the foundation for much of what students will be doing in the rest of the unit in terms of accessing and manipulating sprite properties to create interesting behaviors in their programs. The lesson starts with a review of what a sprite is, then students move on to Game Lab to practice more with sprites, using their properties to change their appearance. They then reflect on the connections between properties and variables.
Question of the Day: How can we use sprite properties to change their appearance on the screen?
This lesson introduces Game Lab's text commands, giving students more practice using the coordinate plane and parameters. This is the last type of element that students will be placing on the screen - after this, students will focus on how they can control the movement and interactions of these elements. The lesson begins with asking students to caption a cartoon created in Game Lab. They then move on to Code Studio where they practice placing text on the screen and controlling other text properties, such as size. Students who complete the assessment early can go on to learn more challenging blocks related to text properties.
Question of the Day: How can we use text to improve our scenes and animations?
After a quick review of the code they have learned so far, students start working on their next creative project of the unit. Using the problem-solving process as a model again, students define the scene that they want to create, prepare by thinking of the different code they will need, try their plan in Game Lab, then reflect on what they have created. They also have a chance to share their creations with their peers. The open-ended nature of this lesson also provides flexibility for the teacher to decide how long students should spend on their work, depending on the scheduling demands of the particular course implementation.
Question of the Day: How can we use Game Lab to express our creativity?
In this lesson, students are introduced to the draw loop, one of the core programming paradigms in Game Lab. To begin the lesson students look at some physical flipbooks to see that having many frames with different images creates the impression of motion. Students then watch a video explaining how the draw loop in Game Lab helps to create this same impression in their programs. Students combine the draw loop with random numbers to manipulate some simple animations with dots and then with sprites. Students should leave the lesson understanding that the commands in the draw loop are called after all other code but are then called repeatedly to create animation. Students will have a chance to continue to develop an understanding of this behavior in the next two lessons, but laying a strong conceptual foundation in this lesson will serve them well for the rest of the unit.
Question of the Day: How can we animate our images in Game Lab?
This lesson builds on the draw loop that students learned previously to create programs with purposeful motion. Students learn how to control sprite movement using a construct called the counter pattern, which incrementally changes a sprite's properties. Students first brainstorm different ways that they could animate sprites by controlling their properties, then explore the counter pattern in Code Studio. After examining working code, students try using the counter pattern to create various types of sprite movements. The skills that students build in this lesson lay the foundation for all of the animations and games that they will make throughout the rest of the unit.
Question of the Day: How can we control sprite movement in Game Lab?
This lesson is a chance for students to get more creative with what they have learned as students are asked to combine different methods that they have learned to create an animated scene. Students first review the types of movement and animation that they have learned and brainstorm what types of scenes might need that movement. They then begin to plan out their own animated scenes, which they create in Game Lab.
Question of the Day: How can we combine different programming patterns to make a complete animation?
This lesson introduces booleans and conditionals, which allow a program to run differently depending on whether a condition is true. Students start by playing a short game in which they respond according to whether particular conditions are met. They then move to Code Studio, where they learn how the computer evaluates Boolean expressions, and how they can be used to structure a program.
Question of the Day: How can programs react to changes as they are running?
One common way conditionals are used is to check for different types of user input, especially key presses. Following the introduction to booleans and if statements in the previous lesson, students are introduced to a new block called keyDown()
which returns a boolean and can be used in conditionals statements to move sprites around the screen. By the end of this lesson, students will have written programs that take keyboard input from the user to control sprites on the screen.
Question of the Day: How can our programs react to user input?
In this lesson, students continue to explore ways to use conditional statements to take user input - this time with the mouse. They will also expand their understanding of conditionals to include else, which allows for the computer to run a certain section of code when a condition is true, and a different section of code when it is not. This concept is introduced alongside several new mouse input commands, allowing students to gradually build up programs that use input in different ways.
Question of the Day: What are more ways that the computer can react to user input?
This end-of-chapter assessment is a good place for students to bring together all the pieces they have learned (drawing, variables, sprites, images, conditionals, user input) in one place. In this project, students plan for and develop an interactive greeting card using all of the programming techniques they've learned to this point. Giving students the opportunity to really be creative after learning all these new concepts will help to engage them further as they head into Chapter 2.
Question of the Day: What skills and practices are important when creating an interactive program?
This lesson launches a major theme of the chapter: that complex behavior can be represented in simpler ways to make it easier to write and reason about code. After a brief review of how they used the counter pattern to move sprites in previous lessons, students are introduced to the idea of hiding those patterns in a single velocity
block. Students then head to Code Studio to try out new blocks that set a sprite's velocity directly, and look at various ways that they are able to code more complex behaviors in their sprites. Over the next several lessons, students will see how this method of managing complexity allows them to produce more interesting sprite behaviors.
Question of the Day: How can programming languages hide complicated patterns so that it is easier to program?
This lesson formally introduces the use of abstractions, simple ways of representing underlying complexity. In the last lesson, students were exposed to the idea of using one block to represent complex code. Working in pairs, students further explore this idea in the context of the intentionally complex mathematical challenge of determining whether two sprites are touching. Students then use a single block, the isTouching()
block, to represent this complexity and to create different effects when sprites collide. By the end of the lesson, students should understand that by using a single block to represent this complexity, it becomes much easier to write and reason about code and appreciate the value of using abstractions.
Question of the Day: How can programming help make complicated problems more simple?
This lesson is another chance for students to get more creative with what they have learned. Students use what they have learned about collision detection and setting velocity to create a simple side-scroller game. After looking at a sample side-scroller game, students brainstorm what sort of side-scroller they would like to make, then use a structured process to program the game in Code Studio. This lesson can be shortened or lengthened depending on time constraints.
Question of the Day: How can the new types of sprite movement and collision detection be used to create a game?
This lesson does not introduce any new blocks and in fact, only uses patterns students have seen in Chapter 1 and demonstrates how combining these patterns, in particular the abstractions students learned in the previous two lessons, allows them to build new behaviors for their sprites. Specifically, this lesson has students learn how to combine the velocity properties of sprites with the counter pattern to create more complex sprite movement. After reviewing the two concepts, they explore various scenarios in which velocity is used in the counter pattern and observe the different types of movement that result, such as simulating gravity. They then reflect on how they were able to get new behaviors by combining blocks and patterns that they already knew.
Question of the Day: How can previous blocks be combined in new patterns to make interesting movements?
This lesson introduces collisions, another useful abstraction that will allow students to manipulate their sprites in entirely new ways. After a brief review of how they used the isTouching
block, students brainstorm other ways that two sprites could interact. They then use isTouching
to make one sprite push another across the screen before practicing with the four collision blocks (collide
, displace
, bounce
, and bounceOff
). This is the last time they will learn a new sprite behavior, and following this lesson students will transition to focusing on how they organize their increasingly complex code.
Question of the Day: How can programmers build on abstractions to create further abstractions?
This lesson is another chance for students to get more creative with what they have learned. Students use what they have learned about simulating gravity and the different types of collisions to create simple flyer games. After looking at a sample flyer game, students brainstorm what sort of flyer games they would like, then use a structured process to program the game in Code Studio.
Question of the Day: How can the new types of collisions and modeling movement be used to create a game?
In previous lessons, students have learned to use a number of abstractions in their programs which have allowed them to build much more complex programs while ignoring the details of how that behavior is created. In this lesson, students learn to build abstractions of their own by creating functions that will serve to organize their code, make it more readable, and remove repeated blocks of code. Students first think about what sorts of new blocks they would like in Game Lab, and what code those blocks would contain inside. Afterward, students learn to create functions in Game Lab. They will use functions to remove long blocks of code from their draw loop and to replace repeated pieces of code with a single function.
Question of the Day: How can programmers use functions to create their own abstractions?
This lesson introduces students to the process they will use to design games for the remainder of the unit which is centered around a project guide that asks students to define their sprites, variables, and functions before they begin programming their game. Students begin by playing a game on Game Lab where the code is hidden, discussing what they think the sprites, variables, and functions would need to be to make the game. For the purposes of heavily scaffolding the software development process, students are then given a completed project guide that provides starter code and shows one way to implement the game. Students are then walked through this implementation process through a series of levels and have an opportunity to make improvements to the game to make it their own in the final level. In the subsequent lessons, students will need to complete a greater portion of the guide independently, and for the final project, they will follow this process largely independently.
Question of the Day: How does having a plan help to make a large project easier?
In this multi-day lesson, students use the problem-solving process from Unit 1 to create a platform jumper game. This lesson also builds on the use of the Project Guide in the previous lesson by having students complete more of this project guide independently before using it to build a game. Students begin the lesson by looking at an example of a platform jumper, then define what their games will look like. Next, they use a structured process to plan the backgrounds, variables, sprites, and functions they will need to implement their game. After writing the code for the game, students will reflect on how the game could be improved, and implement those changes.
Question of the Day: How can the problem-solving process help programmers to manage large projects?
Students will plan and build their own game using the project guide from the previous two lessons. Working individually or in pairs, students will first decide on the type of game they'd like to build, taking as inspiration a set of sample games. They will then complete a blank project guide where they will describe the game's behavior and scope out the variables, sprites, and functions they'll need to build. In Code Studio, a series of levels prompts them on a general sequence they can use to implement this plan. Partway through the process, students will share their projects for peer review and will incorporate feedback as they finish their game. At the end of the lesson, students will share their completed games with their classmates. This project will span multiple classes and can easily take anywhere from 3-5 class periods.
Question of the Day: How can the five CS practices (problem-solving, persistence, communication, collaboration, and creativity) help programmers to complete large projects?
Level Type | Level Status | |||||
Not started | In progress | Keep working | Needs review | Completed | Assessments / Surveys | |
Concept | Concept: Not started | Concept: In progress | N/A | N/A | Concept: Completed (perfect) | N/A |
Activity | Activity: Not started | Activity: In progress | Activity: Keep working | Activity: Needs review | Activity: Completed (perfect) | Activity: Submitted |
Level Type | Level Details | ||
Concept | Text | Video | Map |
Activity | Unplugged Lesson Extras | Online Assessment | Question Choice level |