Side Scroller 3

Step 1
The adventure begins!

In this lesson, we are going to learn to use else and else if to make more scenes for your player to travel through,



Step 2
Wrap the player back around

What happens if the player goes off the edge of the scene?

Add this code so that if the player goes past the right edge, they start again at the left edge.

Step 3
Do this for the other side

Use another if statement to wrap the player around the opposite side.

Check Your Work
Step 4
Walk around the scene

Test that your player wraps back around both sides when you move with the arrow keys

Project template copy   mvcode clubs   edited %282%29
Step 5
Make a scene number variable that changes when the player wraps around.
  1. Declare and new variable called scene and assign it to 1 in the setup function.

  2. Make the scene number increase when the player moves off to the right, and decrease when the player moves off to the left.

Step 6
Add an "if" condition around the scene

In the drawScene function, and an condition to make this code only run if the scene number is 1.

Check Your Work
Step 7
Try moving off the edges

What on earth happened?


The background scene isn't drawing anymore, so the player just gets drawn over and over again on top of it.

Step 8
Else statements

To make more scenes, we are going to need to use the special keyword else.

  1. You must have an if already to use an else
  2. else goes on the same line as the } that closes the if code. This is the only time, ever, you will put something on the same line after }
  3. else does not have ( ). It runs only if the if condition is false.
Step 9
Check Your Work
Step 10
Test out your new scene

Use the arrow keys to move the player past the edges of the canvas to see this new scene.

Step 11
Else If
Step 12
Make scene 2

Using an else if with the condition that the scene is set to 2, add elements to draw a second scene.

You can copy and paste the blue sky and the ground from scene 1.

Check Your Work
Step 13
Step 14
Design Scene 3

Your challenge is to make a third scene using another else if statement. Remember that it must come before the final else

You can copy and paste code from other scenes, but be sure to have at least three differences from previous scenes: different colors or new elements.


Here are some ideas:

  • A desert with a cactus, like this one
  • a snow scene with a snowy hill
  • a night time scene with a moon and stars
  • a giant castle
  • a mysterious cave
  • on the moon

Let your imagination be your guide!

Step 15
Add a sign to the scene

To make a sign, we will need to declare a variable called sign, and assign it to an object in the setup function with the following properties:

  • x is 325
  • y is 250
  • width is 100
  • height is 50

Then, define the helper function below and call it in your drawScene function.

Check Your Work
Step 16
Check out your new sign

If the sign is not showing up, make sure that you called it in the drawScene function!

Side Scroller 3 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