本日我们要用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 （编辑：湖南网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
