How to Send Data To and From Functions in Your HTML5 Game

By Andy Harris

Functions make your HTML5 game code safe because variables created inside a function are destroyed when the function dies. Sometimes, though, you want data to move from one function to another. One solution is the global variable, but it’s kind of a crude option. A better solution is to allow data to pass into and out of functions.


Of course, this program could be written by creating a really long string variable and then copying it to the innerHTML attribute of the output div, but that would be quite inefficient. Instead, you can use functions to simplify the work. Begin by looking over the main function: makeSong().

 function makeSong(){
 //create output variable
 //from param.html
 var output = document.getElementById("output");
 output.innerHTML = ";
 output.innerHTML += verse(1);
 output.innerHTML += chorus();
 output.innerHTML += verse(2);
 output.innerHTML += chorus();
 } // end makeSong

This code demonstrates one of the primary advantages of functions; they allow you to break a complex problem into a series of smaller problems. A number of interesting things are going on here:

  • The program writes to a div called output. You will make a variable called output that corresponds to a div called output on the page.

  • Write text to output. That’s not surprising, but it is interesting because there are no text variables or values in the makeSong() function.

  • All the text is created by other functions. There are two other functions in this program: verse() and chorus(). Both of these functions create string values.

  • Verse can be “fed” a numeric value. The verse function is especially important because it can be passed a value. The verse changes behavior based on the value passed to it.

How to return a value from a function in your game

To truly understand what’s happening here, begin with the chorus() function (because it’s a little simpler than verse()).

function chorus(){
 //from param.html
 result += "<br />";
 return result;
 } // end chorus

The chorus() function is extremely simple:

  1. Create a variable called result.

    This variable holds the result of the function’s work (which will be a string value containing the chorus of the song).

  2. Append HTML code to the result variable.

    This code has several lines that build up the result. Note that this is HTML formatting because this code will be printed in an HTML div.

  3. Return result.

    The last statement of the function is special. The return statement allows you to specify a value that the function returns to whatever code called it.

  4. Use the function like a variable.

    When a function has a return value, you can treat it like a variable. Because this function returns a string, you can use the function like a string variable in the makeSong() function. In that function, output.innerHTML += chorus()is used. That means “run the chorus() function and then add whatever comes out of that function to the innerHTML of the output element.”

How to send arguments to a function in your game

The verse() function also returns a value, but it has another trick up its sleeve. Although the chorus is always the same, the verse changes a bit each time. The little one (who appears to have attention issues) gets distracted in a different way on every verse.

The verse() function uses an important idea called parameter-passing to allow this variation in behavior. Begin by looking at the code for the function:

 function verse(verseNumber){
 //from param.html
 var distraction = ";
 if (verseNumber == 1){
  distraction = "suck his thumb";
 } else if (verseNumber == 2){
  distraction = "tie his shoe";
 } else {
  distraction = "there's a problem here...";
 } // end if
 var result = "The ants go marching ";
 result += "The ants go marching ";
 result += "The ants go marching ";
 result += "The little one stops to ";
 return result;
 } // end verse

The verse() function is very similar to the chorus() function, except it is more flexible because it can accept a parameter.

  1. Call the function with a value inside the parentheses.

    When a function is intended to accept a parameter, it must be called with a value inside the parentheses. In makeSong(), you see calls to verse(1) and verse(2), but never verse(). That’s because verse is designed to always accept a single integer value.

  2. Define the function with a variable name inside the parentheses.

    If you look at the function definition for verse(), you see it contains the variable verseNumber between the parentheses. Whenever the verse() function is called, it must be fed a value, and that value is placed in the special variable verseNumber.

  3. Use verseNum to find the distraction.

    Analyze the verseNumber variable and use it to find the appropriate distraction. Put this in a variable named distraction.

  4. Build the verse.

    Incorporate the verseNumber and distraction variables in the result variable.

  5. Return the result.

    The main function uses the returned value as a string, printing out the verse.