HTML5 canvas-2. letter game

Today, we are going to use canvas to create a quiz. Let's take a look at it first.

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.

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:

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

Function eventkeypressed (e) {// first judge whether the game is over if (! Gameover) {// obtain the input letter var letterpressed = string. fromcharcode (E. keycode); // lower case processing letterpressed = letterpressed. tolowercase (); // Add 1 guesses ++ to the number of games; // Save the input letter to the guessed letter array lettersguessed. push (letterpressed); // determines whether the input letter is consistent with the answer. If it is the same, 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 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.

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('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 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.

$('#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