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

前端技术 2023/09/09 HTML
今天我们要用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

本文地址：https://www.stayed.cn/item/23453

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案