Side Scroller 2

Planning
Step 1
Let's get interactive!

In this lesson, we will be learning:

1. How to use the special functions that detect key presses from your keyboard
2. A special type of variable called a Boolean
3. How to use "if" statements to make code run only when you press a key
Step 2
Define a function to move the player

Create a new helper function called `movePlayer` where we will put the code for the player's movement.

Step 3
Change the player's X position

Add this code to increase the x of the player by `2`

Step 4
Call the move player function in draw

To make the player move, we need to call the `movePlayer()` function in our main `draw` function.

Step 5
Save and Run

Press Save and Run to see the player move to the right

Challenge
Step 6
Move the player to the left

Change the code in your `movePlayer` function so that the player moves to the left instead.

Planning
Step 7
Using the keyboard to control the player

Next, we are going to control the player's movement with the keyboard.

We will do this by:

1. Making variables to tell us if we should be going left or right
2. Using the special User Input functions to change those variables based on the key code of the key that was pressed
3. Changing the `movePlayer` function to move the player based on the key variables
Step 8
Declare two more variables
Step 9
Assign Boolean values

A Boolean is a value that can only be either `true` or `false`.

Information
Step 10
Conditional Statements

Code with `if` is called conditional because it will only run if the part between parentheses ( ) is true.

Step 11
Change the player's movement with conditional statements

Change the `movePlayer` function to increase the player's x only if the variable `right` is true, and decrease the player's x only if the variable `left` is true.

Step 12
Test out the movement logic

To test out that the `movePlayer` function is working correctly, change the `right` variable to `true` and press "Run".

Next, change `right` back to `false`, and `left` to `true`.

Once these have both done what you expect, make sure `right` and `left` are both `false` again.

Step 13
Define functions for keyboard inputs

`keyPressed` and `keyReleased` are special functions that activate when the keyboard is used.

Like `draw` and `setup`, you don't have to call them. They will work automatically as long as you match the name exactly.

Step 14
Use conditional statements to check key codes

Code in the `keyPressed` function will run when any key is pressed. We use a conditional statement so that our variables only become `true` if the correct key was pressed.

Information
Step 15
=== vs =

`x = 7` means "set x equal to 7"

Step 16
Make the variables false when the key is released

We need to make `right` and `left` false again when the user stops pressing those keys. Add this code in your `keyReleased` function to switch them back.

Step 17

To test this out, press Save and Run.

Then, click on the game to make it listen to your keyboard inputs.

Finally, use the left and right arrow keys to move the player

Challenge
Step 18
Make another input variable

Your challenge is to make another input function that uses the "Enter" key. Here are the steps:

3. In the `keyPressed` function:

``````//if the keyCode is ENTER
//set interact to true
//
``````

4. In the `keyReleased` function:

``````//if the keyCode is ENTER
//set interact to false
//
``````

5. In the `movePlayer` function:

``````//if interact is true
text("Hello!", player.x, player.y)
//
``````

Super Hint If you are completely stuck, scroll down to the last step for the answer.

Step 19

Save, run, click on the project and press the "enter" key to see the text that gets displayed!

Information
Step 20

Declaring and assigning the `interact` variable.

Making interact true and false when the enter key is pressed and released:

Making the player say "Hello" when the `interact` variable is true:

Side Scroller 2 Info

Account

MVCode Clubs

Created By

Course: