The Essential Guide to HTML5

CHAPTER 9

The iteration does not stop when a guess is correct; it keeps going. This means that all instances of any

one letter will be discovered and revealed. The variable not is set to false each time there is a match. If

there were two or more instances of the same letter, this variable is set more than once, which is not a

problem. I included the word kerfuffle to make sure that repeated letters were handled correctly (besides

the fact that I like the word). You can examine all the code in the next section.

Building the application and making it your own ........................................................................................

The Hangman application makes use of CSS styles, HTML markup created by JavaScript, and JavaScript

coding. There are two initializing and set up functions (init and setupgame) and the function that does

most of the work (pickelement), plus eight functions that draw steps in the hanging. The functions are

described in Table 9-1.

Table 9-1. Functions Invoked or Called by Calls

Function Invoked / Called By Calls

init Invoked by the action of onLoad in the tag setupgame

setupgame init The first of the drawing
functions, namely drawgallows

pickelement Invoked by the action of the addEventListener calls
in setupgame

One of the drawing functions

through call of steps[cur]()

drawgallows Call of steps[cur]() in pickelement

drawhead Call of steps[cur]() in pickelement, drawnoose

drawbody Call of steps[cur]() in pickelement

drawrightarm Call of steps[cur]() in pickelement

drawleftarm Call of steps[cur]() in pickelement

drawrightleg Call of steps[cur]() in pickelement

drawleftleg Call of steps[cur]() in pickelement

drawnoose Call of steps[cur]() in pickelement drawhead, drawnoose

drawneck drawnoose

Note the indirect pattern of most of the function calls. This pattern provides considerable flexibility if you

decide to change the hanging progression. Note also that you can remove the very first call in the