Unit3
Ch. 1
1
2
3
4
5
6
7
8
9
10
11
12
13
14
Ch. 2
15
16
17
18
19
20
21
22

Lesson 15: Velocity

Overview

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.

Purpose

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.

In this lesson they are taught to use the velocity blocks to simplify the code for moving a sprite across the screen. This marks a shift in how new blocks are introduced. Whereas previously blocks were presented as enabling completely new behaviors, they are now presented as simplifying code students could have written with the blocks previously available. Over the next several lessons, students will see how this method of managing complexity allows them to produce more interesting sprite behaviors.

Assessment Opportunities

  1. Use the velocity and rotationSpeed blocks to create and change sprite movements

    See Level 9 in Code Studio. (Level 6 can also be used to check student use of the rotationSpeed block.)

  2. Describe the advantages of simplifying code by using higher level blocks

    In the wrap up, check students' descriptions of the blocks that they would create and why they would want to create them.

Agenda

Warm Up (15 min)

Activity (75 minutes)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Use the velocity and rotationSpeed blocks to create and change sprite movements
  • Describe the advantages of simplifying code by using higher level blocks

Introduced Code

Support

Lesson Forum

Report a Bug

Teaching Guide

Warm Up (15 min)

Demonstrate: Ask for a volunteer to come to the front of the class and act as your "sprite". Say that you will be giving directions to the sprite as though you're a Game Lab program.

When your student is ready, face them so that they have some space in front of them and ask them to "Move forward by 1". They should take one step forward. Then repeat the command several times, each time waiting for the student to move forward by 1 step. You should aim for the repetitiveness of these instructions to be clear. After your student has completed this activity, have them come back to where they started. This time repeat the demonstration but asking the student to "Move forward by 2" and have the student take 2 steps each time. Once the student has done this multiple times ask the class to give them a round of applause and invite them back to their seat.

Prompt: I was just giving instructions to my "sprite", but they seemed to get pretty repetitive. How could I have simplified or streamlined my instructions?

Discussion Goal

Goal: The earlier demonstration should have reinforced the fact that repeatedly giving the same instruction is something you would never do in real life. You would instead come up with a way to capture that the instruction should be repeated, like "keep moving forward by 1."

Discuss: Give students a minute to write down thoughts before inviting them to share with a neighbor. Then have the class share their thoughts. You may wish to write their ideas on the board.

Remarks

One way to simplify these instructions is just tell our sprite to keep moving by 1 or 2, or however many steps we want. This would make instructions as humans easier to understand, and as we're about to see there's a similar way to make our code simpler as well.

Show: Sprite Velocity Video

Display: On the board, write the following pieces of code.

  • sprite.velocityX = 4;
  • sprite.velocityY = -1;
  • sprite.rotationSpeed = 2;

Teaching Tip

Check for Understanding: This is just a quick check for understanding after the video. Students are quickly prompted to see if they understood the main point of the video and if not you have an opportunity to reinforce it before moving into the Code Studio levels. Leave the translation from the velocity blocks to their associated counter pattern on the board to reference throughout the lesson.

Prompt: We just saw how these new blocks help us simplify the counter pattern we used to move sprites. On a sheet of paper write down the counter pattern each of these lines of code is replacing.

Discuss: Have students write their ideas on a sheet of paper before discussing their responses as a class. Eventually write the correct answers on the board next to each, as shown below.

  • sprite.x = sprite.x + 4;
  • sprite.y = sprite.y - 1;
  • sprite.rotation = sprite.rotation + 2;

Remarks

These new "higher level" blocks are helping us to write code that we actually already knew how to write. They're simplifying our code for us by hiding some of the unnecessary details. As we're about to see, however, these new blocks will change the kind of programs and games we're able to write.

Activity (75 minutes)

Teaching Tip

Inside or Outside the Draw Loop?: For the first few puzzles, check to make sure that students are setting the velocities and rotation speeds outside the draw loop, immediately after they create their sprites. The code will work for the first few puzzles, even if they set the velocities inside the draw loop, but it will cause problems later.

Learning to Use the Velocity Blocks

Transition: Move students to Code Studio

Circulate: These levels introduce the velocityX, velocityY, and rotationSpeed properties that you just discussed with students. Check in with students to see how they are doing and keep track of when everyone has made it to the end of level 10.

If students are finished early, encourage them to experiment with different aspects of the scroller game they created. They can change the animations, create a background, etc.

Wrap Up (5 min)

Journal

Assessment Opportunity

As students describe the blocks that they would make, ensure that they are relating the specific code that a block would use to the higher-level concept of what it would do. For example, a "velocity" block would move a sprite across the screen, and it would include blocks that use the counter pattern on a position property.

Students should describe advantages of having these blocks, such as not needed to re-write the code all the time, or making it easier to read what the program is doing.

Prompt: You learned a few new blocks today. As first glance, these blocks did the same sorts of things we'd already done with the counter pattern, but made it simpler for us to do them. 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?

Remarks

All of the movements that we did today are possible without the new blocks, but it would be very complicated to code them. One of the benefits of blocks like velocity is that when we don't have to worry about the details of simple movements and actions, we can use that extra brain power to solve more complicated problems. As you build up your side scroller game, we'll keep looking at new blocks that make things simpler, so we can build more and more complicated games.

View on Code Studio

Discussion Goals

It may not be obvious to students why the velocity block is so powerful. The immediate answer is that the velocity block allows a programmer to set the velocity at the beginning of the program and not have to worry about the counter pattern inside the draw loop (as Game Lab will take care of that). If students are having trouble of thinking of situations in which the velocity block provides a big advantage, assure them that they will tackle some problems in the coming lesson that they will need this block for.

