Lesson 18: Collisions

Game Lab

Overview

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).

Purpose

This lesson introduces collisions, another useful abstraction that will allow students to manipulate their sprites in entirely new ways. While students could theoretically have written their own displace, collide, or bounce commands, the ability to ignore the details of this code allows them to focus their attention on the high level structure of the games they want to build.

This lesson is also intended to give students more practice using the new commands they have learned in the second chapter. It is actually the last time they will learn a new sprite behavior, and following this lesson students will transition to focusing more on how they organize their increasingly complex code.

Agenda

Warm Up

Activity

Wrap Up (10 mins)

View on Code Studio

Objectives

Students will be able to:

  • Use the `displace`, `collide`, `bounce`, and `bounceOff` blocks to produce sprite interactions
  • Describe how abstractions can be built upon to develop even further abstractions

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.

Introduced Code

Teaching Guide

Warm Up

Discussion Goal

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.

Display: If you have the ability, project the animation on the first level in Code Studio for this lesson. Otherwise ask pairs of students to look at it together. It shows two sprites, one moving across the screen towards the other and eventually pushing the one when they collide.

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

Remarks

We have a lot of great ideas for how we might make one sprite push another across the screen. Now that you've prepared, you can try out your ideas in Code Studio. One big part of the problem is figuring out when the two sprites are touching, but because we already figured out how to do that and can now use the isTouching block, we don’t need to think about it anymore. We can focus on the new part of the problem.

Activity

Code Studio Levels

Levels 2-4: In these levels students are shown a sprite interaction. They then implement their ideas for creating the sprite interaction they observed. The first time they can implement the ideas from the group. The second time challenge them to implement that behavior independently.

Discussion Goal

This is 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.

Prompt: This was a challenging problem, but we were able to solve it. What helped us to solve this problem?

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, and use them to improve your flying game.

Levels 5-10: These levels introduce how to use the 4 new collision blocks students will learn in this lesson.

Levels 11-15: These levels guide students through adding collisions to the flyer game they started in the previous lesson, eventually inviting students to add their own modifications to the game.

Wrap Up (10 mins)

Share Out and Journal 3-2-1

Share: Allow students time to play each other's flying games. Ask them to focus not just on the new behavior that they added but also the code they used to create it.

Journal: Have students write and reflect about the following prompts.

  • 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 block you'd like to have in Game Lab, and how would it work?
View on Code Studio

Sprite Interactions

So far you've been able to create simple sprite interactions by using the sprite.isTouching() block. For example, you've reset a coin to a different location on the screen when a character touches it. Now it's time to start making sprites have more complex interactions.

Do This

Be ready to share your ideas with your classmates.

View on Code Studio

Student Instructions

Program a Sprite Interaction

You should have discussed with your classmates how you could create the sprite interaction you saw in the last level. Now it's your turn to program it yourself. How can you make the giraffe move the monkey off the screen?

Do This

The giraffe is already moving across the screen toward the monkey but the sprite interaction itself hasn't been programmed.

  • Use the plan you developed with your classmates on the last level to program the sprite interaction yourself.
View on Code Studio

Student Instructions

Write Your Own Sprite Interaction

In the last level you should have written code for a sprite interaction that you developed with your classmates. This time try to write the program on your own, but you can use the patterns you saw in the last level.

Do This

The elephant should push the hippo off the screen. Notice that the elephant moves at a random Y velocity each time the program runs.

  • Using the patterns from the last level, write code that makes the elephant push the hippo off the screen.
View on Code Studio

Student Instructions

Displace

The interaction you've been programming is so common that there's a block designed to do the interaction for you. sprite.displace() that will make one sprite push the other when they touch. The code underlying this block might look a lot like what you just wrote, but now you no longer need to worry about writing those details yourself.

Do This

Someone tried to use the sprite.displace() block to make the elephant push the hippo, but there is a bug. Can you change the code so that the elephant pushes the hippo off the screen?

View on Code Studio

Student Instructions

More Collision Blocks

Three new types of sprite interactions have been added to the toolbox, sprite.collide(), sprite.bounce(), and sprite.bounceOff(). How do you think they'll affect the sprites?

Do This

  • Switch out the displace block for the sprite.collide(), sprite.bounce(), and sprite.bounceOff() blocks. ( Show me where )
    • Hint: If you're having trouble doing this with blocks then switch over to text mode.
  • Discuss with a neighbor: What is the difference between the four different sprite interactions? What do you think the purpose of each block is?
View on Code Studio

Student Instructions

Collision Types

There are four types of collisions that we use in Game Lab. These blocks will cause a certain type of interaction between the sprite and its target.

displace

The displace block causes the sprite to push the target as long as they are touching each other. The sprite keeps moving normally.

collide

The collide block makes the sprite stop when it runs into the target. If the target is moving, it will push the sprite with it. The target keeps moving normally.

bounce

The bounce block makes the sprite and the target bounce when they touch each other. Both the sprite and the target change how they are moving.

bounceOff

The bounceOff block makes the sprite bounce off the target. The target keeps moving normally.

Do This

Choose the best block to model the basketball bouncing off the floor. ( Show me where )

