The Essential Guide to HTML5

HANGMAN

Code Explanation

A variation of Hangman uses common sayings in place of words. Building on this game to create that one

is a challenge for you. The critical steps are handling of blanks between the words and the punctuation.

You probably want to reveal each instance of blanks between words and periods, commas, and question

marks immediately, making these things hints to the player. This means that you need to make sure that

lettersguessed starts off with the correct count. Do not be concerned that the selected letters are

compared to blanks or punctuation.

Another variation would be to change the alphabet. I carefully replaced all the instances of 26 with

alphabet.length. You would also need to change the language for the messages for winning and losing.

A suitable enhancement of the game is to make a New Word button. To do so, you need to split up the

workings o f the setupgame button into two functions: One function creates new alphabet icons and the

positions for the longest possible secret word. The other makes sure all the alphabet icons are visible and

set up for event handling and then selects and sets up the blanks for secret word, making sure the

appropriate number are visible. If you do this, you may want to include display of a score and a number of

games.

Continuing with the educational idea and assuming you use unusual words, you may want to include

definitions. The definition can be revealed at the end, by writing text on the canvas. Or you can make a

button to click to reveal the definition as a hint to the player. Alternatively, you could create a link to a site

such as Dictionary.com.

Testing and uploading the application........................................................................................................

To test this application, you can download my word list or create your own. If you create your own, start off

with a short word list prepared as plain text, giving it the name words1.js. When testing, do not always

guess in the same pattern, such as choosing the vowels in order. Misbehave and try to keep guessing

after the game is over. When you are satisfied with the coding, create a longer word list, and save it under

the name words1.js. Both the HTML and words1.js files need to be uploaded to your server.

Summary ......................................................................................................................................................

In this chapter, you learned how to implement a familiar game using features of HTML5, JavaScript, and

CSS along with general programming techniques, which included the following:

• using the scale method to change the coordinate system to draw an oval, as opposed to a
  circle, by saving and restoring before and after


• creating HTML markup dynamically


• setting up and removing event handling using addEventListener and removeEventListener
  for individual elements