Hangman - The Essential Guide to HTML5 - page 300

The drawnoose function makes use of the same technique, except that, for the noose, the oval is wide as
opposed to narrow; that is, the vertical is squeezed and not the horizontal.

Each step in the progression of drawings is represented by a function, such as drawhead and drawbody .
We list all of these in an array called steps :
var steps = [
drawgallows,
drawhead,
drawbody,
drawrightarm,
drawleftarm,
drawrightleg,
drawleftleg,
drawnoose
];
A variable, cur , keeps track of the current step, and when the code confirms the condition that cur is
equal to the length of steps , the game is over.
After experimenting with these, I decided that I needed to draw the head and draw a neck on top of the
noose. This is done by putting in calls to drawhead and drawneck in the drawnoose function. The order is
important.

Use the draw functions as models for you to make your own drawings. Do change each of these individual
functions. You also can add or take away functions. This means you would be changing the number of
steps in the progression, that is, the number of wrong guesses the player can make before losing the
game.

Tip: If you haven't done so already (or even if you have), experiment with drawing. Create a separate
file just for drawing the steps of the hanging. Experiment with lines and arcs. You also can include
images.

Maintaining the game state and determining a win or loss

The requirement to encode and maintain the state of an application is a common one in programming. In
Chapter 2, our program kept track of whether the next move was a first throw or a follow-up throw of the
dice. The state of the Hangman game includes the identity of the hidden word, what letters in the word
have been correctly guessed, what letters of the alphabet have been tried, and the state of the
progression of the hanging.

The pickelement function, invoked when the player clicks on an alphabet block, is where the critical
action takes place, and it performs the following tasks:

•

Check if the player's guess, kept in the variable picked , matches any of the letters in the
secret word held in the variable secret . For each match , the corresponding letter in the blank
elements is revealed by setting textContent to that letter.

•

Keep track of how many letters have been guessed using the variable lettersguessed .