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
Declare a new Boolean variable

Define a new variable called missionReceived and set it to false in the setup function.

Once you have done that, set it to true once the player has seen all of the message.

Step 3
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 4
Show the mission

At the bottom of the draw function, add a new if statement to display a mission to find the missing apples once the mission has been received.

Check Your Work
Step 5
See your new mission

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


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

Step 6
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 7
Define a function to draw the apple

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

Step 8
Draw the apple

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

Step 9
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 10
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 11
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 12
Check out the apple.
Step 13
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 14
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 15
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 16
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 17
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 18
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 19
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 20
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 21
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 22
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 23
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 draw function, when the message has finished.

Temp1541100819 Temp1548795806
Check Your Work
Step 24
Check out your "Apples Collected" data

Save and Run to see your apple collecting progress appear.

Step 25
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 26
Save and Run and go find that apple!
Step 27

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 28
Collect the apple!
Check Your Work
Step 29
Step 30
Give the apple a new property

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

Step 31
Make sure you only see and think about the apple when it has not been collected
Check Your Work
Step 32
Collect the apple again

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

Step 33
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.

Step 34
The complete apple object

This is what your apple object should look like once you are finished

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