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