html5 canvas-2. Make a small game of guessing letters with canvas

Today we are going to use canvas to create a small game of guessing letters, and let’s first draw the renderings.

The game design is very simple. The system will randomly select one of the 26 letters of az and save it. When you enter a letter on the keyboard, the system will prompt you whether the correct characters are smaller or larger than the letter you currently enter, and the game will not end until you enter the correct letters.

The following introduces some variables that need to be used in the js code and their meanings. The system will initialize these variables at the beginning.

guesses: the number of times the user guesses the letter;

message: Instructions for helping players play the game;

letters: save an array of 26 English letters;

today: the current time;

letterToGuess: The letters selected by the system, that is, the letters you need to guess;

higherOrLower: prompts the user whether the letter currently entered is larger or smaller than the answer;

lettersGuessed: letters that the user has guessed;

gameOver: Whether the game is over.

var guesses = 0;

var message = "Guess The Letter From a (lower) to z (higher)";

var letters = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "v", "w", "x", "y", "z"];

var today = new Date();

var letterToGuess = "";

var higherOrLower = "";

var lettersGuessed;

var gameOver = false;

Below we introduce the event that responds to the keyboard pop-up, which is used to determine whether the letters entered by the user are the correct answer:

$(window).bind('keyup', eventKeyPressed);

function eventKeyPressed(e) {

//First determine whether the game is over

if (!gameOver) {

//Get input letters

var letterPressed = String.fromCharCode(e.keyCode);

//Do lowercase processing

letterPressed = letterPressed.toLowerCase();

//Add 1 game number

guesses++;

//Save the input letters to the guessed letter array

lettersGuessed.push(letterPressed);

//Judge whether the input letters and the answer are consistent, if the game ends if the same is true, the game will be over

if (letterPressed == letterToGuess) {

gameOver = true;

} else {

//Get the answer position in the alphabetical array

var letterIndex = letters.indexOf(letterToGuess);

//Get the position of the input letter in the alphabetical array

var guessIndex = letters.indexOf(letterPressed);

Debugger.log(guessIndex);

//Judge size

if (guessIndex < 0) {

higherOrLower = "That is not a letter";

} else if (guessIndex > letterIndex) {

higherOrLower = "Letter is Lower than you entered";

} else {

higherOrLower = "Letter is Higher than you entered";

}

}

//Repaint canvas

drawScreen();

}

}

One thing to note here is that when we need to modify the image in canvas, the entire canvas object will generally be repainted. So every time we guess the letter, we will execute drawScreen to draw all objects on the entire canvas.

Let's see what drawScreen does.

function drawScreen() {

//background

context.fillStyle = '#ffffa';

context.fillRect(0, 0, 500, 300);

//box

context.strokeStyle = '#000000';

context.strokeRect(5, 5, 490, 290);

context.textBaseLine = 'top';

//date

context.fillStyle = '#00000';

context.font = '10px_sans';

context.fillText(today, 150, 20);

//message

context.fillStyle = '#ff0000';

context.font = '14px_sans';

context.fillText(message, 125, 40);

//guesses

context.fillStyle = '#109910';

context.font = '16px_sans';

context.fillText('Guesses:' + guesses, 215, 60);

//higher or lower

context.fillStyle = '#00000';

context.font = '16px_sans';

context.fillText('Higher or Lower:' + higherOrLower, 150, 125);

//letters guessed

context.fillStyle = '#ff0000';

context.font = '16px_sans';

context.fillText('Letters Guessed:' + lettersGuessed.toString(), 10, 260);

if (gameOver) {

context.fillStyle = "#FF0000";

context.font = "40px _sans";

context.fillText("You Got It!", 150, 180);

}

}

The code is very simple, it is to draw the background and text information. Below we introduce the function of importing images. When we click the Export Canvas Image button, a new page will be opened to display the current image. Pay attention to the toDataURL() method, which will return a 64-bit png image data.

$('#createImageData').click(function () {

window.open(theCanvas.toDataURL(), 'canvasImage', 'left=0,top=0,width=' + theCanvas.width + ',height=' + theCanvas.height + ',toolbar=0,resizab le=0');

});

Everyone should run the demo directly to see the final effect. demo download address: HTML5/">html5canvas.guessTheLetter.zip