Build a Hangman game with HTML5 Canvas, JavaScript, and CSS – Part 2: Implementing the game logic

One of the main features of HTML5 is the new <canvas> element, which provides a blank space where you can draw lines and shapes dynamically, as well as add text and images. In this second part of a two-part tutorial series, you'll use the Canvas 2D Context API (application programming interface) to create the graphics for a Hangman word-guessing game. You'll also use HTML5-related web storage to keep record of the user's score, and add a manifest file to make the game usable offline in modern browsers.

The <canvas> element and web storage are supported by the most recent versions of all browsers, but not by older versions of Internet Explorer (IE). To ensure that the game works in IE 6–8, you'll add helper scripts (JavaScript "polyfills") for HTML5 canvas, canvas text, and local storage.

The instructions assume that you have completed Part 1 of this tutorial series. Continue working with your existing files. If you want to be sure you're starting with working code, use the files in hangman_pt2_start.zip (they're identical to hangman_pt1_finish.zip).

When the user selects a letter in the alphabetic keypad, the checkLetter() function tests whether it's in the word to be guessed. If it is, the letter replaces the appropriate underscore(s). Otherwise, it triggers another function to draw part of the gallows and victim. The checkLetter() function also has to keep track of the number of good and bad guesses.

1. Start by initializing a couple of local variables. You need one for the row of underscores and correctly guessed letters. The second variable is used to control the subsequent action, and begins by assuming the guess is incorrect. Amend the checkLetter() function like this:

2. Next, split the placeholders into an array and loop through it to check if the selected letter is in the word to be guessed. If it is, replace the underscore at that point with the letter and increase the number of correct guesses. If it isn't, increase the number of bad guesses and redraw the <canvas> element. Finally, add the placeholders back to the screen. The complete checkLetter() function looks like this:

Each time the loop runs, the conditional statement examines the next letter in the word to guess using charAt() and compares it with the selected letter. The comparison is done using letter.toLowerCase() because all the words are in lowercase. If they match, the letter replaces the current placeholder, resets the local variable wrongGuess to false , and increments the global variable correctGuesses .

If correctGuesses equals the global variable wordLength , it means all the letters have been guessed, and the game has been won. When that happens, you need to redraw the <canvas> element to display the result.

If the selected letter doesn't match any of the letters in the word to guess, wrongGuess remains true, so the badGuesses global variable is incremented and the <canvas> element is redrawn.

Finally, the placeholders array is converted back to a string using the join() method and reinserted in the page.

3. You'll add the programming logic to the drawCanvas() function shortly, but to test the code so far, create a dummy function:

4. Save hangman.js and test the app by loading index.html into Dreamweaver Live view or a browser and clicking New Game. Click a letter in the alphabetic keypad. If it's in the word to be guessed, it will replace one or more underscores in the placeholders as shown in Figure 1. You might need to click several letters before guessing a correct one, but all words contain at least one vowel, so try them first.

The HTML5 <canvas> element creates a blank area within a web page that allows you to draw not only static shapes, text, and other graphic elements, but you can also animate them. In that sense, it's like Flash or Silverlight, except that it works natively in the browser without a plugin. However, using <canvas> is very different. For one thing, there are no dedicated programs—at least not yet—to help build the graphic content. Other important differences are that a <canvas> element doesn't have a timeline, nor can it retain a library of reusable symbols. Each time you update the graphic content, the entire <canvas> needs to be redrawn.

The advantage of using <canvas> is that it's very fast and lightweight. Although you can import images into a <canvas> element, all the shapes in the Hangman game are generated dynamically by JavaScript using the Canvas 2D Context API.

A quick introduction to the Canvas 2D Context API

To draw on a <canvas> element, you need to create a context object using the getContext() method, which takes as its sole argument a string indicating the type of context you want. At the moment, the only type is 2d, but it's expected there'll eventually be 3d as well. This is how you obtain a context object for a <canvas> element with the ID stage :

Once you have a context object, you can draw on the <canvas> element using the object's properties and methods. Table 1 lists the properties used in the Hangman game.

Table 1. Basic Canvas 2D Context properties

Lines, shapes, and other objects are drawn on the <canvas> element using a grid system with its origin (0, 0) at the top-left corner. The X axis increases horizontally to the right, and the Y axis increases vertically downwards. By default, the units along each axis are equivalent to pixels, but this changes if the context is scaled. Table 2 lists the methods used in the Hangman game.

Table 2. Basic Canvas 2D Context methods

