Unit 3 - Programming - Interactive Games and Animations

Programming is one of the most empowering and engaging tools for a student to learn. In this unit students get their first experience with programming through the lense of creating programmatic images, animations, interactive art, and games. Starting off with simple primitive shapes and building up to more sophisticated sprite based games students will become familiar with the programming concepts and the design process computer scientists use daily.

The development of a personalized final project will engage students in design, testing, and iteration as they come to see that failure and debugging are an expected (and valuable) part of the programming process which make your end product better.

Chapter 1: Shapes and Animations

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?

Week 1

Lesson 1: Drawing in Game Lab

Game Lab

Students start the class exploring how to communicate locations and size of rectangles on a coordinate grid using just 4 numbers in order to highlight some of the major rules of drawing in Game Lab. Once students have a basic understanding of drawing on a coordinate grid. Students will create simple shape based drawings on the computer through a series of levels. At the end of the lesson students get a chance to plan out their own drawing on paper using simple shapes and then implement it on the computer.

Student Links: Activity Guide | Activity Guide | | Activity Guide

Lesson 2: Draw Loop and Randomization

Game Lab

Moving from simple static images students will learn to use randomly generated numbers as inputs to their programs. From there we introduce the concept of a flip-book style animation loop, using those randomized shapes to see how the draw() loop calls our code repeatedly to create animation.

Student Links:

Lesson 3: Variables Unplugged


In this lesson students are introduced to the basic syntax and underlying behavior of variables through an unplugged activity. Using notecards and string to simulate variables within a program, students simply implement a few short programs to learn how these programs would “look” if they could see inside their computer. Once comfortable with this syntax students complete several challenge exercises in which they must move information around in memory to achieve a desired “ending state” despite being able to use a limited set of commands.

Student Links: | Activity Guide |

Lesson 4: Variables and Animation

Game Lab

In this lesson students learn how to use variables in the drawings and animations they have been designing in Game Lab. The lesson begins with a quick review of what students learned in the previous lesson’s unplugged activity. Students then transition to Code Studio where they are guided through different ways they can use variables in their animations. Particular attention is given to the “counter pattern” (x = x + 1) which students will use repeatedly throughout this lesson and unit. To conclude the lesson students animate a sunset using counter variables.

Student Links: | Video

Week 2

Lesson 5: Sprites and Properties

Game Lab

Building on the use of variables to control the drawing of simple shapes, students are introduced to the Sprite object as a way to simplify the creation of animations. Applying the same incrementor pattern used in animating simple shapes, students will build up to an animated race using Sprite properties.

Teacher Links: Image Student Links: | Activity Guide | Conceptorial

Lesson 6: Sprites and Images

Game Lab

Students get to turn their rectangular sprites into images for the first time! They will get lots of practice in this lesson of using images to create some simple animations including spinning gears, swimming fish and a flying kite. The introduction of the mouse position is the first time students will use user input to change the animations of their sprites.

Teacher Links: Image Student Links:

Lesson 7: Booleans and Conditionals


In this lesson, students are introduced to boolean values and logic, as well as conditional statements. The class starts by playing a simple game of Stand Up, Sit Down where the boolean (true/false) statements are in regard to personal properties (hair or eye color, clothing type, age, etc). This gets students thinking about how they can frame a property with multiple potential values (such as age) with a binary question.

Student Links: | Activity Guide

Lesson 8: Conditionals and Keyboard Input

Game Lab

After a brief online refresher with booleans, students are introduced to the use of booleans in conditionals statements to move sprites around the screen. Initially they will explore conditions that are triggered by changes in sprite properties, later moving on to boolean producing fuctions that respond to keyboard input.

Student Links: | Video

Week 3

Lesson 9: Complex Conditionals

Game Lab

Students learn to use else statements and nested if statements to add more complex logic to their programs.

Student Links:

Lesson 10: Project: Interactive Card

Project | Game Lab

In this cumulative project for Chapter 1, students will plan for and develop and an interactive greeting card using all of the programming techniques they've learned to this point.

Student Links: | Activity Guide | Rubric

Chapter Commentary

In this chapter students learn to create interactive animations, first with static drawn shapes, building up to sprite objects. A proposed week-by-week overview is below, assuming a class that meets 5 times a week for 45 minutes.

