Side Scroller 8

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

Temp1544037045
Information
Step 2
Loops

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.

Temp1543872557

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.

Temp1543870789

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

Temp1543871057
Information
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:

Temp1543955090

What will superheroes.length be now?

Step 5
Push an apple object into the array
Temp1543871220

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

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

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

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

Temp1543873505
Information
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.

Temp1543974509

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
Temp1543876852
  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

Temp1543877040
Information
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.

Temp1544035713

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.

Temp1544036061
Step 15
Use a for loop to collect the apples
Temp1543952458
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.

Temp1544036868
Step 17
Make a boxes array and push in a box
Temp1543954431

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.

Challenge
Step 18
Make 20 boxes

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

Temp1543954012

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

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

Temp1543953614

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!

Temp1543954535
Information
Step 21
Answers to Step 4

To use the first apple in the apples array, you will need to write apples[0]. Remember that arrays always start with an index of 0. Here are all the places you needed to make the change:

Temp1543871897
Information
Step 22
Answers to Steps 16 and 17

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

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