Html5 canvas-2. Create a letter-guessing game with canvas

Source: Internet
Author: User

Comments: Today, we will 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.