View on Code Studio

Student Instructions

Debugging Sprite Interactions

Sprite interactions just run some code when they're called. The interactions are not "remembered" by the game. If you want one sprite to bounce or collide with another then it needs to be a part of the draw loop. If you forget then this can lead to unexpected behavior.

Do This

The turtle can be moved with the arrow keys. It's not supposed to be able to walk through the tree, but something is wrong in the code. Can you find and correct the bug in the code?

  • Run the code and try to make the turtle collide with the tree.
  • Look through the code and discuss with your partner what the problem is.
  • Correct the code, then run it again to make sure it works.
View on Code Studio

Student Instructions

Debug

Sometimes sprites will behave in ways that are unexpected. There is a special sprite.debug property you can use to better understand why the sprites interact the way that they do.

Do This

These two coins are round, so you would expect them to bounce in a certain way. Something weird is happening though!

  • Run the code and watch the way that the coins interact.
  • Use the sprite.debug block to make debug 'true' for both the sprites and run the code again.
  • Change the gold coin's starting x position to 51 and run the code again.
  • Discuss with a partner: Why do you think the coins are bouncing strangely?
View on Code Studio

Student Instructions

setCollider

Sprites interact based on the size and shape of their collider, not the images that are assigned to them. You can only see the collider when debug mode is turned on. You can change the shape of the collider using the sprite.setCollider() block, which lets you pick between a "rectangle" or a "circle". By default all colliders are "rectangle".

Do This

  • Find the sprite.setCollider() block for the gold coin, and change it from "rectangle" to "circle".
  • Add a new sprite.setCollider() block for the silver coin, and choose "circle" for the shape of the collider.
  • Run the code again to see how the sprites bounce.
View on Code Studio

Student Instructions

Bounciness

So far, bounceOff has made sprites bounce away from other objects as fast as they bounced into them. In the real world, almost everything slows down just a little bit when it bounces off something else. You can use the bounciness block to tell your sprite how much to slow down or speed up when it bounces off something else.

Do This

  • Read the code below and press "Run" to see the behavior of the basketball and pool ball.
  • Use a bounciness block to set the bounciness of your soccer ball.
  • Run the code again to see how the sprites bounce off the floor.
View on Code Studio

Student Instructions

Flyer Game - Add Obstacle

This is the flyer game you built in the last lesson. For the next several levels, you'll be adding an obstacle sprite to the game, using some of the sprite interactions you just learned. At the end you'll have a chance to keep adding on ideas of your own.

Do This

Add an obstacle sprite to the game. You can use whatever image you like from the animation tab but the example shown here uses a sun. Right now you just need to add the sprite to your game and give it an animation.

  • Add a new sprite to your game called "obstacle".
  • In the animation tab create a new animation for your obstacle. In the example a sun image was chosen.
  • Use the sprite.setAnimation() block to give your sprite the image you chose.
  • Run the code and make sure the sprite appears where you want it on the screen. You may need to set its X, Y, and scale properties to get it to look the way you want.
View on Code Studio

Student Instructions

Flyer Game - Interacting with the Obstacle

You don't want your player to be able to move through the obstacle, so you'll need to use one of the sprite interactions.

Do This

  • Add code to your game that prevents your player from moving through the obstacle.
  • If you use one of the bounce interactions, decide whether you want to reset the bounciness of your character.
  • Discuss with a neighbor: Which sprite interaction did you decide to use? Is there more than one sprite interaction that works the way you'd expect?
View on Code Studio

Student Instructions

Flyer Game - Coin Behind the Obstacle

Right now your coin is moving to random locations. That means sometimes it even will appear behind your obstacle, so your character can't get to it. Using sprite interactions you can fix this problem.

Do This

  • Add code to your game that prevents the coin from moving behind the obstacle. Don't be afraid to try out ideas just to see how they work.
  • Discuss with a neighbor: Which sprite interaction did you decide to use? Is there more than one sprite interaction that works the way you'd expect?
View on Code Studio

Student Instructions

Flyer Game - Change Colliders

Right now your colliders are all rectangular. Switch them over to circles to get more interesting and realistic bounces and collisions.

Do This

  • Use the sprite.setCollider() block to change the colliders of your sprites to circles.
  • Set your sprites' debug properties to true to make sure your game is working the way you want.
  • Play your game to make sure it's working the way you want.
View on Code Studio

Student Instructions

Flyer Game - Make It Your Own

Time to make this game your own by using what you've learned about sprite interactions.

Do This

Add at least one more aspect to your game that uses sprite interactions. There's some ideas below or you can choose to add features of your own. Make sure you're ready to share your ideas with your classmates.

  • Create "edge" sprites to keep your character from bouncing out.
  • Add platforms to the game for your character to navigate around.
  • Add another obstacle to your game.
  • Create another idea of your own.
  • Levels
  • Extra
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Free Play

Use what you've learned to create whatever you like. When you're finished, you can click to send your creation to a friend, or to send it to your Projects Gallery.

Standards Alignment

View full course alignment

CSTA K-12 Computer Science Standards (2017)

AP - Algorithms & Programming
  • 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.