HTML5 Canvas [11]
];
var today = new Date();
var letterToGuess = "";
var higherOrLower = "";
var lettersGuessed;
var gameOver = false;
The initGame() Function
The initGame() function sets up the game for the player. The two most important blocks of code are as follows. This code finds a random letter from the letters array and stores it in the letterToGuess variable:
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
This code adds an event listener to the window object of the DOM to listen for the keyboard keyup event. When a key is pressed, the eventKeyPressed event handler is called to test the letter pressed:
window.addEventListener("keyup",eventKeyPressed,true);
Here is the full code for the function:
function initGame() {
var letterIndex = Math.floor(Math.random() * letters.length);
letterToGuess = letters[letterIndex];
guesses = 0;
lettersGuessed = [];
gameOver = false;
window.addEventListener("keyup",eventKeyPressed,true);
drawScreen();
}
The eventKeyPressed() Function
This function, called when the player presses a key, contains most of the action in this game. Every event handler function in JavaScript is passed an event object that has information about the event that has taken place. We use the e argument to hold that object.
The first test we make is to see whether the gameOver variable is false. If so, we continue to test the key that was pressed by the player; the next two lines of code are used for that purpose. The first line of code gets the key-press value from the event, and converts it to an alphabetic letter that we can test with the letter stored in letterToGuess:
var letterPressed = String.fromCharCode(e.keyCode);
The next line of code converts the letter to lowercase so that we can test uppercase letters if the player unintentionally has Caps Lock on:
letterPressed = letterPressed.toLowerCase();
Next, we increase the guesses count to display, and use the Array.push() method to add the letter to the lettersGuessed array:
guesses++;
lettersGuessed.push(letterPressed);
Now it is time to test the current game state to give feedback to the player. First, we test to see whether letterPressed is equal to letterToGuess. If so, the player has won the game:
if (letterPressed == letterToGuess) {
gameOver = true;
If the player has not won, we need to get the index of letterToGuess and the index of letterPressed in the letters array. We are going to use these values to figure out whether we should display “Higher,” “Lower,” or “That is not a letter.” To do this, we use the indexOf() array method to get the relative index of each letter. Because we alphabetized the letters in the array, it is very easy to test which message to display:
} else {
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
Now we make the test. First, if guessIndex is less than zero, it means that the call to indexOf() returned -1, and the key press was not a letter. We then display an error message:
if (guessIndex < 0) {
higherOrLower = "That is not a letter";
The rest of the tests are simple. If guessIndex is greater than letterIndex, we set the higherOrLower text to “Lower.” Conversely, if guessIndex is less than letterIndex, we set the higherOrLower test to “Higher”:
} else if (guessIndex > letterIndex) {
higherOrLower = "Lower";
} else {
higherOrLower = "Higher";
}
}
Finally, we call drawScreen() to paint the screen:
drawScreen();
Here is the full code for the function:
function eventKeyPressed(e) {
if (!gameOver) {
var letterPressed = String.fromCharCode(e.keyCode);
letterPressed = letterPressed.toLowerCase();
guesses++;
lettersGuessed.push(letterPressed);
if (letterPressed == letterToGuess) {
gameOver = true;
} else {
letterIndex = letters.indexOf(letterToGuess);
guessIndex = letters.indexOf(letterPressed);
Debugger.log(guessIndex);
if (guessIndex < 0) {
higherOrLower = "That is not a letter";
} else if (guessIndex > letterIndex) {
higherOrLower = "Lower";
} else {
higherOrLower