Lesson 12: Conditionals and 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.
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.
Warm Up (5 min)
Activity (40 min)
Wrap Up (5 min)
Students will be able to:
- Use conditionals to react to keyboard input
- Move sprites in response to keyboard input
For the Students
Warm Up (5 min)
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?
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)
Transition: Send students to Code Studio
Wrap Up (5 min)
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
Prediction - keyDown()
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.
- 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.
You saw on the last level that
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!
- Run the code and try pressing the "p" and "h" keys.
- Look inside the
ifstatement to see how the code works.
- Add a block inside the third
ifstatement 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?
You can change your sprite's position based on key presses in the same way you changed its animations.
- Add an
ifstatement 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?
Fish With Arrows
The fish are back. Can you make the fish move left only when the left arrow key is pressed down?
- 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.
Gears with Conditionals
Let's make the gears spin only when the space key is being held down.
- Add an
keyDownas input to the if statement to check when the space key is pressed.
- Move the code that makes the gears rotate inside the
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.
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
- (click tabs to see student view)
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.
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.
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.
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.