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