Side Scroller 2

Planning
Step 1
Let's get interactive!
Temp1540236025

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.

Temp1539197656
Step 3
Change the player's X position

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

Temp1539197685
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.

Temp1537555930
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
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
Temp1537481054
Step 9
Assign Boolean values

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

Temp1537481347
Information
Step 10
Conditional Statements

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

Temp1539198149
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.

Temp1539198496
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.

Temp1537557294

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.

Temp1537481859

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.

Temp1537482168
Information
Step 15
=== vs =

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

= means "set this equal to that


Example:

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.

Temp1539199227
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
Challenge
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!

Temp1538506226
Information
Step 20
Answers to Step 18

Declaring and assigning the interact variable.

Temp1543890850

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

Temp1543891119

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

Temp1543891245
Side Scroller 2 Info

Account

MVCode Clubs

Created By

Mandala2 slinkous

Course:

Side Scroll Adventure

Access Level

premium

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