Week 1: Drawing with Shapes and Variables

Simple shape commands, text, setting colors, widths, navigating the coordinate space, etc. Random values and the draw loop Variables, iteration, modulo to introduce variables and make simple animations (cloud moving across the sky)

Week 2: Sprites and Conditionals

Creating sprites and setting their properties (position, rotation, width, height, scale, etc.) Updating sprite properties within the draw loop Use conditionals to sense user input Use conditionals to constrain sprite to screen

Week 3: Project

Dive into animations tab Sprite - Sprite interaction with properties Changing values using expressions (instead of directly mapping one value to another)

Chapter 2: Building Games

Big Questions

  • How do software developers manage complexity and scale?
  • How can programs be organized such that common problems only need to be solved once?
  • How can I build on previous solutions to create even more complex behavior?

Week 4

Lesson 11: Velocity

Game Lab

After a brief review of how they used the counter pattern to move sprites in previous lessons, students are introduced to the properties that set velocity and rotation speed directly. As they use these new properties in different ways, they build up the skills they need to create a basic side scroller game.

Lesson 12: Collision Detection

Game Lab

In this lesson, students learn about collision detection on the computer. Working in pairs, they explore how a computer could use sprite location and size properties and math to detect whether two sprites are touching. They then use the isTouching() block to create different effects when sprites collide, including playing sounds. Last, they use their new skills to improve the sidescroller game that they started in the last lesson.

Student Links:

Lesson 13: Complex Sprite Movement

In this lesson students learn to combine the velocity properties of sprites with the counter pattern to create more complex sprite movement. In particular students will learn how to simulate gravity, make a sprite jump, and allow a sprite to float left or right. In the final levels of the Code Studio progression students combine these movements to animate and control a single sprite and build a simple game where a character flies around and collects a coin. Students are encouraged to make their own additions to the game in the final level.

Week 5

Lesson 14: Collisions

In this lesson, students program their sprites to interact in 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).

Lesson 15: Functions

Game Lab

In this lesson students learn how to create functions to organize their code, make it more readable, and remove repeated blocks of code. An unplugged warmup explores how directions at different levels of detail can be useful depending on context. Students learn that higher level or more abstract steps make it easier to understand and reason about steps. Afterwards 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. At the end of the lesson students use these skills to organize and add functionality to the final version of their side scroller game.

Week 6

Lesson 16: The Game Design Process

This lesson introduces students to the process they will use to design games for the remainder of the unit. This process is centered around a project guide which asks students to define their sprites, variables, and functions before they begin programming their game. In this lesson students begin by playing a game on Game Lab where the code is hidden. They discuss what they think the sprites, variables, and functions would need to be to make the game. They are then given a completed project guide which shows one way to implement the game. Students are then walked through this process through a series of levels. As part of this lesson students also briefly learn to use multi-frame animations in Game Lab. At the end of the lesson students have an opportunity to make improvements to the game to make it their own.

Student Links: Project Guide

Lesson 17: Using the Game Design Process

In this multi-day lesson, students will use the problem solving process from Unit 1 to create a platform jumper game. They will start by looking at an example of a platform jumper, then define what their games will look like. Next, they will 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.

Teacher Links: Exemplar Student Links: Project Guide

Week 7

Lesson 18: Project - Design a Game

Students will plan and build their own game using the project guide from the previous two lessons to guide their project. 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.

Student Links: Project Guide | Rubric | Peer Review

Chapter Commentary

In this chapter students integrate more complex programming constructs into their games. In particular students learn to use an array-like element for storing groups of sprites and a for-loop with an iterator for accessing and manipulating individual members. A high level breakdown follows.

Part 1: Collisions and Complex Games Velocity, rotationSpeed and more complex properties Simple collisions between sprites Using conditionals to sense when sprites are touching Guided design of a more complex game (Flappy?)

Part 2: Groups and Loops Creating groups and adding sprites with adding for loop Using a for loop with an iterator to alter members of a group User interactivity with groups [[does this currently work? Needs more investigation]]

Part 3: Build Your Own Project A week to build a project of your choosing [[We should discuss as a team what kinds of supports we want to build into this project. Is it free explore? How do we incorporate presentation and feedback?]]