Drawing lines and shapes follows a linear process. You set the colors for stroke and fill, line width, and font using the properties in Table 1. Then you use the methods in Table 2 to move to where you want to start drawing, draw a path to outline the shape, and call the stroke() method to render it. You repeat the process to add further lines, shapes, or text. All elements inherit the same properties unless you change their values before adding a new path, shape, or text. One way to think of it is like an artist changing brushes or paint before moving onto the next stroke, except that it's done through a series of written commands rather than visually.

Drawing straight lines

To draw a line on a <canvas> you need to do the following:

• Clear any existing path
• Move to the starting point of the new line
• Draw a path to the end point
• Add a stroke to the path

The gallows and victim in the Hangman game use a lot of straight lines, so it makes sense to create a custom function to perform these four steps instead of repeatedly typing out similar code.

Add the following function definition to hangman.js:

The drawLine() function takes three arguments: the context object, and two arrays containing the coordinates of the start and end points. For example, to draw a straight line from the top-left corner to a point 100 pixels to the right and 50 pixels down, you call the function like this:

This has the same effect as the following four lines of code:

Scripting the drawCanvas() function

When drawing on a <canvas> element, you can't add to an existing design. You need to draw everything afresh each time you want to update it. To avoid a lot of repetitive code, the drawCanvas() function uses conditional statements to control how much to draw of the gallows and victim (see Figure 2) depending on the number of bad guesses.

When the canvas is first drawn, only the ground (the green line) is visible. If badGuesses is more than 0, the upright of the gallows is added. If badGuesses is more than 1, drawCanvas() continues to the cross spar of the gallows. If it's more than 2, it adds the rope and head, and so on.

Because everything needs to be drawn afresh each time, you need to clear the <canvas> element before drawing. Resetting the dimensions of a <canvas> element, even to the same size, automatically deletes its contents. The canvas global variable in hangman.js contains a reference to the <canvas> element, so clearing it is as simple as this:

The drawCanvas() function is quite long, but the preceding explanation and inline comments should help you understand how it works. Here's what it looks like:

Note the following points:

• The font stack specifies Optimer as the first font. This is for browsers that don't support canvas text. You'll load a JavaScript font for older browsers later.
• The head is drawn using the arc() method, which requires the start and end angles to be specified in radians. To convert degrees to radians, you divide π (pi) by 180 and multiply the result by the number of degrees. Setting the start to 0 and the end to 360 degrees is how you draw a complete circle. When drawing a partial arc, a start angle of 0 starts drawing from the 3 o'clock position.
• If the word hasn't been guessed by the end of the game, the showResult() function—which you'll define next—displays the correct result. However, in testing, I found it necessary to delay its execution for 0.2 seconds using setTimeout() . Otherwise, the result fails to appear.
• Code for displaying the score will be added later.

Playing Hangman can be frustrating, so you need to take losers out of their misery by revealing the word they failed to guess. The showResult() function does just that. It's simply an adaptation of the loop in the checkLetter() function, so it needs little explanation. Here's what it looks like:

Each time the loop runs, it checks whether the current placeholder is an underscore. If it is, it replaces it with an uppercase version of the correct letter wrapped in <span> tags with an inline style that sets the color to red.

The Web Storage API offers a simple, yet effective way to store data related to a web page or app on the user's local computer. There are two types of storage:

• Local storage: data is retained until deleted by the user or the web application.
• Session storage: data is automatically deleted when the browser is closed.

The browser automatically allocates separate local and session storage areas for each domain, and stores data as key/value pairs. Data stored by one page is available to any other page from the same domain, although local and session values remain separate. You store and retrieve values using the localStorage and sessionStorage objects and the methods listed in Table 3.

Table 3. Web storage methods.

The key() method is of limited value unless you know the order in which the key/value pairs have been listed. However, the localStorage and sessionStorage objects have a length property, so you can retrieve the name of the most recently stored key like this:

All browsers in widespread use, with the exception of IE 6 & 7, support web storage.

Adding support for local storage in IE 6 & 7

Thanks to Modernizr, you can test whether the browser supports local storage, and load a couple of JavaScript polyfills if it doesn't.

1. Go to https://gist.github.com/350433 to get a copy of the local storage polyfill by Remy Sharp.
2. Click the "raw" link (circled in Figure 3) at the top-right of the JavaScript code area to open the code in the browser window.

