How to Make Choices with if in Your HTML5 Game

By Andy Harris

Sometimes you’ll need your HTML5 game code to make decisions or choices. For example, if somebody famous typed their name in your website, you might want to create a custom greeting for them.


As you can see, the program looks at the input in the text box and changes behavior based on the value of the text field.


The code is quite similar to the code in the hiUser page. The only difference is the way the function is written. Here’s the checkName() function called in ifElse.html:

 function checkName()
  // from ifElse.html
  lblOutput = document.getElementById("lblOutput");
  txtInput = document.getElementById("txtInput");
  userName = txtInput.value;
  if (userName == "Tim Berners-Lee"){
  lblOutput.innerHTML = "Thanks for inventing HTML!";
  } else {
  lblOutput.innerHTML = "Do I know you?";
  } // end if
 } // end function

Change the game’s greeting with if

This code uses an important idea called a condition inside a construct called an if statement. Here’s what’s happening:

  1. Set up the web page as usual.

    The HTML code has elements called lblOutput and txtInput. It also has a button that calls checkName() when it’s clicked.

  2. Create variables for important page elements.

    You’re getting data from txtInput and changing the HTML code in lblOutput, so create variables for these two elements.

  3. Get userName from txtInput.

    Use the txtInput.value trick to get the value of the input element called txtInput and place it in the variable userName.

  4. Set up a condition.

    The key to this program is a special element called a condition — an expression that can be evaluated as true or false. Conditions are often (as in this case) comparisons. Note that the double equals sign (==) is used to represent equality. In this example, this is asking whether the userName variable equals the value “Tim Berners-Lee”.

  5. Place the condition in an if structure.

    The if statement is one of a number of programming constructs that use conditions. It contains the keyword if followed by a condition (in parentheses). If the condition is true, all of the code in the following set of braces is executed.

  6. Write code to execute if the condition is true.

    Create a set of squiggly braces after the condition. Any code inside these braces executes if the condition is true. Be sure to indent your code and use the right squiggle brace (}) to end the block of code. In this example, there is a special greeting to Tim Berners-Lee.

  7. Build an else clause.

    You can build an if statement with a single code block, but often you want the code to do something else if the condition is false. Use the else construct to indicate you will have a second code block that will execute only if the condition is false.

  8. Write the code to happen when the condition is false.

    The code block following the else clause executes only if the condition is false. In this particular example, there is a greeting for everyone except Tim Berners-Lee.

The different flavors of if in your game

If statements are extremely powerful, and there are a number of variations. You can actually have one, two, or any number of branches. You can write code like this:

if (userName == "Tim Berners-Lee"){
 lblOutput.innerHTML = "Thanks for inventing HTML"
} // end if

With this structure, the greeting occurs if userName is “Tim Berners-Lee” and nothing happens if the userName is anything else. You can also use the if-else structure (this is the form used in the actual code):

if (userName == "Tim Berners-Lee"){
 lblOutput.innerHTML = "Thanks for inventing HTML!";
} else {
 lblOutput.innerHTML = "Do I know you?";
} // end if

One more alternative lets you compare as many results as you wish by adding new conditions:

if (userName == "Tim Berners-Lee"){
 lblOutput.innerHTML = "Thanks for inventing HTML!";
} else if (userName == "Al Gore") {
 lblOutput.innerHTML = "Thanks for inventing the Internet";
} else if (userName == "Hakon Wium Lie") {
 lblOutput.innerHTML = "Thanks for inventing CSS";
} else {
 lblOutput.innerHTML = "Do I know you?";
} // end if

Conditional operators

The == operator checks to see if two values are identical, but as Table 3-1 shows, JavaScript supports a number of other operators as well.

Operator Meaning
a == b a is equal to b.
a < b a is less than b.
a > b a is greater than b.
a <= b a is less than or equal to b.
a >= b a is greater than or equal to b.
a != b a is not equal to b.

If you’re coming from another programming language like Java, C++, or PHP, you might wonder how string comparisons work because they require different operators in these languages. JavaScript uses exactly the same comparison operators for types of data, so there’s no need to learn different operators.