首页 > 作文

html5 canvas

更新时间:2023-04-03 06:31:07 阅读: 评论:0

今天我们要用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 条评论)
   
验证码:
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图