This is a simple game where you press a key on the keyboard to try to guess the letter. Counters keep track of what letters you’ve guessed and how many attempts you’ve made. This is the first game I’ve attempted in HTML5 and honestly it took longer than I expected, but I did learn a lot about making HTML5 canvas games.

This game uses my HTML5 canvas skeleton.

The JavaScript

Below is the JavaScript source code, which can also be found in the canvasApp.js file. I’ve tried to document it thoroughly so it’s easy to understand.

$(document).ready(function() {
  // Uses Modernizr.js to check for canvas support
  function canvasSupport() {
    return Modernizr.canvas;
  }

  canvasApp();

  function canvasApp() {
    // Check for canvas support
    if (!canvasSupport()) {
      return;
    }

    // Grab the canvas and set the context to 2d
    var theCanvas = $("#canvasOne");
    var context = theCanvas.get(0).getContext("2d");

    // Initialize the variables for the game.
    var instructions = "Press a key on the keyboard to try to guess the correct letter."
    var letters = [
     "a","b","c","d","e","f","g","h","i","j","k","l","m","n","o",
"p","q","r","s","t","u","v","w","x","y","z" ];
    var feedback = "";
    var today = new Date();
    var guesses = 0;
    var lettersGuessed = [];
    var gameOver = false;    

    // Set up the game
    initGame();

    function initGame() {
      // Generate a random letter from the letters array
      var letterIndex = Math.floor(Math.random() * letters.length);
      var letterToGuess = letters[letterIndex];

      // Check for a keypress
      $(document).keyup(handleKeypress);

      drawScreen();

      function handleKeypress(e) {
        if (!gameOver) {
          var letterPressed = String.fromCharCode(e.keyCode);
          letterPressed = letterPressed.toLowerCase(); // in case of caps lock
          guesses += 1;
          lettersGuessed.push(letterPressed);

          if (letterPressed == letterToGuess) {
            gameOver = true;
          } else {
            // Grab the positions of the letter to guess and the letter pressed
            letterIndex = letters.indexOf(letterToGuess);
            guessIndex = letters.indexOf(letterPressed);

            // Check where the pressed letter is in relation to the letter to guess
            if (guessIndex < 0) {               feedback = "That is not a letter.";

             } else if (guessIndex > letterIndex) {
              feedback = "Higher! (Closer to A)";
            } else {
              feedback = "Lower! (Closer to Z)";
            }
          }
          drawScreen();
        }
      }

      function drawScreen() {
        // Background
        context.fillStyle = "#ffffff";
        context.fillRect(0, 0, 500, 300);

        // Black Box
        context.strokeStyle = "#000000";
        context.strokeRect(5, 5, 490, 290);

        context.textBaseline = "top";

        // Date
        context.fillStyle = "#000000";
        context.font = "10px _sans";
        context.fillText(today, 150, 10);

        // Instructions
        context.fillStyle = "#ff0000";
        context.font = "14px _sans";
        context.fillText(instructions, 80, 30);

        // Guesses
        context.fillStyle = "#109910"
        context.font = "16px _sans";
        context.fillText("Guesses: " + guesses, 215, 50)

        // Feedback
        context.fillStyle = "#109910";
        context.font = "16px _sans";
        context.fillText("Feedback: " + feedback, 100, 125);

        // Letters Guessed
        context.fillStyle = "#ff0000";
        context.font = "16px _sans";
        context.fillText("Letters Guessed: " + lettersGuessed.toString(), 10, 260);

        // Victory Message
        if (gameOver) {
          context.fillStyle = "#ff0000";
          context.font = "40px _sans";
          context.fillText("You Guessed It!", 120, 180);
        }
      }
    }
  }
});

The Game

I originally tried to embed the game into this blog post, but it broke my template. I searched Reddit, Google, and even joined the WordPress IRC channel to search for a solution, but apparently there is none – either your canvas app seems to work on your blog or it doesn’t, at least for now anyway.

I’ve uploaded the game here: https://www.zesix.com/html5/guessTheLetter

I’ve been reading quite a few books and online articles lately in order to pick up HTML5 canvas and refresh my memory of JavaScript that I had forgotten. Along the way I’ve learned quite a few things about detecting HTML5 capability, getting HTML5 to work in older versions of IE that don’t support it, and why waiting for the page to finish loading before running any JavaScript is bad. In the end, I’ve created a skeleton file for HTML5 work that handles all of the above problems that I’ll show after I discuss the three main issues above.

Detecting HTML5 Capability

There are three popular ways to detect HTML5 capability. First is to use an if-statement in pure JavaScript:

if (!theCanvas || !theCanvas.getContext) {
  return;
}

This tests two things: whether theCanvas is not false and whether the getContext() function exists. The second method, popularized by Mark Pilgrim on his HTML5 site http://www.diveintohtml5.org, uses a function that tests a dummy canvase created to check whether the browser supports it or not:

function canvasSupport() {
  return !!document.createElement('testcanvas').getContext;
}
function canvasApp() {
  if (!canvasSupport) {
    return;
  }
}

The third, shortest, possibly most efficient and optimized method that I recommend, is to use Modernizr.js (http://www.modernizr.com):

function canvasSupport() {
  return Modernizr.canvas;
}

All three ways are valid, but for the sake of brevity – and also because Modernizr has some cool features – I prefer the last one above.

Getting HTML5 To Work In Older Versions of IE

Any version of Internet Explorer older than 9 does not have canvas support. According to W3, around 1/5 of all Internet users today browse with IE: http://www.w3schools.com/browsers/browsers_stats.asp

Of those IE users, more than half are running on a version older than IE 9: http://www.w3schools.com/browsers/browsers_explorer.asp

This equates to 10% of the people on the web being unable to see or interact with the HTML5 canvas. Instead of telling them to upgrade, there is a script called ExplorerCanvas that will cause the canvas to render on IE browsers prior to version 9 by simply including it in the header. You can find it here: http://code.google.com/p/explorercanvas

Running JavaScript After The Page Has Loaded

In pure JavaScript, the window.onload event allows us to call a function after the web page has finished loading absolutely everything:

window.onload = function() {
// JavaScript code here
}

The problem with this is that window.onload is just too patient and only runs after everything has been loaded. In reality, we want the content to be accessible but we don’t want to wait for every single piece of content to load and become visible before rendering our JavaScript. While perusing the web, I found a solution written by Dean Edwards, Matthias Miller, and John Resig that handles this: http://www.thefutureoftheweb.com/blog/adddomloadevent

The “solution” is basically a lot of code that I personally would rather not have in my JS. Thankfully, the $(document).ready() function in jQuery is optimized to handle all that:

$(document).ready(function() {
// JavaScript goes here
}

 Putting It All Together – The Skeleton Pack

I’ve combined the three lessons above into a set of skeleton files that I plan to use for all my HTML5 development. Modernizr (http://www.modernizr.com) and ExplorerCanvas (http://code.google.com/p/explorercanvas) are not Google-hosted so they will need to be downloaded separately. My skeleton pack, however, does include their latest versions as of today’s date.

You can download the skeleton pack here: https://www.zesix.com/html5/html5_skeleton.zip