As students give you examples, try to elicit answers that use both positive and negative numbers, and that use the x and y positions as well as sprite rotation.

View on Code Studio

Questions to Consider

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

Download Video

View on Code Studio

Student Instructions

velocityX

One way to move sprites in Game Lab is with the counter pattern. For example sprite1.x = sprite1.x + 1 moves a sprite by 1 pixel each frame of the draw loop. This pattern is so common that sprites have a velocityX property that does this for you.

Do This

  • Drag a sprite.velocityX block directly below where your sprite is created.       ( Show me where )
  • Write the name of your sprite in the block.
  • Assign the velocityX property a value of 1.
  • Run the code. What happens?
  • Re-run the code giving the velocityX property a different value. What's changing?
View on Code Studio

Student Instructions

Moving Down

Here is a feather sprite that should be floating down the screen. If velocityX makes a sprite move to the right, can you find the block that will make the feather move down?

Do This

Find the block that will make the feather sprite go down the screen, and use it outside the draw loop.   ( Show me where )

View on Code Studio

Student Instructions

rotationSpeed

You've already learned how to make your sprite spin by using the rotation block. For example, when you wanted your sprite to rotate by two degrees each time it was drawn, you put sprite.rotation = sprite.rotation + 2 inside the draw loop.

Now, you can use rotationSpeed to make your sprites rotate by a certain amount each time they are drawn. If you want your sun to rotate by two degrees each time it's drawn, you can use sun.rotationSpeed = 2 before the draw loop, after you create your sprite.

Do This

Make the sun rotate by 3 degrees each time using the rotationSpeed block. ( Show me where )

View on Code Studio

Student Instructions

Controlling Speed

You used rotatationSpeed outside the draw loop to make your sprite rotate when your program started. You can also use rotationSpeed inside the draw loop to change the speed of the sprite during the game. For example, a sprite can start rotating when the user presses the space bar, and it will keep rotating until it's told to stop.

Do This

  • Look at the if statement inside the draw loop that checks whether the space bar has been pressed. ( Show me where )
  • Use the rotationSpeed block to make the color wheel start spinning when the user presses the space bar.
View on Code Studio

Student Instructions

Controlling Speed

Your code before the draw loop sets up the beginning of your game. Your code inside the draw loop controls how the game will change while it's being played. In this game, the helicopter bot starts off at the bottom of the screen, but when the space key is pressed, it flies up.

Do This

  • Use an if statement inside the draw loop to check when the space bar is pressed.
  • Use the velocityY block to make the sprite fly up when the user presses the space bar. The sprite should keep moving up even after you let go of the space bar.
View on Code Studio

Student Instructions

Changing Velocity with Position

One advantage to using the velocity blocks inside conditionals (if blocks) is that your sprite keeps moving, even after the condition stops being true. For example, you only had to press a key once to launch your fly bot, and it kept flying forever. The code below uses if statements to make a fish sprite move in different directions.

Do This

  • Look at if statements that check the sprite's position and set its velocity.
  • With your partner, discuss what you think the code will do, and write your answer below.
  • Once you have submitted your answer, run the code.
View on Code Studio

Assessment Opportunities

Key Concepts:

Use conditionals to control the flow of a program; model two dimensional movement on a coordinate plane.

Assessment Criteria:
Extensive Evidence

Pressing the right arrow key once causes the fish to swim to the right side of the screen, turn and swim to the left side of the screen, then stop. There are no extra blocks in the program, and the counter pattern is not used.

Convincing Evidence

Pressing the right arrow key once causes the fish sprite to swim right across the screen. The counter pattern is not used.

Limited Evidence

Pressing the right arrow key once causes the fish sprite to move across the screen in some way.

No Evidence

Pressing the arrow key does not cause movement, or the movement stops as soon as the key is let up.

Student Instructions

Multiple Controls

As you saw in the last level, you can change the sprite's velocity with multiple if statements. In this program, the fish has three different types of movement, each of which should be controlled by its own if statement.

Do This

  • Look at the three if statements inside the draw loop.

  • Use a sprite.velocityX block inside each if statement to make the three following movements:

  • If the user presses the right arrow key, move the fish to the right.
  • If the fish gets to the right-hand side of the screen, move the fish to the left.
  • If the fish gets to the left-hand side of the screen, stop the fish.
View on Code Studio

Student Instructions

Jumping

You now have all the blocks you need to make your sprite jump! The sprite should jump up if it's on the ground and the user presses the "up" key, then should start moving back down when it reaches the top of its jump.

Do this

  • Find the if statement that checks whether the sprite is on the ground, and look at the if statement inside of it that checks whether the user has pressed the "up" arrow key. ( Show me where )
    • Make the frog jump up when the user presses the arrow key.
    • Make the frog stop moving otherwise.
  • Add code that does the following ( Show me where )
  • Checks whether the frog sprite has reached its highest point.
  • If so, make the sprite go back down.
View on Code Studio

Student Instructions

Mushroom

Now you just need something for your sprite to jump over. This program already has a mushroom just past the right edge of the screen, but it needs to move toward your frog.

Do this

  • Use the velocityX block to make the mushroom move left across the screen.

Hint: The mushroom should start moving at the very beginning of the game, and never change, so should it be inside or outside the draw loop?

View on Code Studio

Student Instructions

Looping

The game will be more fun if the frog can jump more than once. You can make the mushroom "loop" by checking whether it's moved past the left edge and moving it back to the right edge when it has.

Do this

  • Find the if statement that checks whether the mushroom has passed the left edge. ( Show me where )
  • Use the sprite.x block to set the mushroom's position back to the right edge if it has.
  • 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.