Side Scroller 7

Step 1
Random Apples

In this lesson, we will be learning to place things randomly throughout the scenes we made by having the program generate a random number for us.

Functions used in this lesson:

  • color()
  • random()
  • round()
Step 2
Define a new function to display your current mission

This function, showMission will take one input parameter, mission.

It will display whatever you give as the input mission at the top of the screen.

Step 3
Show the mission

At the bottom of the movePlayer function, add a new if statement to display a mission to find the missing apples once the message has finished.

Check Your Work
Step 4
See your new mission

To skip having to take to the villager ever time you want to see the mission, temporarily change messageFinished to true in your setup function.


Save and Run to see the mission show up in your game.

Step 5
Make an apple object.

Before you do this code you will need to declare a variable for apple!

Then, assign apple to an object in the setup function.

Step 6
Define a function to draw the apple

Define a function called drawApples that draws a bright red ellipse with the apple's properties.

Step 7
Draw the apple

Call your drawApples function in the same place where you show the mission, once the message has finished.

Step 8
The color function

We can use the color function to save colors as variables. It takes the same input parameters as fill, stroke or background.

Here are some examples:

var crimson = color(200, 0, 0) // this will be a dark red
ellipse(250, 250, 100, 100) // this will put a dark red circle in the middle of the canvas

var cyan = color(0, 255, 255) //bright aqua blue
background(cyan) //will make this bright aqua the background color

var purple = color(175, 0, 175) // make a purply magenta color
line(0, 0, 500, 500) // will make a purple diagonal line across the canvas
Step 9
Give the apple a color property

Add a property called color that uses the color function to save a color for the apple. This one should be bright yellow.

Step 10
Show the apple's true colors

Change the drawApples function to make the apple the color that is its .color property.

Check Your Work
Step 11
Check out the apple.
Step 12
The random function

Programs are very good at picking random numbers for us. We can use random numbers to make unexpected and changing aspects to our games.

In the pJS library that we use, you can do this with the random() function.

Here are some examples:

var myNumber = random(1, 10) // will pick a random decimal number between 1 and 10

var mySmallNumber = random() // this picks a decimal between 0 and 1

var myLargeNumber = random(100, 1000) // picks a decimal number between 100 and 1000

Add the code below at the beginning of your draw function and open the console to see the kind of numbers it generates.

Step 13
Make the apple a random color

Since apples can be red, yellow, or green, we're going to change the apple's color property to take a random amount of red and a random amount of green to get a different colored apple each time we run the game.

Check Your Work
Step 14
Check out the apple's new color

Press Save and then press Run a couple times to see all the different colors your apple can be.

Step 15
Give the apple a scene to be in.

Right now, the apple shows up in all of your scenes. Since we only want it to be in one place at once, we need to give it a "scene" property to say which scene it should show up in.

Step 16
Change the function to draw the apple in the correct scene

We need to add an if condition around all the code inside the drawApples function, so that the apple is only displayed if the current scene number matches the apple's scene number.

Check Your Work
Step 17
Find the apple in Scene 2

Save and Run and move your player to the correct scene to find the apple there. Make sure it doesn't show up in any other scenes.

Step 18
The round function

As we have seen before, the random function always gives us a number with decimals. In programming, we often call this a float number, short for "floating point decimal".

This is fine for color values, but often times it doesn't make sense to have a decimal, and you need only whole numbers instead, called integers.

For example. it wouldn't make sense to have 0.58 people, would it?


To turn a float into an integer, we need to round it, which just means to find the whole number that it is closest to. In pJS, we can use the handy round function.

Change the test code in your draw function to round the randomly generated number, and check out the number it gives you in the console.

Step 19
Give the apple a random scene

Use the round and the random functions to make the apple's scene a random integer. Here, the random number is between 1 and 7 because my last scene is 7. Yours may be higher or lower.

Check Your Work
Step 20
Find the apple!

Your apple will now be in a random scene. You will need to run around the different scene to find which one it was placed in. It will be different each time you run your code.

Step 21
Make variables to count the apples

Declare a variable called applesCollected and assign it to 0 in the setup function.

Then, declare a variable called applesTotal and assign it to 1 in the setup function.

Step 22
Define a function to show how many apples you have collected

Define a function to show how many apples you have collected so far out of the total number of apples, at the bottom of the screen.

Then, call that function in the movePlayer function, when the message has finished.

Temp1541100819 Temp1541188479
Check Your Work
Step 23
Check out your "Apples Collected" data

Save and Run to see your apple collecting progress appear.

Step 24
Check when the player is overlapping the apple

You will need to use an if statement, as well as your think() and isOverlapping() functions

Check Your Work
Step 25
Save and Run and go find that apple!
Step 26

You may have noticed that the thought bubble appears in every scene, regardless of whether the apple is there. Use && to add another condition to make it only happen in the same scene as the apple.

Step 27
Collect the apple!
Check Your Work
Step 28
Step 29
Give the apple a new property

Give the apple a new property called collected which starts out as false

Step 30
Check Your Work
Step 31
Collect the apple again

Find your apple and press "Enter" while overlapping it to collect it again. This time it should disappear!

Step 32
Put the apple in a random place!

Now that your apple starts in a random scene, we need to make it show up in a random place in that scene.

Change the apple object's X property from 300 to a random number between 0 and 500, using the random function.

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