Side Scroller 7

Planning
Step 1
Random Apples
Temp1541102163

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.

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

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

Temp1541189013

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

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

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

Temp1541097071
Step 7
Draw the apple

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

Temp1541097241
Information
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
fill(crimson)
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
stroke(purple)
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.

Temp1541097512
Step 10
Show the apple's true colors

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

Temp1541097638
Check Your Work
Step 11
Check out the apple.
Temp1541097698
Information
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.

Temp1541188706
Step 13
Make the apple a random color
Temp1541099584

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.

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

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

Temp1541100032
Check Your Work
Step 17
Find the apple in Scene 2
Temp1541100109

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.

Information
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?

Temp1541187312

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.

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

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

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

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

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

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.

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

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

Step 30
Temp1541101998
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!

Challenge
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

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