How to Use Arrays to Simplify Data in Your HTML5 Game - dummies

How to Use Arrays to Simplify Data in Your HTML5 Game

By Andy Harris

HTML5 games are about data; often that means a lot of data. An array is the most basic tool programmers have for managing large amounts of data. JavaScript supports a simple yet very powerful and flexible array mechanism that lets you do plenty with arrays.


An array is actually a very simple idea; it’s simply a list. You’ve already used lists many times in HTML coding, but in programming, lists are called arrays, and have special characteristics. This example features two arrays — a list of books written by a certain charming and devilishly handsome author, and some of the topics said author writes about.

This page has four main components:

  • HTML structure: It has a form with two buttons. The body calls an initialization function when it loads, and each button calls its own function. The page also has a div named output.

  • An init() function: This function provides access to the output div, and it also loads up the two arrays described in this example. Arrays usually require some kind of initialization.

  • The showBooks() function: You’ll be amazed and surprised that this function displays a series of book titles.

  • The showTitles() function: This function demonstrates another way to walk through the elements of an array.

How to build the game’s arrays

Arrays are frequently created as global variables because they are often used throughout the program (and in some languages, passing an array as a parameter can be kind of complicated).

In this program, you can create a number of variables in the global space and initialize them all in the init() function called with body.onload.

 var output;
 var books;
 var topics;
 function init(){
 //initialize output and arrays
 //from basicArrays.html
 output = document.getElementById("output");
 books = Array("Flash Game Programming for Dummies",
     "Game Programming, the L Line",
     "HTML / XHTML / CSS All in One",
     "JavaScript and AJAX for Dummies",
     "HTML5 Quick Reference");
 topics = Array(5);
 topics[0] = "HTML5";
 topics[1] = "CSS3";
 topics[2] = "JavaScript";
 topics[4] = "AJAX";
 } // end init

Setting up the arrays is the most important part of the process:

  1. Create variables for the arrays.

    There are two arrays in this example, books and topics. Each is created just like any other variable, with the var statement. You also create an output variable to hold a reference to the output div.

  2. Build an init() function to initialize variables.

    As programs become more complex, it is common to have an initialization function to set everything up. This function is called with body.onload.

  3. Build the output variable.

    Because all the other functions will use output, you create it in init().

  4. Use the Array() function to create the array of books.

    This special function is used to create an array of elements. Note that it uses an uppercase A. (If you must be technical, this is a constructor for an Array object, but in JavaScript, that’s a function, too.)

  5. Simply list each book as a parameter in the Array() function.

    If you feed the Array function a series of values, they become the values of the array. This technique is great if you already know what will go into each element when you build the array.

  6. Build the topics array differently.

    The topics array is build with a different technique. In this array, you can specify a single integer, which is the number of elements the array will contain.

  7. Use the index operator to add elements to the array.

    All array elements have the same name, but they have a different number. Use square braces with an integer to refer to a specific element in the array. Note that array elements always begin with element zero.

If you’ve used arrays in other programming languages, you’ll find JavaScript arrays to be very forgiving. Be careful, though, because arrays are one of those features that every language supports, but they all work a little bit differently. You’ll actually find the JavaScript arrays are more like the ArrayList in Java or the Vector class in C++ than the traditional array in either of these languages.

The books array to prepare your games

Arrays are wonderful because they allow you to pack a lot of data into a single variable. Very often when you have an array, you’ll want to do something with each element in the array. The most common structure to do this is a for loop. Look at showBooks() for an example:

 function showBooks(){
 //from basicArrays.html
 output.innerHTML = ";
 for (i = 0; i < books.length; i++){
  output.innerHTML += books[i] + "<br />";
 } // end for loop
 } // end showBooks

This function steps through the list of books and prints the name of each one in the output area:

  1. Clear the output div.

    Output has already been defined in the init() function, so it’s pretty easy to clear out its value in the function.

  2. Build a loop for the length of the array.

    Arrays and for loops are natural partners. In this loop, you have i count from zero to the number of elements in the array.

  3. Begin with zero.

    Array indices always begin with zero, so your counting variable should also start at zero (in most cases).

  4. Use the length property to determine how long the array is.

    When you build a for loop to step through an array, what you really want to know is how many elements are in the array. Use arrayName.length to determine the number of elements in the current array, where arrayName is the name of the current array. This way, even if the number of elements in the array changes, the loop still works correctly.

  5. Process data inside the loop.

    If the counting variable is i, each element of the array is arrayName[i] inside the loop. You can do what you want with the data.