Hangman - The Essential Guide to HTML5 - page 301

• Check if the game has been won by comparing lettersguessed to secret.length . If the
game is won, remove event handling for the alphabet buttons and display the appropriate
messages.
• If the selected letter did not match any letters in the secret word (if the variable not is still
true ), advance the hanging using the variable cur for an index into the array variable steps
• Check if the game has been lost by comparing cur to steps.length . If the two values are
equal, reveal all the letters, remove event handling, and display the appropriate messages.
• Whether or not there is a match, make the clicked alphabet button disappear by setting the
display attribute to none .
These tasks are performed using if and for statements. The check if the game has been won is done
after determining that a letter has been guessed correctly. Similarly, the check if the game has been lost
is done only when it is determined that a letter has not been correctly identified and the hanging has
advanced. The state of the game is represented in the code by the secret , lettersguessed , and cur
variables. The player sees the underscores and filled-in letters of the secret word and the remaining
alphabet blocks.
The code for the whole HTML document with line-by-line comments is in the “Building the Application”
section. The next section describes the critical first task of handling a player's guess. One general tactic
to keep in mind is that several tasks are accomplished by doing something for every member of an array
even if it may not be necessary for certain elements of the array. For example, when the task is to reveal
all the letters in the secret word, all have the textContent changed even if some of them have already
been revealed. Similarly, the variable not may be set to false multiple times.
Checking a guess and revealing letters in the secret word by
setting textContent
The player makes a move by clicking a letter. The pickelement function is set up as the event handler for
each letter icon. Therefore, within the function, we can use the term this to refer to the object that
received (listened for and heard) the click event. Consequently, the expression this.textContent will
hold the selected letter. Therefore, the statement
var picked = this.textContent;
assigns to the local variable picked the specific letter of the alphabet the player is guessing. The code
then iterates over all the letters in the secret word held in the variable secret and compares each letter to
the guess of the player. The created markup that starts out being the double underlines corresponds to
the letters in the secret word, so when there is a correct guess, the corresponding element will be
changed; that is, its textContent will be set to the letter guessed by the player, which is held in picked :
for (i=0;i<secret.length;i++) {
if (picked==secret[i]) {
id = "s"+String(i);
document.getElementById(id).textContent = picked;
not = false;
lettersguessed++;
…