Side Scroller 2

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.

Check Your Work
Step 5
Save and Run

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

Project template copy   mvcode clubs   edited
Step 6
Move the player to the left

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

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.

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.

Check Your Work
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.

Step 15
=== vs =

=== means "is this equal to that?"

= means "set this equal to that


x === 7 means "does x equal 7?"

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.

Check Your Work
Step 17
Test out your player movement

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

Project template copy   mvcode clubs   edited %281%29
Step 18
Make another input variable

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

1.Declare a new variable called interact

2. Assign interact to false in the setup function

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)

Hint: Remember how to use if-statements

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

Check Your Work
Step 19
Test out your new interaction

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

Step 20
Answers to Step 18

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


MVCode Clubs

Created By

Mandala2 slinkous


Side Scroll Adventure

Access Level


For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach