今天我们要用canvas制作一个猜字母的小游戏,先来张效果图。
游戏设计很简单,系统会随机从a-z的26个字母中选择一个保存起来,你键盘输入一个字母,系统会提示你正确字符比你当前输入字母小还是大,直到你输入正确的字母游戏才结束。
下面介绍js代码中需要用到的一些变量及其他们的含义,系统会在开始的时候初始化这些变量。
guess:用户猜字母的次数;
message:帮助玩家如何玩游戏的说明;
letters:保存26个英文字母的数组;
today:当前时间;
lettertoguess:系统选中的字母,也就是你需要猜中的字母;
higherorlower:提示用户当前输入的字母比答案大还是小;
lettersguesd:用户已经猜过的字母;
gameover:游戏是否结束。
复制代码 代码如下:
var guess = 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 higherorl机动车驾驶员交通违章记分办法ower = “”;
var lettersguesd;
var gameover = fal;
下面我们介绍响应键盘弹起的事件,用来判断用户输入的字母是否是正确答案:
复制代码 代码如下:
$(window).bind(‘keyup’, eventkeypresd);
微单反复制代码 代码如下:
function eventkeypresd(e) {
//首先判断游戏是否结束
if (!gameover) {
//获取输入字母
var letterpresd = string.fromcharcode(e.keycode);
//做小写处理
letterpresd = letterpresd.tolowerca();
//游戏次数加1
guess++;
//把输入字母保存到已猜字母数组
lettersguesd.push(letterpresd);
//判断输入字母和答案是否一致,一致则游戏结束
if (letterpresd == lettertoguess) {
gameover = true;
} el {
//获取答案在字母数组中的位置
var letterindex = letters.indexof(lettertoguess);
//获取输入字母在字母数组中的位置
var guessindex = letters.indexof(letterpresd);
debugger.log(guessindex);
//判断大小
if (guessindex < 0) {
higherorlower = “that is not a letter”;
} el if (guessindex > letterindex) {
higherorlower = “letter is lower than you entered”;
} el {
higherorlower = “letter is higher than you entered”;
}
}
//重绘can湖南文理学院官网vas
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.textbaline = ‘top̵聪明的孩子晚开窍7;;
//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);
//guess
context.fillstyle = ‘#109910’;
context.font = ’16px_sans’;
context.filltext(‘guess:’ + guess, 215, 60);
//higher or lower
context.fillstyle = ‘#000000’;
context.font = ’16px_sans’;
context.filltext(‘higher or lower:’ + higherorlower, 150, 125);
//letters guesd
context.fillstyle = ‘#ff0000’;
context.font = ’16px_sans’;
context.filltext(‘letters guesd:’ + lettersguesd.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
本文发布于:2023-04-03 06:31:05,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/0c9b086138775efdb3ff76555788e528.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:html5 canvas.doc
本文 PDF 下载地址:html5 canvas.pdf
留言与评论(共有 0 条评论) |