How to Build the Number Guesser in Your HTML5 Game

By Andy Harris

With random numbers, you can make interesting HTML5 games. Take a look at a simple game that uses HTML, CSS, and JavaScript together. This game has a number of interesting features:

  • It uses the web page as the interface. Like many JavaScript programs, it uses a web page as the user interface. An input element is used for input, a div is the main output element, and a button triggers all the actions.

  • It uses CSS for styling. The various parts of the page are formatted with CSS. The CSS is stored in an external style sheet for convenience and reusability.

  • It tells the user how many turns she has taken. On each pass, the computer reminds the user how many turns have happened.

  • When the user has guessed correctly, a Restart button appears. This button is hidden at first, and appears only when it is needed.

  • The right answer is available to programmers through a special debugging feature. While testing the program, the developer can see what the correct answer is, but this information is hidden from the user.

  • An init() function begins the game. The init() function initializes the game. It is called when the program first begins and again when the user wants to start over.

  • Another function is attached to the button. When the user clicks the Check Your Guess button, the current user’s guess is compared to the right answer, and a hint is returned to the user.

    image0.jpg

How to design the game program

When you build a complex program, you need to begin with a design plan.

image1.jpg

Much of the work in game development happens before you begin programming. If you design the game well, the programming is much easier to do. A game design helps you understand many things about the game before you begin writing code:

  • General layout: While the layout isn’t completely decided by this drawing, it’s easy to see the general look.

  • Named elements: Every element that needs to have a name has been determined, and the names are written on the document. Some elements (like the first button) do not need names because they won’t be referred to in code.

  • Button functions: Each button will call a function. The diagram indicates which function each button will call.

  • Function plans: Every function is planned out with an English-language description of what the function will do.

  • Global variables: The variables that will need to be shared between functions are described.

It’s actually difficult to create a good design document, but doing so makes the programming quite a bit easier. It’s hard to figure out what you’re trying to do, and it’s also hard to figure out how to do it. Having a design document separates those two processes so you can first concentrate on what you’re doing, and then worry about how you’re going to do it.

How to build the HTML for the game

The HTML code for the number-guessing game is pretty easy to write if you’ve designed the game on paper first. Here’s the code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>Number Guesser</title>
 <link rel = "stylesheet"
  type = "text/css"
  href = "numGuess.css" />
 <script type = "text/javascript"
   src = "numGuess.js"></script>
</head>
<body onload = "init()">
 <h1>Number Guesser</h1>
 <form>
 <fieldset>
  <div id = "output">
  I’m thinking of a number between 0 and 100.
  Guess my number, and I’ll tell if you are
  too high, too low, or correct.
  </div>
  <label for = ">Your Guess</label>
  <input type = "text"
    id = "txtGuess">
  <button type = "button"
    onclick = "checkGuess()">
  check your guess
  </button>
  <button type = "button"
    id = "again"
    onclick = "init()">
  try again
  </reset>
 </fieldset>
 </form>
</body>
</html>

It’s nice to separate HTML, CSS, and JavaScript because this practice allows you to “divide and conquer” a big problem into a number of smaller problems. Here are the main features of the HTML document:

  1. Link to the CSS in an external file.

    At the moment, the CSS isn’t critical, so you move it off into a separate file so you can work with it later.

  2. Outsource the JavaScript code.

    You also move the JavaScript code into an external file so you don’t have to worry about it yet. In the HTML code, simply make the linkages to the external files.

  3. Build a form as the main component of the page.

    The most important aspect of this page is the form. Like most forms, it will have a fieldset, labels, input elements, and buttons.

  4. Create a div for output.

    The output div is just an ordinary div. You put it inside the fieldset so it will maintain a visual link to the rest of the form. You can put default text inside the div (though you will probably change this text later). Because the div will be referred to through code, it needs an id attribute.

  5. Make an input area for the user’s guess.

    The user will need to type some sort of numeric input. Use an input element for this purpose. Refer to your documentation to remember the id of this element. (You did make a design document, right?) It’s nice to add a label to the input so the user knows what’s expected there.

  6. Build a button for checking the guess.

    The user doesn’t commit a guess until she clicks the Check Your Guess button. So, you really need to have such a button. This button doesn’t need a name, but it will call the checkGuess() function.

  7. Build a second button to start again.

    One interesting feature of this program is a button that allows the user to restart. This second button is available only when the user has correctly guessed the answer. You create it with ordinary HTML and use CSS and JavaScript tricks to make it disappear and appear on demand.