< Unit 3 - Interactive Animations and Games ('24-'25)

Lesson 23: Collisions

45 minutes

Overview

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?

CSTA K-12 Computer Science Standards (2017)
    • 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
    • 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
    • 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
    • 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
    • 2-AP-17 - Systematically test and refine programs using a range of test cases.
    • 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.

Agenda

Objectives

Students will be able to:
  • Describe how abstractions can be built upon to develop even further abstractions
  • Model different types of interactions between sprites.

Preparation

Links

Heads Up! Please make a copy of any documents you plan to share with students.

For the teachers

Vocabulary

  • Abstraction - a simplified representation of something more complex. Abstractions allow you to hide details to help you manage complexity, focus on relevant concepts, and reason about problems at a higher level.

Teaching Guide

Warm Up (5 minutes)

Display: Display the animated image. It is also available as a level in code studio.

A giraffe emoji moves across the screen towards a stationary monkey emoji. As it touches the monkey emoji, both the monkey and giraffe continue moving across the screen

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

Share: Allow students to share out their ideas.

Discussion Goal: The goal of this discussion is for students to brainstorm ways to solve the problem of having one sprite push another across the screen. There's no need for students to come to a consensus because they will each have a chance to try out a solution in the next level in Code Studio. Students should understand that it is possible to use blocks to produce the desired movement just with the blocks that they have already learned.

Remarks

The first part of the problem is figuring out when the two sprites are touching, but we already figured out how to do that and can now use the isTouching block. That means we don’t need to think about those details anymore. Using abstraction to hide the complicated details in that part of the problem means we can focus on the new part.

Teaching Tip

Students have seen this vocabulary before, but given its importance to the chapter, it is introduced again here.

Vocabulary Review:

  • abstraction - a simplified representation of something more complex

Question of the Day: How can programmers build on abstractions to create further abstractions?

Activity (35 minutes)

Transition: Move students onto Code Studio - level 2 where they will code the idea they made during the warm-up to make the giraffe sprite push the monkey sprite across the screen. When students finish level 2, have them try level 3 where they will make an elephant sprite push a hippo sprite down the screen.

Prompt: These were challenging problems, but we were able to solve them. What helped us to solve these problems?

Assessment Opportunity

Make sure students talk about the importance of higher-level blocks, such as isTouching, and that while these blocks don't provide new functionality, hiding the complexity of the code inside of a single block allows them to tackle more complex problems.

This is also a good time to call out how far the students have progressed in their skills since the beginning of the unit. This problem would have seemed almost impossible at the beginning of the year. Some things that made the problem easier to solve were:

  • Preparation: The students brainstormed and thought about solutions before trying out their code.
  • Cooperation: Students worked as a group to come up with a solution
  • Abstraction: Students were able to use the isTouching and velocityY blocks to hide part of the solution's complexity.

Remarks

All of these things are very important, and they come up in Computer Science a lot. One thing that was particularly helpful was the isTouching block, which hid the complicated code that tells us whether the two sprites are touching. There's also a displace block that hides the code we just wrote, and some other blocks that hide the code for some other types of sprite interactions. You'll have a chance to try out these blocks in the next few levels.

Transition: Have students continue working on the remaining levels.

Teaching Tip

Guide to Programming Levels: Additional guidance for programming levels is provided in the CSD Guide to Programming Levels. This document includes strategies and best-practices for facilitating programming levels with students.

Assessment Opportunity

Formative Assessment: This level can be used as a formative assessment. A rubric is provided in the level, and written feedback can be given to students. Click here to learn more about giving feedback to students.

Wrap Up (5 minutes)

Question of the Day: How can programmers build on abstractions to create further abstractions?

Vocabulary Review:

  • abstraction - a simplified representation of something more complex

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

Assessment Opportunity

Students should understand that these two blocks represent partial solutions to the problem of one sprite pushing the other, and that by hiding the details of those partial solutions, they can more easily focus on how to fit those partial solutions together to solve larger and more complex problems.

Creative Commons License (CC BY-NC-SA 4.0).

This work is available under a Creative Commons License (CC BY-NC-SA 4.0).

If you are interested in licensing Code.org materials for commercial purposes contact us.