Html5canvas-2. Use canvas to make a small game to guess letters _ html5 tutorial skills-

Today, we are going to use canvas to create a letter-guessing game. The game design is very simple. The system will randomly select one of the 26 letters of a-z to save it. Enter a letter on your keyboard, the system will prompt you that the correct characters are smaller or larger than the ones currently entered, and the game will not end until you enter the correct letters, if you are interested, let's take a look at how to use canvas to create a quiz.

The game design is very simple. The system will randomly select one of the 26 letters of a-z to save it. Enter a letter on your keyboard, the system will prompt you that the correct characters are smaller or larger than the ones currently entered, and the game will not end until you enter the correct letters.
The following describes some variables required in js Code and their meanings. The system will initialize these variables at the beginning.
Guesses: the number of times the user guesses letters;
Message: describes how to help gamers play games;
Letters: stores an array of 26 English letters;
Today: current time;
LetterToGuess: The letter selected by the system, that is, the letter you need to guess;
HigherOrLower: indicates whether the current letter entered by the user is smaller than the answer;
LettersGuessed: the letters you have guessed;
GameOver: whether or not the game is over.

The Code is as follows:

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", "w", "x", "y", "z"];
Var today = new Date ();
Var letterToGuess = "";
Var higherOrLower = "";
Var lettersGuessed;
Var gameOver = false;

Next we will introduce the events that are triggered by the keyboard to determine whether the letters entered by the user are correct:

The Code is as follows:

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

The Code is as follows:

Function eventKeyPressed (e ){
// First determine whether the game is over
If (! GameOver ){
// Obtain the input letter
Var letterPressed = String. fromCharCode (e. keyCode );
// Lower case processing
LetterPressed = letterPressed. toLowerCase ();
// Increase the number of games by 1
Guesses ++;
// Save the input letters to the guessed letter Array
LettersGuessed. push (letterPressed );
// Determine whether the input letter and answer are consistent. If they are consistent, the game ends.
If (letterPressed = letterToGuess ){
GameOver = true;
} Else {
// Obtain the location of the answer in the letter Array
Var letterIndex = letters. indexOf (letterToGuess );
// Obtain the position of the input letter in the letter Array
Var guessIndex = letters. indexOf (letterPressed );
Debugger. log (guessIndex );
// Determine the 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 ";
}
}
// Re-paint the canvas
DrawScreen ();
}
}

Note that when we need to modify the image in the canvas, the entire canvas object will be re-drawn. Therefore, every time we guess a letter, we will execute drawScreen to draw all the objects on the canvas.
Next let's take a look at what drawScreen has done.

The Code is as follows:

Function drawScreen (){
// Background
Context. fillStyle = '# ffffaa ';
Context. fillRect (0, 0,500,300 );
// 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, 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 = '#000000 ';
Context. font = '16px _ sans ';
Context. fillText ('her her 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 simple, that is, drawing the background and text information. Next we will introduce the Image import function. When we click the "Export Canvas Image" button, a new page will be opened to display the current Image. Note that the toDataURL () method returns a 64-bit png image data.

The Code is as follows:

$ ('# CreateImageData'). click (function (){
Window. open (theCanvas. toDataURL (), 'canvasimage', 'left = 0, top = 0, width = '+ theCanvas. width + ', height =' + theCanvas. height + ', toolbar = 0, resizab le = 0 ');
});

Run the demo directly to check the final result. Demo: html5canvas.guessTheLetter.zip