Side Scroller 3

Planning
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,

Temp1540235528

`

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.

Temp1538506569
Challenge
Step 3
Do this for the other side

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

Temp1538506597
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
Challenge
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.

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

Temp1538508602
Check Your Work
Step 7
Try moving off the edges

What on earth happened?

Temp1538508852

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

Information
Step 8
Else statements

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

Temp1538678201
  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
Temp1538511216
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.

Temp1538516738
Information
Step 11
Else If
Temp1538689970
Step 12
Make scene 2
Temp1538764953

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
Temp1538765297
Challenge
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.

Temp1539123333

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!

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

Temp1539124278
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!

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