The Essential Guide to HTML5

HANGMAN

placing the names of the functions in an array. This implementation also demonstrates the use of external

script files for holding the word list. This game has turns within a game, unlike, say, rock, paper, scissors,

so the program must manage the game state internally as well as display it on the screen.

Critical requirements...................................................................................................................................

As was true in the previous chapter, the implementation of this game makes use of many HTML5 and

JavaScript constructs demonstrated in earlier chapters, but they are put together here in different ways.

Programming is similar to writing. In programming, you put together various constructs, just like you write

sentences composed of words that you know, and then put these into paragraphs, and so on. While

reading this chapter, think back to what you have learned about drawing lines, arcs, and text on the

canvas; creating new HTML markup; setting up a mouse click event for markup on the screen; and using

if and for statements.

To implement Hangman, we need access to a list of words. Creating and testing the program does not

require a long list, which could be substituted later. I decided to make it a requirement that the word list be

separate from the program.

The user interface for player moves could have manifested in one of several ways, for example, an input

field in a form. However, I decided a better approach was to make the interface include graphics

representing the letters of the alphabet. It was necessary to make each of the graphics act as a clickable

button and provide a way to make each letter disappear after it has been selected.

The pencil-and-paper version of the game involves a progression of drawings ultimately resulting in a stick

figure with a noose around its neck. The computer game must show the same progression of drawings.

The drawings can be simple lines and ovals.

The secret word must be represented on the screen, initially as all blanks and then filled in with any

correctly identified letters. I chose to use double lines as blanks, because I wanted identified letters to be

underlined. An alternative could be question marks.

Last, the program must monitor the progress of the game and correctly determine when the player has lost

and when the player has won. The game state is visible to the player, but the program must set up and

check internal variables to make the determination that the game is won or lost.

HTML5, CSS, and JavaScript features ......................................................................................................

Let
s now look at the specific features of HTML5, CSS, and JavaScript that provide what we need to

implement Hangman. Except for basic HTML tags and the workings of functions and variables, the

explanations here are complete. However, much of this chapter repeats explanations given in earlier

chapters. As before, you may choose to look at all the code in the “Building the Application” section first

and return to this section if you need explanations of specific features.

Storing a word list as an array defined in an external script

file

The Hangman game requires access to a list of legal words, which can be called the word bank. It would be

a pretty sure bet to say that one approach is to use an array. The short array we
ll use for this initial

example follows: