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


Posted in HTML / CSS onJanuary 07, 2013

今天我们要用canvas制作一个猜字母的小游戏,先来张效果图。
html5 canvas-2.用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
HTML / CSS 相关文章推荐
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
css3使网页、图片变成灰色兼容大多数浏览器
Jul 02 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
用纯CSS3实现网页中常见的小箭头
Oct 16 HTML / CSS
html5文本内容_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5 Canvas 起步(1) - 基本概念
May 12 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
Jul 25 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
html5使用canvas实现弹幕功能示例
Sep 11 HTML / CSS
使用HTML5 Geolocation实现一个距离追踪器
Apr 09 HTML / CSS
详解WebSocket跨域问题解决
Aug 06 HTML / CSS
分享几个实用的CSS代码块
Jun 10 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
Jan 07 #HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 #HTML / CSS
html5指南-2.如何操作document metadata
Jan 07 #HTML / CSS
html5指南-3.如何实现html元素拖拽功能
Jan 07 #HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 #HTML / CSS
html5指南-5.使用web storage存储键值对的数据
Jan 07 #HTML / CSS
html5指南-6.如何创建离线web应用程序实现离线访问
Jan 07 #HTML / CSS
You might like
php采集内容中带有图片地址的远程图片并保存的方法
2015/01/03 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
javascript instanceof 内部机制探析
2010/10/15 Javascript
toggle()隐藏问题的解决方法
2014/02/17 Javascript
jQuery实现从身份证号中获取出生日期和性别的方法分析
2016/02/25 Javascript
JS 动态加载js文件和css文件 同步/异步的两种简单方式
2016/09/23 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
2017/04/01 Javascript
AngularJS实现注册表单验证功能
2017/10/16 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
基于layPage插件实现两种分页方式浅析
2019/07/27 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
python通过yield实现数组全排列的方法
2015/03/18 Python
Python实现并行抓取整站40万条房价数据(可更换抓取城市)
2016/12/14 Python
python3中int(整型)的使用教程
2017/03/23 Python
python生成密码字典的方法
2018/07/06 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
selenium框架中driver.close()和driver.quit()关闭浏览器
2020/12/08 Python
Python: glob匹配文件的操作
2020/12/11 Python
软件测试面试题
2015/10/21 面试题
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
会计电算化专业毕业生自荐信
2013/12/20 职场文书
乔丹名人堂演讲稿
2014/05/24 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
网络工程专业大学生求职信
2014/10/01 职场文书
公务员检讨书
2014/11/01 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
给朋友的赠语
2015/06/23 职场文书
React配置子路由的实现
2021/06/03 Javascript
MySQL查询日期时间
2022/05/15 MySQL