Hangman is a word-guessing game, less abstract than code-breaking Mastermind, and using English phrases as the target of the player’s guesses. The tools of the game are simple enough to implement with a simple JavaScript program, and should scale well for full-size desktop screens or smaller mobile devices.

I used some of the same code from Mastermind (Building Mastermind for All Screen Sizes) in order to have the layout easily scale to fit the user’s screen. Because the hidden phrases can greatly vary in length, it’s hard to know how many lines it will require for a given screen width and line height. (Font size does refer to vertical height, but the line height setting is usually more important.) The offsetHeight property purportedly gives you the height of a block in the document object model, but I’ve seen too many times when the value is wrong, only to see it right a few seconds later. I suspect rendering is done in a separate thread, and offsetHeight may not be accurate immediately after assigning content to a block. So, for that reason the Hangman puzzle will overlap lower sections sometimes (and can be corrected by slightly resizing the window). I suspect the best solution might be to switch to using a canvas element to render the entire game.

The bulk of the program is the repository of puzzles, which are done as hard-coded string arrays. To ease the download requirement, the PHP program includes only puzzles for the requested theme.

Unlike Mastermind, Hangman accepts keyboard input, to type in letters. I added an event listener in the HTML tag:

<html onkeypress="checkInput(event)">

The first five lines of the called function are standard, allowing for differences between what each browser calls the property of the event object.

function checkInput(e) {
  keynum = 0;
  if (window.event) // IE
    keynum = e.keyCode;
  else if (e.which) // Netscape/Firefox/Opera
    keynum = e.which;
  c = String.fromCharCode(keynum).toUpperCase();
  if (c >= 'A' && c <= 'Z') 
    if (document.getElementById(c).style.visibility != "hidden")
      check(c);
  if (keynum == 13 && document.getElementById("go").style.visibility
    != "hidden")
    goOn();
  }

After getting keynum I convert the number to a single character, switch to uppercase, and see if it's a valid letter. Each of the alphabet buttons has an ID matching its letter, such as:

<input type=button onClick="check('K')" value=" K " id=K>

I use the "visibility" property to track whether it's already been clicked. Note I test whether visibility != "hidden" rather than visibility == "visible", since I do not bother to initialize the buttons. By default they are of course visible, but the "visibility" property is likely to be null until you specifically set it.

Once the mechanics of the game are out of the way, the fun part is finding puzzles for players to solve. I most enjoyed building the quotable theme. I ended up using Ben Franklin as the main contributor of quotes, with 7 from him. Confucius and Einstein each contributed 5 quotes, and Shakespeare, Voltaire and Oscar Wilde each contributed 4 quotes.

The Washington Metro theme got a customized color scheme to match WMATA's five lines and their famous "Metro brown" used in signage.

Later I added a Paris Métro theme, as a challenge to myself to handle accented letters (in this case: Â, É, È, Ê, Î, Ô, Ü and Ç). I modified the code so that unaccented letters match all variations, yet accent marks are included when displayed.

In the end, I think I have a simple game that provides a lot of fun playing time. Check it out and see what you think: mvjantzen.com/games/hangman.php.

Creating Hangman in JavaScript

One Response to “Creating Hangman in JavaScript”