Incremental Lesson 8 - Arrays

About this tutorial

Category: Javascript
Difficulty: Intermediate
Lesson 8 - Arrays.zip

Results

This lesson will attempt to explain how a simple array works and provide an example on how to incorporate it into your incremental project. It will also touch upon the previous lesson, objects, and integrate arrays into the game save.

Arrays can be thought of as lists. A simple array will consist of a single list of items. For example:

	1: Apple
	2: Orange
	3: Banana

The above is a short list of fruit. It is easily recognisable as a list, and each item on the list is numbered. This is exactly how arrays work. Take a look at the list below:

	0: Apple
	1: Orange
	2: Banana

Notice how the list starts with 0? This is because of how arrays build lists and access the individual items. An array will always start at item 0 and move up. This can be useful in a number of ways, one of which will be explained later in this tutorial.

So how do you create an array? An array is a variable, just like a number or a string, and needs to be declared for javascript to understand it. Use the line below to make a simple array:

	var myarray = [];

The variable declaration uses the []s to denote an array. The above only creates an empty structure, so we now need to add information to it. To do this, we need to understand how an array accesses information.

If our array contains the list of fruit above, we have the item numbers (0, 1, 2) related to the names in them (Apple, Orange, Banana). If, for example, we want to find the Orange at location 1, we would use the following:

	myarray[1];

The number inside the []s tells javascript to look in the location 1 for whatever data might be there. Note that you can use whatever data type you like in whatever location you like, an array is simply a list of information regardless of its type. Pretty simple right? Assigning a value to an array location is pretty simple too:

	myarray[1] = "Orange";

All you need to do is reference the array, then the location that you would like to add the data to. From there, you treat it as you would any other variable. So how can we add this to our project? In a number of ways.

First of all, we're going to have to do a little more work on our buildings. This is quite an extensive upgrade to our game, so make sure you have enough time aside to make all the necessary changes.

We're going to need a few more functions to do this. Let's create a function now that we're going to call when the page loads.

	function InitBuildings() {
 
	}

Inside this function, we're going to have the code to load all of our buildings into an array. Below this function, let's add a second:

	function LoadBuilding() {
 
	}

This function will handle the actual creation of individual buildings. Now head back to the top of the page and create the buildings array like this:

	var buildings = [];

What we're going to do is create an array of building objects. This may start to get a little confusing, so if you don't fully understand something, please head back to the top of this tutorial or to the previous one to brush up on how things work.

We're going to use the ()s beside the function name for this modification. The ()s allow us to pass values into a function, meaning we can give contextual data that needs to be processed in a specific situation. For example: In a real world situation, a person can make a sandwich. The process of making a sandwich can be considered our function. The process doesn't change, but what goes on it does. We can use the ()s in this situation to decide what type of sandwich we want to make, be it vegemite, peanut butter, or almonds.

We're going to use the ()s in our LoadBuilding function to pass a few pieces of information required to make a building. Change the line to the following:

	function LoadBuilding(name,cost,persec) {

Notice how there are three words separated by ,s? These words will become variables to be used inside the function (and only inside the function when it is run). These variables can be referenced later on for a number of purposes.

Since we are going to be using this function to add items to our array, we'll need to create a new variable to determine what array location we need to access. We'll be adding to the end of the list each time, so we'll need to check to see how many entries there are in the array. We can do this with the following:

	var cur = buildings.length;

The .length on the end of the buildings variable tells javascript to check the length of the variable. In the case of an array, it counts how many entries there are. This can cause problems in arrays that don't follow a simple pattern (using consecutive numbers), but for our case, it will be perfect. Now thanks to arrays starting with a location 0, we can use the length of the array as our next entry. To understand this, you need to think logically. An array with a length 0 will have no entries, so we can use the location 0. An array with a length of 10 will have the highest entry number of 9, so we can use 10.

After adding the above line into the function, let's start adding information into the array. We'll need to declare the array location as an object, just as we would with a normal variable. Note that we can use variables to choose what location we want to access in the array. In our case, we'll be using the cur variable.

	buildings[cur] = new Building();

Now we can access the Building object structure through our array item. For example, if we want to access the name of the building in location 0, we could use:

	buildings[0].name;

Simple. So let's now add the information into the array using the variables that we passed to the function:

	buildings[cur].name = name;
	buildings[cur].cost = cost;
	buildings[cur].persec = persec;

That finishes our function for us. Now let's head back up to the other InitBuildings() function. This is where we'll actually add our information. We'll be calling our LoadBuilding() function here multiple times, once for each building. Remember the variables that were inside the ()s for the LoadBuilding() function? We'll be giving the function our values here. All we have to do is add inside the brackets the values that we want, making sure they correspond with the variables on the other end:

	LoadBuilding("Lemonade Stand",10,1);

Notice how we have put the values directly into it? We could pass actual variables, but we don't need to in this case. Passing the real values is enough. Take a moment to look over the LoadBuilding() function and see if you can understand how the data is being accessed and treated.

All we need to do now to have our list of buildings automatically create at start up is to include the InitBuildings function inside the window.onload function. A simple function call is enough here.

Now that we have our buildings in an array of objects, let's take a look at how it interacts with our building functions. Surely we can do better than a function for each building? Of course we can! We're going to pass the building's array number into a new function designed to handle buying any building. That's right, any building can be bought with the function we're about to write. Let's take a look at our original function to buy a lemonade stand:

	function BuyLemonadeStand() {
		if (game.money >= Building1.Cost) {
			game.money -= Building1.Cost;
			Building1.Qty = Building1.Qty + 1;
			document.getElementById("money").innerHTML = game.money;
			document.getElementById("Building1Qty").innerHTML = Building1.Qty;
		}
	}

It's designed specifically to handle buying the lemonade stand. What we're going to do is start by renaming it. Let's call it Build and we'll pass the variable id to it:

	function Build(id) {

The id will be the array number of the building that we want to buy. For a lemonade stand, it will be 0, but we'll be able to automate the process so that any building in the list can be bought with this function. Let's take a look at the rest of the function now. Notice how we're referencing the Building1 variable? We're going to have to change that to our buildings array with id as the array locator. Change those references now.

	function Build(id) {
		if (game.money >= buildings[id].Cost) {
			game.money -= buildings[id].Cost;
			buildings[id].Qty = buildings[id].Qty + 1;
			document.getElementById("money").innerHTML = game.money;
			document.getElementById("Building1Qty").innerHTML = buildings[id].Qty;
		}
	}

Looking pretty good. We've got a little more cleaning up to do now before it'll all work as we want it to. Inside our onload function, we have a reference to window.Building1. We need to remove that and any of the lines referencing that variable. In addition, in the tick function, any references to Building1 need to be replaced with the corresponding buildings[id], where id is replaced with the id of the building. If you've been following the tutorial, you'll only have a lemonade stand, and the id will be 0.

Finally, to make everything work, we'll need to change the function call for the lemonade stand button. This will need to be change to call the function "Build(0);". Remember, the array locator for the lemonade stand is 0, and that's the building that we want the build function to purchase. Save and test.

Congratulations, your new functions should be set up and working correctly. If you've had any trouble, check out the attached example to see the working code in action and try to find where you've gone wrong. You can also now set up new buildings simply by adding a new line below the lemonade stand and adding a new button onto the HTML document.

In the next lesson, we'll be looking at further automation to make new additions to the game even easier using loops.