Student Instructions

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?

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?

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.

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.

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.
• Don't forget to include a comment for each if statement!
• 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.

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.

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.

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.