3. Use the browser's Save As menu option to save the script as storage_polyfill.js in the hangman/scripts folder.
4. Remy Sharp's polyfill uses JSON (JavaScript Object Notation), which isn't supported by older versions of IE, so you also need a file by Douglas Crockford, the creator of JSON. Go to https://github.com/douglascrockford/JSON-js, and click the link for json2.js.
5. When the script appears, click the "raw" link to load the code into the browser window, and save it as json2.js in hangman/scripts.
6. To ensure these two scripts are loaded only by browsers that don't support local storage, you need to amend the <script> block in the <head> of index.html like this:

This adds two properties to the object literal passed to Modernizr.load() . The first one ( test ) checks whether the browser supports local storage. If it doesn't, the second property ( nope ) loads the two polyfills. Note that json2.js is loaded first because storage_polyfill.js is dependent on it.

The name of the load property in the original script is also changed to both .

The object passed as an argument Modernizr.load() can have the following properties, all of which are optional:

• test : The browser feature you want to test (see Tables 1 and 2 in Using Modernizr to test HTML5 and CSS3 browser support).
• yep : Files to be loaded conditionally if the browser passes the test.
• nope : Files to be loaded conditionally if the browser fails the test.
• both : Files to be loaded by all browsers.
• complete : Code to be executed after all files are loaded.

Storing and displaying the score

The score needs to be set and displayed on three occasions: when the game first loads, when a game is lost, and when a game is won. This means adding code to the init() and drawCanvas() functions. A separate function displays the score. Because local storage is shared by all pages from the same domain, it's important to choose unique names for the keys to avoid overwriting each other's values. So, instead of just win and lose , I'll use hangmanWin and hangmanLose as the local storage keys.

1. The only time the init() function needs to set the score is the first time the game is loaded. It needs to check whether hangmanWin and hangmanLose exist. If they don't, they need to be set to 0. Otherwise, the function that displays the score uses the existing values. Add the following code just before the closing curly brace of init() :

You'll add the code for showScore() shortly.

2. When a game is lost, you need to retrieve the existing value of hangmanLose and increment it by one, then display the score after a pause of two seconds. In drawCanvas() , insert the following code in the conditional statement that runs when badGuesses is greater than seven (it goes in place of the "code to be added later" comment):

The important point to note is that values are stored as strings. That's why localStorage.getItem('hangmanLose') is passed to parseInt() before it's added to 1. If you fail to convert hangmanLose to a number, the values will be concatenated as strings, resulting in 10, 110, 1110, and so on.

3. The code to increase the number of games won is very similar. It goes in the conditional statement that runs if correctGuesses is the same as wordLength :

4. You can now add the function that displays the score. The complete code looks like this:

This is fairly straightforward. The getItem() method retrieves the numbers of wins and losses, which are stored as local variables. A local variable is also created for the <canvas> element's context. The score is then displayed using Canvas 2D Context properties and methods. Note that to change the size of the font for the second line, you need to declare the font weight and font families again. There is no property that sets the font size on its own.

5. You can now replace the dummy code in the resetScore() function that you created in Part 1 of this tutorial. Amend the function like this:

6. Save hangman.js and load index.html into a browser to test it. The score should be displayed as shown in Figure 4.

7. Click the New Game button. As Figure 5 shows, the score remains onscreen.

This seems OK, but if you're lucky enough to guess the first letter correctly, the score still remains onscreen, as shown in Figure 6.

8. Although making a bad guess triggers drawCanvas() , I think it looks better if you remove the score as soon as a new game begins. Amend the newGame() function by adding the following line immediately before the closing curly brace:

9. Save hangman.js and reload index.html in the browser. This time when you click the New Game button, the score is removed, and a horizontal green line appears representing the ground where the gallows will be built (Figure 7).

The Hangman game is now complete, but you can make it available offline by utilizing the application cache in all modern browsers (but not IE 6–8). Unlike the normal browser cache, which stores files temporarily, the application cache stores files indefinitely until they're deleted by the user or updated.

To instruct the browser to download the web app's files, you need to list all the files in a special file called a manifest and attach the manifest to the HTML page.

1. Create a text file and save it as hangman.appcache in the hangman folder.
2. The first line of the manifest must begin with CACHE MANIFEST on a line of its own. Then you list the path and filename of each file you want the browser to store in the application cache. Each file goes on a separate line. It's also recommended to add a line indicating the version number of the manifest. Because IE 6–8 don't support application caches, don't list the JavaScript polyfills for local storage. Otherwise, they will be downloaded by browsers that don't need them. The contents of hangman.appcache should look like this:

3. Attach the manifest to index.html by amending the opening <html> tag like this:

