html5 canvas-2. Use canvas to create a small game of guessing letters_html5 tutorial skills

Today we are going to use canvas to make a small letter-guessing game. Let’s take a look at the renderings first.

The game design is very simple. The system will randomly select one of the 26 letters from a-z and save it. When you enter a letter on the keyboard, the system will prompt you whether the correct character is smaller or larger than the letter you are currently inputting. The game doesn't end until you enter the correct letter.
The following introduces some variables that need to be used in js code and their meanings. The system will initialize these variables at the beginning.
guesses: the number of times the user has guessed letters;
message: instructions to help players play the game;
letters: an array that saves 26 English letters;
today: the current time;
letterToGuess: The letters selected by the system are the letters you need to guess;
higherOrLower: prompts the user whether the letter currently entered is higher or smaller than the answer;
lettersGuessed: the letters the user has already guessed;
gameOver: whether the game is Finish.

Copy code

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;

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

Copy the code

The code is as follows:

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

Copy code

The code is as follows:

function eventKeyPressed(e) {
//First determine whether the game is over
if (!gameOver) {
//Get the input letter
var letterPressed = String.fromCharCode(e .keyCode);
//Do lowercase processing
letterPressed = letterPressed.toLowerCase();
//Increase the number of games by 1
guesses;
//Save the entered letters to the guessed letters Array
lettersGuessed.push(letterPressed);
//Determine whether the input letter and the answer are consistent. If they are consistent, the game is over
if (letterPressed == letterToGuess) {
gameOver = true;
} else {
//Get the position of the answer in the letter array
var letterIndex = letters.indexOf(letterToGuess);
//Get the position of the input letter in the letter array
var guessIndex = letters. indexOf(letterPressed);
Debugger.log(guessIndex);
//Judge 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";
}
}
//Redraw canvas
drawScreen();
}
}

One thing to note here is that when we need to modify the image in the canvas When, the entire canvas object is generally redrawn. So every time we guess a letter, drawScreen will be executed to draw all objects on the entire canvas.
Let’s take a look at what drawScreen does.

Copy code

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('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);
}
}

代码很简单，就是绘制背景，还有文字信息。下面我们介绍导入图像的功能，当我们点击“Export Canvas Image”按钮的时候，会打开一个新的页面，显示当前的图像。注意toDataURL()方法，他会返回一个64位的png图片数据。

复制代码

代码如下:

$('#createImageData').click(function () {
window.open(theCanvas.toDataURL(), 'canvasImage', 'left=0,top=0,width=' theCanvas.width ',height=' theCanvas.height ',toolbar=0,resizab le=0');
});

大家还是直接运行demo，查看最终效果吧。demo下载地址：html5canvas.guessTheLetter.zip