Side Scroller 8

Step 1
Repeating code

In this lesson, we're going to learn how to make our program repeat code, without having to copy and paste it over and over. We'll use this to make lots of apples and places for them to hide.

Step 2

A loop is a way to tell the program to repeat some code. You have already used one important loop, the draw function. It repeats the functions we put inside it over, and over again, so that we can create information. You may notice that the draw function never really stops, it just starts over when you run the program again.

If you were to add the code below in to the draw loop, you could see what your project is like without a loop.


Be sure to take out the noLoop function once you are done testing it!

Step 3
Change your "apple" variable to "apples"

We're going to make an array for all the apples. Change the variable that you declared for apple to have an "s" at the end.


Then, in the setup function, assign apples to an empty array.

Step 4
The array "push" method

The array push method is a way to add a new element to the end of an array.

In this example, we have three superheroes in an array, and want to add one more in:


What will superheroes.length be now?

Step 5
Push an apple object into the array

Use the push method to put the object you made for one apple into your apples array.

Step 6
Draw the first apple

Change the code in your drawApples and collectApples functions to draw and collect the first apple in the apples array.

Check Your Work
Step 7
Test that your apple is working again.

Save and Run. You should be able to find your random-colored apple in a random scene, and collect it just like before.

Step 9
While Loops

A while loop works like an if statement: it only does its code if the condition is true.

The big difference is that a while loop keeps repeating that code until the condition is false.

Step 10

We can use this to keep adding apples into the array. Once there are 20 apples, apples.length will not be less than applesTotal, so the loop will stop.

Step 11
Using a while loop with a counter

There are many times when we want to repeat code a specific number times, and you can do this with a while loop. There are three different steps:

  1. Make a variable to be your counter. We usually start this at 0.

  2. Make a while loop with the condition that the counter is less than its maximum number.

  3. Make sure the counter counts up inside the while loop.


Step 3 is EXTREMELY IMPORTANT. If you skip this part, you will have an infinite loop.

Step 12
Use a while loop to do the same code for each apple in the array
  1. Make a variable to be the counter. This time we just call it c to keep things short.
  2. Make a while loop that should continue until c gets to the total number of apples.
  3. Make sure c increases by one each time the loop happens.
Step 13
Give the index for all the apples

Right now our code draws the same apple 20 times. To make it switch to each apple in the array, we need to use c as our array index

Step 14
For Loops

While loops will work to use a counter, but there is a type of loop that is made specifically for this purpose: the for loop!

It has all the same steps as using a while loop with a counter, but we do them all in one place.


Why are we using i as our counter? Programmers often do this, because "i" stands for "iterator" which is a thing that repeats. You can use any variable name.

Step 15
Use a for loop to collect the apples
Check Your Work
Step 16
Look at all these apples!

Increase your applesTotal variable to 20, and Save and Run your project to see all the apples appear.

Step 17
Make a boxes array and push in a box

Finding all the apples is easy when they are in plain sight. To complicate the challenge, we're going to add some obstacles that hide the apples.

Make a variable and assign it to an empty array in setup. Then use the push method to add in a box to the array.

Step 18
Make 20 boxes

Use a while loop to repeat this code until there are 20 boxes in the array.


Hint: Check out Step 9 to see how you did this with the apples.

Step 19
Draw the boxes

Make a new function called drawBoxes, and use a for loop to make it draw all the boxes in the boxes array.


Hint: Look at step 14 to see how you did this to collect the apples.

Step 20
Check out those mysterious boxes!

Call drawBoxes as the last thing in your draw function, and Save and Run to see them appear!

Step 21
Answers to Steps 18 and 19

A while loop to keep adding boxes until there are 20:

Temp1543954341 Temp1543954787

A for loop to go through all the boxes in the array and draw a rectangle for each of them.

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