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

Lesson 15: Keyboard Input

Overview

Question of the Day: How can our programs react to user input?

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.

Purpose

One common way conditionals are used is to check for different types of user input, especially key presses. Having a way for a user to interact with a program makes it more interesting and dynamic. Without interaction from the user it is very difficult to create a game. Therefore the introduction of conditionals and user inputs for decision making is a critical step toward creating games.

Assessment Opportunities

  1. Use conditionals to react to keyboard input

    See Level 7 in Code Studio.

  2. Move sprites in response to keyboard input

    See Level 7 in Code Studio.

Agenda

Lesson Modifications

Warm Up (5 min)

Activity (40 min)

Wrap Up (5 min)

View on Code Studio

Objectives

Students will be able to:

  • Use conditionals to react to keyboard input
  • Move sprites in response to keyboard input

Links

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

For the Teachers

Introduced Code

Support

Report a Bug

Forum

Teaching Guide

Lesson Modifications

Attention, teachers! If you are teaching virtually or in a socially-distanced classroom, please see these modifications for Unit 3.

Warm Up (5 min)

Discussion Goal

The goal here isn't to get into the technical specifics of how programs can take input (students will get to that in the online portion of the lesson), but rather to get students thinking about how user input could change the programs they've made. Encourage students to think back to Unit 1 and the various computer inputs and outputs they explored then. Which inputs would be most useful for the types of programs they've been making?

Taking Input

Discuss: So far all of the programs you've written run without any input from the user. How might adding user interaction make your programs more useful, effective, or entertaining? How might a user provide input into your program?

Question of the Day: How can our programs react to user input?

Activity (40 min)

Keyboard Input

Transition: Send students to Code Studio

Wrap Up (5 min)

Adding Conditionals

Question of the Day: How can our programs react to user input?

Journal: Think back to all of the programs you've written so far; how might you use user interaction to improve one of your programs from past lessons? What condition would you check, and how would you respond to it?

  • Lesson Overview
  • 1
  • (click tabs to see student view)
View on Code Studio

Student Instructions

  • Prediction
  • 2
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Prediction - keyDown()

See if you can predict how the keyDown() block works. You will not write any code.

Do This

  • Read the program carefully.
  • Make a prediction about what will happen when you press the space bar and write it in the box below. Be specific!
  • Run the program.
  • While the program is running, press the space bar on your keyboard.
  • Were you correct? Were you surprised? Discuss with a classmate.
  • Skill Building
  • 3
  • 4
  • 5
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Changing Sprites

This program uses the keyDown block to detect whether a specific keys are being pressed down.

Do This

  • Run the code and try pressing the "p" and "h" keys.
  • Look inside the if statement to see how the code works.
  • Add a block inside the third if statement to change the animation to a different animal.
View on Code Studio

Student Instructions

Moving Sprites

You can change your sprite's position based on key presses in the same way you changed its animations.

Do This

  • Add an if statement inside your draw loop.
  • Check whether the right arrow key has been pressed down.
  • Add code inside the conditional to move the sprite right if the right arrow is down.

Do you need to change sprite's x or y property to move it right?

View on Code Studio

Student Instructions

Gears with Conditionals

Let's make the gears spin only when the space key is being held down.

Do This

  • Add code that checks whether the space key is being pressed down.
  • Move the code that makes the gears rotate so that they only rotate when the key is pressed down.
View on Code Studio

Student Instructions

Practice keyboard input with these activities.


Choose from the following activities:
a
Fish With Arrows

Make the fish move left only when the left arrow key is pressed.

b
Debug Turtle Movement

Find the bug that breaks the program when the turtle tries to move left.

c
Debug Turtle Movement 2

Debug why the turtle does not move at all and leaves after images.

View on Code Studio

Student Instructions

Fish With Arrows

The fish are back. Can you make the fish move left only when the left arrow key is pressed down?

Do This

  • Add an if statement to check when the left arrow key is pressed down.
  • Move the commands for moving the fish inside the if statement.
View on Code Studio

Student Instructions

Debug Turtle Movement

This turtle program breaks every time it tries to move to the left.

What I expected to happen What actually happened How to reproduce the error
The turtle moves to the left everything stops working press the left arrow key

Do This

  • Run the program and play with it until you see the bug.
  • Use the clues to find the bug and fix it.
View on Code Studio

Student Instructions

Debug Turtle Movement 2

Debug why the turtle does not move at all.

What I expected to happen What actually happened How to reproduce the error
The turtle moves with the arrow keys The turtle almost stays in
the same place and leaves after images

Do This

  • Run the program and play with it until you see the bug.
  • Use the clues to find the bug and fix it.
  • Assessment
  • 7
  • (click tabs to see student view)
View on Code Studio

Assessment Opportunities

Key Concepts:

Detect and respond to user input from the keyboard.

Assessment Criteria:
Extensive Evidence

The sprite moves correctly in response to all four arrow keys. There are no extra if statements.

Convincing Evidence

The sprite moves in response to multiple arrow keys, but may have some errors.

Limited Evidence

The program uses an if statement to detect user input.

No Evidence

The program does not detect user input.

Student Instructions

Move in All Directions

You can make a simple game that moves a sprite around the screen.

Do This

  • Add four separate conditional statements that make the wing bot move in every direction.
View on Code Studio

Student Instructions

Try out these new blocks and challenges with keyboard input.


Choose from the following activities:
a
keyWentDown: Click Counter

Count how many times someone has clicked the space bar, and learn a new block.

b
Changing Animation

Use a separate image for each direction of movement.

c
Free Play

None

View on Code Studio

Student Instructions

Responding to a Single Click

This game counts how many times someone pressed the space bar, but it keeps giving points when the space bar is still pressed, even if it's not a new press.

The block keyWentDown will only give a point for new presses, so it's a better choice for this program.

Do This

  • Run the program to see how it works.
  • Change the code to use the keyWentDown block, so the program only gives you a point for new clicks.
View on Code Studio

Student Instructions

Changing Images as you Move

Right now these conditionals only do one thing (change the sprite's x or y position), but you can actually put as much code as you want inside a conditional. A common thing to do in games is to change your character's image depending on which direction they're walking. You're going make a bug that always faces the direction it is moving.

Do This

Using the provided program and images:

  • Duplicate your chosen bug image four times.
  • Edit each of your images to point in one of the four directions.
  • Write code that uses sprite.setAnimation() to change the image on your bug sprite when different arrow keys are pressed.
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-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.