html5 canvas-2.用canvas制作一个猜字母的小游戏

今天我们要用canvas制作一个猜字母的小游戏，先来张效果图。
 
游戏设计很简单，系统会随机从a-z的26个字母中选择一个保存起来，你键盘输入一个字母，系统会提示你正确字符比你当前输入字母小还是大，直到你输入正确的字母游戏才结束。
下面介绍js代码中需要用到的一些变量及其他们的含义，系统会在开始的时候初始化这些变量。
guesses：用户猜字母的次数；
message：帮助玩家如何玩游戏的说明；
letters：保存26个英文字母的数组；
today：当前时间；
letterToGuess：系统选中的字母，也就是你需要猜中的字母；
higherOrLower：提示用户当前输入的字母比答案大还是小；
lettersGuessed：用户已经猜过的字母；
gameOver：游戏是否结束。

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; 

下面我们介绍响应键盘弹起的事件，用来判断用户输入的字母是否是正确答案：

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

function eventKeyPressed(e) { 
//首先判断游戏是否结束 
if (!gameOver) { 
//获取输入字母 
var letterPressed = String.fromCharCode(e.keyCode); 
//做小写处理 
letterPressed = letterPressed.toLowerCase(); 
//游戏次数加1 
guesses++; 
//把输入字母保存到已猜字母数组 
lettersGuessed.push(letterPressed); 
//判断输入字母和答案是否一致，一致则游戏结束 
if (letterPressed == letterToGuess) { 
gameOver = true; 
} else { 
//获取答案在字母数组中的位置 
var letterIndex = letters.indexOf(letterToGuess); 
//获取输入字母在字母数组中的位置 
var guessIndex = letters.indexOf(letterPressed); 
Debugger.log(guessIndex); 
//判断大小 
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"; 
} 
} 
//重绘canvas 
drawScreen(); 
} 
} 

这里需要注意的一点是，当我们需要对canvas中的图像做修改时，一般会重新绘制整个canvas对象。所以在我们每猜一次字母，都会执行drawScreen把整个canvas上的所有对象都绘制一遍。
下面我们看看drawScreen都干了什么。

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