Your Favorite Games
Incremental Lesson 9 - For Loops
About this tutorial
In our last lesson, we looked at arrays and how we can use them to improve the automation of our code and better store similar values. In this lesson, we're going to look into how we can iterate through our arrays and easily perform repetative tasks.
For loops are a particular kind of loop that allows us to repeat a certain number of times. Since we know the length of our arrays (using .length on an array variable) we can loop for the full list of items in an array, meaning that we don't have to repeat our code over and over again. So how are we going to apply this to our code?
The first improvement we will make will be in the ability to have our buildings produce automatically without requiring new code to be added for each new building. We're going to have to start by creating the basic loop using the length of the buildings array as our limit. We'll put this inside our tick function. Leave the other code in there for now, we can clean it up later:
The contents of a loop is defined by {}, just like a function. Also like a function, any code inside the loop will be executed each time the loop is run. However, the code inside the ()s acts very differently.
As you can see, it is split into 3 parts. These parts work together to calculate how many times the loop must be run. The first part creates a variable that can be used to count the number of times the loop has passed. The second is the condition. In this case, the loop continues until our counter (i) is higher than the length of our array. Finally, the third part tells the loop what to do once the code inside has been executed. In our case, we're incrementing our counter.
We're doing this so that we can use the counter variable (i) in our array. It starts at the value 0, then adds 1 each time the loop completes. Let's start adding code inside so that these buildings can produce money automatically:
The line we just added should look almost identical to the one we already had for our lemonade stand. However, we've replaced the [0] with [i]. Let's take a look at why. On the first time the loop runs, i will be 0. This means that the first time the loop runs, it will perform the check for our lemonade stand. Once it's complete, it will increment to 1. If we had a building in the 1 place, we would then run the same code for that building, producing money for that one as well. Now we no longer have to worry about adding money producing code each time we create a new building.
Let's go one step further. In our game variable, we have the variable money. We're going to add a second variable here, an array, to keep track of our player's buildings. Let's just call it building, the same as the one we're already using. Since it's inside another variable in an object, javascript treats it as a separate variable, so there won't be any problems in running the code.
Our GameSave object should now appear as above. But how do we tell it to set up the buildings in the first place? If we were to just do this, there would be no values for the buildings that the game has, and each time it tries to access one, it will come up with an error. We'll need to create another loop inside the object declaration. Remember that code inside an object declaration gets called at the time the object is assigned to a variable. We're going to use a loop almost identical to the one we created before:
The first line is identical, so you should understand that. However, the second line is a little different. If we were to leave out "this.", we would be modifying the global buildings variable, the one that has all the information already in it. The buildings variable we want to access is the one inside this object, hence the addition. We're also providing a default value of 0, since the player should not have any of this building at the time of creation.
That's the first step done. Now we need to go through our code and find our references to "buildings[].Qty" and replace it with "game.buildings[]". The information inside the [] will remain the same, so you'll just need to change the rest of the line. We can now delete the line inside the buildings object that creates the Qty variable, remove the additional line in the tick that we left behind, and save and test.
Well done! Your project now has loops that will automatically change when you add new buildings using the method from last lesson. In the next lesson, we're going to take a huge leap forward and automate how the game displays these buildings, including automatically creating their displays.