The Essential Guide to HTML5

ROCK, PAPER, SCISSORS Summary In this chapter, you learned how to implement a familiar game using features of HTML5, JavaScript, ...

CHAPTER 8 ...

Chapter 9 Hangman In this chapter, we will be covering CSS styles generating markup for alphabet buttons using an array for a s ...

CHAPTER 9 makes sense to start small and, once you are happy with your game, make a longer list. My technique of using an extern ...

HANGMAN Figure 9-2. Screenshot after guessing an a Working through the vowels, I guess an e, with results shown in Figure 9-3. F ...

CHAPTER 9 Figure 9-4. The game screen after three incorrect selections Now, I guess an o, and this turns out to be correct (as I ...

HANGMAN Figure 9-6. Two letters have been identified. I now make some more guesses, first a t, as shown in Figure 9-7. Figure 9- ...

CHAPTER 9 Figure 9-8. After a wrong guess of s Figure 9-9 shows yet another wrong guess. Figure 9-9. After a wrong guess of d I ...

HANGMAN 293 Figure 9-10. After a correct guess of m At this point, I am trying to lose, so I guess b. This results in what is de ...

CHAPTER 9 Figure 9-12. In this game, e appears in two spots. I make some other guesses and finally get this word correct. Again, ...

HANGMAN placing the names of the functions in an array. This implementation also demonstrates the use of external script files f ...

CHAPTER 9 var words = [ "muon", "blight","kerfuffle","qat" ]; Notice that the words are all different lengths. This means that w ...

HANGMAN var i; var x; var y; var uniqueid; var an = alphabet.length; for(i=0;i<an;i++) { uniqueid = "a"+String(i); d = docume ...

CHAPTER 9 setting of 'letters', and the secret word letter div elements have a setting of 'blanks'. The style section contains t ...

HANGMAN The next line in the code is ctx.beginPath();, and it
s followed by a sequence of operations to draw lines or arcs or mo ...

CHAPTER 9 The drawnoose function makes use of the same technique, except that, for the noose, the oval is wide as opposed to nar ...

HANGMAN Check if the game has been won by comparing lettersguessed to secret.length. If the game is won, remove event handling ...

CHAPTER 9 The iteration does not stop when a guess is correct; it keeps going. This means that all instances of any one letter w ...

HANGMAN setupgame function if you want the player to start with a blank page and not with the representation of the wooden beams ...

CHAPTER 9 Code Explanation var alphabet = "abcdefghijklmnopqrstuvwxyz"; Defines letters of the alphabet, used for alphabet butto ...