HTML and CSS Reference
In-Depth Information
Chapter 9
Hangman
In this chapter, we will be covering
•
CSS styles
•
generating markup for alphabet buttons
•
using an array for a sequence of drawings
•
using a character string for the secret word
•
an external script file for the word list
•
setting up and removing event handling
Introduction
The goal for this chapter is to continue demonstrating programming techniques and the features of
HTML5, Cascading Style Sheets (CSS), and JavaScript, combining dynamic creation of HTML markup
along with drawing graphics and text on the canvas. The example for this chapter is another familiar
game—the paper-and-pencil game of Hangman.
Just in case you need to brush up on the rules, the game is played as follows: One player thinks of a
secret word and writes out dashes to let the other player know how many letters are in that word. The other
person guesses individual letters. If the letter appears in the word, player one replaces the dash
representing each occurrence of the guessed letter with the actual letter. If the letter does
not
appear in
the secret word, the first player draws the next step in a progression of stick figure drawings of a hanging.
In my example shown in Figure 9-1, the gallows are already on the screen. Next comes the head, then the
body, left arm, right arm, left leg, right leg, and finally, the rope. Players can come to an agreement on how
many steps are allowed. Player two loses the game if the hanging is complete before the word is guessed.
Yes, this is a ghoulish game, but it is popular and even considered educational.
In our game, the computer takes the role of player one and picks the secret word from a word list (in this
case an admittedly very short list). You may use my list. When you make your own game, use your own. It
