Lesson 12: Conditionals and User Input

Overview

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 the first big step toward creating games.

Agenda

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 Students

Introduced Code

Teaching Guide

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 allow 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?

Activity (40 min)

Keyboard Input

Transition: Send students to Code Studio

Wrap Up (5 min)

Considering Conditions

Prompt: To get students to continue thinking about how conditionals can be used in programming, prompt them to come up with scenarios in games or programs they use regularly that might be triggered by conditionals.

Discuss: Have students share responses. Student responses might include:

  • If my username and password are correct, log me into Facebook
  • If Pacman has collected all the balls, start the next level
  • If my keyboard or mouse hasn't moved in 10 minutes, turn on the screensaver
View on Code Studio

Student Instructions

Prediction - keyDown()

The keyDown() block is the first of a new set of blocks that will let us get input from the user. This is the first step on our road to actually making games! 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 how the code will run 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.
View on Code Studio

Student Instructions

Changing Sprites

You saw on the last level that keyDown returns true while you are holding a key down and false when the key is not pressed down. The input for the keyDown command is the name of key you want to check in quotes. Some examples are "x", "up" and "space".

We can use keyDown as an input to an if statement to change our animations based on key presses!

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.

Challenge: When you use setAnimation, it keeps the new animation until you change it again. Can you change the code so that the sprite will automatically go back to a giraffe when you're not holding one of the keys down?

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

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

Gears with Conditionals

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

Do This

  • Add an if statement.
  • Use keyDown as input to the if statement to check when the space key is pressed.
  • Move the code that makes the gears rotate inside the if.
View on Code Studio

Student Instructions

Move in All Directions

Once you've got your sprite moving in one direction by responding to a keyDown, getting it to move in all four directions should be more of the same. The basic keyboard control that you're developing here will become the basis for many of the games you make down the road.

Do This

The bug sprite you made that responds to the right arrow has been brought to this level. Add the interaction for the other three arrow keys!

  • Add three if statements - one for each arrow.
  • Each if statement should move the sprite in the direction of the arrow.

HINT: Make sure you consider both the axis (x or y) of movement, and whether you need to increase or decrease that value.

  • Keyboard Input
  • 9
  • (click tabs to see student view)
View on Code Studio

Student Instructions

Changing Images as you Move

Right now your conditionals only do one thing (change your sprite's x or y), 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.

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

Challenge

Check with your teacher before trying this challenge.

Here's the bug program you've been working on for the past few levels. Choose one or more of following challenges, or add new features of your own!

  • Use the "space" key to control another property of your bug sprite, such as rotation or scale.
  • Add some randomization to your movement.
  • Add a second sprite and control it with a different set of keys ("w", "a", "s", and "d" are common choices).
  • Add some shapes to your background to make the scene more interesting.
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.