HTML and CSS Reference
In-Depth Information
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
<body>
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