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:

var words = [
    "muon", "blight","kerfuffle","qat"
     ];

Notice that the words are all different lengths. This means that we can use the random processing code that we will want for the final version and still know what word has been selected when we're testing. We'll make sure the code uses words.length so that when you substitute a bigger array, the coding still works.

Now, the question is how to use different arrays for this purpose if we want to bring in a different list of words. It certainly is possible to change the HTML document. However, in HTML5 (or previous versions of HTML), it is possible to include a reference to an external script file in place of or in addition to a script element in the HTML document. We can take the three lines that declare and define the variable words and place them in a file named words1.js. We can include this file with the rest of the document using the following line of code:

<script src="words1.js" defer></script>

The defer method will cause this file to be loaded while the browser is continuing with the rest of the base HTML document. We could not load these two files simultaneously if the external file contained part of the body, but it works in this situation.

A more elaborate program could include multiple files with code for the player to select from among different levels or languages.

The creation of the alphabet buttons and the secret word dashes is done with a combination of JavaScript and CSS.

We'll write code to create HTML markup for two parts of the program: the alphabet icons and the blanks for the secret word. (You can go to the quiz game in Chapter 6 for more on creating HTML markup.) In each case, HTML markup is created using the following built-in methods:

The HTML is created to include a unique id for each element. The code involves setting certain properties:

With this background, here is the coding for setting up the alphabet buttons. We first declare a global variable alphabet:

var alphabet = "abcdefghijklmnopqrstuvwxyz";

The setupgame function has this code for making the alphabet buttons:

var i;
   var x;
   var y;
   var uniqueid;
   var an = alphabet.length;
   for(i=0;i<an;i++) {

      uniqueid = "a"+String(i);
      d = document.createElement('alphabet'),
       d.innerHTML = (
         "<div class='letters' id='"+uniqueid+"'>"+alphabet[i]+"</div>");
      document.body.appendChild(d);
      thingelem = document.getElementById(uniqueid);
      x = alphabetx + alphabetwidth*i;
      y = alphabety;
      thingelem.style.top = String(y)+"px";
      thingelem.style.left = String(x)+"px";
      thingelem.addEventListener('click',pickelement,false);
   }

The variable i is used for iterating over the alphabet string. The unique id is a concatenated with the index value, which will go from 0 to 25. The HTML inserted into the created element is a div with text containing the letter. The string is surrounded by double quotation marks, and the attributes inside this string are surrounded by single quotation marks. The elements are spaced across the screen, starting at the position alphabetx, alphabety (each global variable is declared earlier in the document), and incremented horizontally by alphabetwidth. The top and left attributes need to be set to strings and end with "px", for pixels. The last step is to set up event handling so these elements act as buttons.

The creation of the elements for the secret word is similar. A difference is that each of these elements has two underscores as its text content. On the screen, these two underscores look like one long underscore. The assignment to ch (for choice) is how our program selects the secret word.

var ch = Math.floor(Math.random()* words.length);
   secret = words[ch];
   for (i=0;i<secret.length;i++) {
      uniqueid = "s"+String(i);
      d = document.createElement('secret'),
          d.innerHTML = (
            "<div class='blanks' id='"+uniqueid+"'> __ </div>");
      document.body.appendChild(d);
      thingelem = document.getElementById(uniqueid);
      x = secretx + secretwidth*i;
      y = secrety;
      thingelem.style.top = String(y)+"px";
      thingelem.style.left = String(x)+"px";
   }

At this point, you may be asking, how did the alphabet icons get to be letters inside blocks with borders? The answer is that I used CSS. The usefulness of CSS goes far beyond fonts and colors. The styles provide the look and feel of critical parts of the game. Notice that the alphabet div elements have a class setting of 'letters', and the secret word letter div elements have a setting of 'blanks'. The style section contains the following two styles:

<style>
.letters {position:absolute;left: 0px; top: 0px; border: 2px; border-style: double;

 margin: 5px; padding: 5px; color:#F00; background-color:#0FC; font-family:"Courier

New", Courier, monospace;
}
.blanks {position:absolute;left: 0px; top: 0px; border:none; margin: 5px; padding:

 5px; color:#006; background-color:white; font-family:"Courier New", Courier,

 monospace; text-decoration:underline; color: black; font-size:24px;
}
</style>

