帝王谷资源网 Design By www.wdxyy.com
今天我们要用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
![html5 canvas-2.用canvas制作一个猜字母的小游戏](/UploadFiles/2021-03-30/201317171221689.png)
游戏设计很简单,系统会随机从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
标签:
canvas,猜字母,小游戏
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
更新日志
2024年07月03日
2024年07月03日
- 绝区零冻结鸣徽有哪些 绝区零冻结鸣徽效果介绍
- 绝区零丽娜角色精美壁纸分享 丽娜高清图片大全
- 《命运2:终焉之形》评测:在线人数几回峰值的史诗新篇
- 《艾尔登法环:黄金树幽影》评测:你所拥有的力量,正是你为王的理由
- 【游新视界】《幻兽帕鲁》帕桑!岛上滴樱花开了,不回来看看吗?
- 群星1996-《96滚石年度最卖座主打歌刷新全纪录·伤心咖啡馆之歌》台湾首版[WAV+CUE]
- 群星.1997-滚石年度最卖座专辑主打歌全纪录·乱世佳人2【滚石】【WAV+CUE】
- 群星1996-《96滚石年度最卖座主打歌刷新全纪录·新好男人2》台湾首版[WAV+CUE]
- Uzi谈停播原因:因锻炼身体太累所以休息了一下
- 纯欲身材经不住镜面反射 如何安慰失意男人的囧图
- Reddit网友称为了迎接《黑神话:悟空》的发售正在通读《西游记》
- 李翊君.1993-苦海女神龙【上华】【WAV+CUE】
- 群星.2009-重温意难忘5CD【新丽声】【WAV+CUE】
- 群星.1991-CINEPOWER【新艺宝】【WAV+CUE】
- 原画壁纸及美图第265期,无水印可自取