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