The designation of a dot followed by a name means this style applies to all elements of that class. This is in contrast to just a name, such as form in the last chapter, in which a style was applied to all form elements, or to a # followed by a name that refers to the one element in the document with an id of that name. Notice that the style for letters includes a border, a color, and a background color. Specifying a font family is a way to pick your favorite font for the task and then specify backups if that font is not available. This feature of CSS provides a wide latitude to designers. My choices here are "Courier New", with a second choice of Courier, and a third choice of any monospace font available (in a monospace font, all the letters are the same width). I decided to use a monospace font to facilitate making icons that are the same in size and space nicely across the screen. The margin attribute sets to the spacing outside the border, and padding refers to the spacing between the text and the border.

We want the buttons representing letters of the alphabet to disappear after they are clicked. The code in the pickelement function can use the term this to refer to the clicked object. These two statements (which could be squeezed into one) make this happen by setting the display attribute:

var id = this.id;
document.getElementById(id).style.display = "none";

When the game is over, either through a win or a loss, we remove the click event handling for all the letters by iterating over all the elements:

for (j=0;j<alphabet.length;j++) {
    uniqueid = "a"+String(j);
    thingelem = document.getElementById(uniqueid);
    thingelem.removeEventListener('click',pickelement,false);
}

The removeEventListener event does what it sounds like: it removes the event handling.

In the chapters so far, you have read about drawing rectangles, text, images, and also paths. The paths consist of lines and arcs. For Hangman, the drawings are all paths. For this application, code has set the variable ctx to point to the 2D context of the canvas. Drawing a path involves setting a line width by setting ctx.lineWidth to a numerical value and setting ctx.strokeStyle to a color. We will use different line widths and colors for various parts of the drawing.

The next line in the code is ctx.beginPath();, and it's followed by a sequence of operations to draw lines or arcs or move a virtual pen. The method ctx.moveTo moves the pen without drawing and ctx.lineTo specifies the drawing of a line from the current pen position to the point indicated. Please keep in mind that nothing is drawn until the call of the stroke method. The moveTo, lineTo, and arc commands set up the path that is drawn whenever either the stroke or fill methods are invoked. In our draw functions, the next step is calling ctx.stroke();, and the last step is calling ctx.closePath(); to end the path. For example, the gallows is drawn by the following function:

function drawgallows() {
   ctx.lineWidth = 8;
   ctx.strokeStyle = gallowscolor;
   ctx.beginPath();
   ctx.moveTo(2,180);
   ctx.lineTo(40,180);
   ctx.moveTo(20,180);
   ctx.lineTo(20,40);
   ctx.moveTo(2,40);
   ctx.lineTo(80,40);
   ctx.stroke();
   ctx.closePath();
}

The head and the noose require ovals. The ovals will be based on circles, so first I will review how to draw a circle. You also can go back to Chapter 2. Drawing a circular arc is done with the ctx.arc command with the following parameters: coordinates for the center of the circle, a length for the radius, the starting angle in radians, the ending angle, and false for counter-clockwise or true for clockwise. Radians are intrinsic measurements in which a full circle is Math.PI*2. The conversion from degrees to radians is to divide by Math.PI and multiply by 180, but that is not needed for this example because we are drawing complete arcs.

However, we want to draw an oval in place of a circle for the head (and later for part of the noose). The solution is to use ctx.scale to change the coordinate system. In Chapter 4, we changed the coordinate system to rotate the rectangle representing a cannon. Here, we manipulate the coordinate system to squeeze one dimension to make a circle an oval. What our code does is first use ctx.save() to save the current coordinate system. Then for the head, it uses ctx.scale(.6,1); to shorten the x axis to 60 percent of its current value and keep the y axis the same. Use the code for drawing an arc and then use ctx.restore(); to restore the original coordinate system. The function for drawing the head follows:

function drawhead() {
   ctx.lineWidth = 3;
   ctx.strokeStyle = facecolor;
   ctx.save();  //before scaling of circle to be oval
   ctx.scale(.6,1);
   ctx.beginPath();
   ctx.arc (bodycenterx/.6,80,10,0,Math.PI*2,false);
   ctx.stroke();
   ctx.closePath();
   ctx.restore();
}

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.

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:

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.

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++;
                     ...

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.