4. The manifest file needs to be served by the web browser with the text/cache‑manifest MIME type. Because application caches are a new feature in HTML5, many web servers are unlikely to support this MIME type. If your site is running on an Apache web server and you have permission to configure it using an .htaccess file, add the following line to your existing .htaccess file or create a new file in your site root:

If your website runs on a different server, or you can't use .htaccess files, contact your hosting company or server administrator and ask for .appcache files to be served with the text/cache-manifest MIME type.

Note: An earlier draft of the HTML5 specification used .manifest as the filename extension for manifest files, but this was later changed to .appcache . Both are acceptable, but .appcache is now the preferred version.

Browsers look only at the manifest when deciding whether a file needs to be stored in the application cache. They ignore the date individual files were created or modified. If you update any of the files listed in a manifest, you need to change the manifest's version number and upload the new manifest with the other files.

Dreamweaver doesn't currently recognize the .appcache or .manifest filename extensions. To edit a manifest, right-click the file in the Files panel and select Open With > Dreamweaver.

To make the Hangman game playable in older versions of Internet Explorer, you need a polyfill called explorercanvas, which emulates most aspects of HTML5 canvas. However, it doesn't support canvas text. So, you also need a polyfill called canvas-text and a font that has been encoded as JavaScript. All the necessary files are free and easy to use.

1. Go to http://code.google.com/p/explorercanvas/downloads/list and download excanvas_r3.zip.
2. Unzip excanvas_r3.zip and copy excanvas.js to the hangman/scripts folder. This is the only file you need from the downloaded package.
3. Go to http://code.google.com/p/canvas-text/source/browse/trunk/canvas.text.js and copy the JavaScript code to your clipboard.
4. Paste the code into a blank JavaScript file and save it as canvas.text.js in the hangman/scripts folder.
5. Go to http://code.google.com/p/canvas-text/source/browse/trunk#trunk%2Ffaces and click the link for optimer-bold-normal.js. This opens a page consisting mainly of numbers that map the Optimer bold font to JavaScript.
6. Copy the JavaScript code and paste it into a JavaScript file.
7. Save the file as optimer-bold-normal.js in the hangman/scripts folder.
8. The explorer canvas polyfill works only with older versions of Internet Explorer, so attach it to index.html before the Modernizr script, and wrap it conditional comment like this:

9. Although the canvas text polyfills are mainly aimed at Internet Explorer, it's possible that someone is using an obscure browser that supports canvas, but not canvas text. Modernizr can test for canvas text and load the files conditionally. Amend the Modernizr.load() script like this:

Instead of passing a single object as the argument to the load() method, this passes an array of two objects. The second object is the same as before. The first one tests for canvas text, and loads the polyfills if the browser doesn't support it.

The iPhone and iPod touch don't have as tall a screen as most Android phones, and the Mobile Safari chrome reduces the available screen even further. To compensate for this, you need to make some adjustments to the size and position of the alphabet keypad. You also need to take into account that iOS always regards width as referring to the horizontal size of the screen in portrait orientation. The iPhone and iPod touch always report height as 480px and width as 320px, regardless of orientation. As a result, the layout doesn't adjust properly when you turn the iPhone or iPod touch into landscape orientation.

To fix these problems, add the following media queries at the bottom of hangman.css:

Because of the screen size on the iPhone and iPod touch, you need to manually scroll the bottom rows of the alphabetic keypad into view when you click the New Game button. Another minor tweak avoids this problem. Add the following line of code just before the closing curly brace in the newGame() function:

This scrolls the page up by 200 pixels on small screens. There’s no movement on larger screens because the bottom of the page is already in view.

You should now have a fully functioning Hangman game that works both online and offline in a wide range of devices. If you run into any problems, check your code against the version in hangman_pt2_finish.zip.

This simple web app has brought together several HTML5-related technologies: canvas, canvas text, local storage, and application cache. It makes extensive use of CSS3 media queries to serve different styles depending on the width and orientation of the screen. You've also seen how Modernizr and polyfills can fill in the cracks in older browsers that don't support all the latest features.

My book, Adobe Dreamweaver CS5.5 Studio Techniques: Designing and Developing for Mobile with jQuery, HTML5, and CSS, covers local storage and application cache in greater depth. You might also find the following resources helpful:

• Learn to use HTML5 canvas
• Let's call it a draw(ing surface)
• Introducing the HTML5 storage APIs
• Let's take this offline
• Using Modernizr to detect HTML5 and CSS3 support
• Modernizr documentation
• HTML5 cross-browser polyfills