首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

借助HTML5 Canvas API制作一个简单的猜字游戏

Posted in HTML / CSS onMarch 25, 2016

二话不说，先上效果图以及源代码~
借助HTML5 Canvas API制作一个简单的猜字游戏

HTML代码

XML/HTML Code复制内容到剪贴板
  1. <!doctype html>  
  2. <html lang="en">  
  3.     <head>  
  4.         <meta charset="utf-8" />  
  5.         <script type="text/javascript" src="chp1_guess_the_letter.js"></script>  
  6.         <script type="text/javascript" src="modernizr.custom.99886.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <canvas id="canvas_guess_the_letter" width="500" height="300">  
  10.             你的浏览器不支持HTML5 Canvas   
  11.         </canvas>  
  12.         <form>  
  13.             <input type="button" id="createImageData" value="Export Canvas Image" />;   
  14.         </form>  
  15.     </body>  
  16. </html>  

JS代码

JavaScript Code复制内容到剪贴板
  1. /**  
  2.  * @author Rafael  
  3.  */  
  4. window.addEventListener("load", eventWindowLoaded, false);   
  5.   
  6. var Debugger = function() {   
  7.        
  8. };   
  9. Debugger.log = function(message) {   
  10.     try {   
  11.         console.log(message);   
  12.     } catch(exception) {   
  13.         return;   
  14.     }   
  15. }   
  16.   
  17. function eventWindowLoaded() {   
  18.     canvasApp();   
  19. }   
  20.   
  21. function canvasSupport() {   
  22.     return Modernizr.canvas;   
  23. }   
  24.   
  25. function canvasApp() {   
  26.     var guesses = 0;   
  27.     var message = "Guess The Letter From a(lower) to z(higher)";   
  28.     var letters = ["a","b","c","d","e","f","g","h","i","j","k","l",   
  29.                     "m","n","o","p","q","r","s","t","u","v","w","x","y","z"];   
  30.     var today = new Date();   
  31.     var letterToGuess = "";   
  32.     var higherOrLower = "";   
  33.     var letterGuessed = [];   
  34.     var gameOver = false;   
  35.        
  36.     if(!canvasSupport()) {   
  37.         return;   
  38.     }   
  39.        
  40.     var theCanvas = document.getElementById("canvas_guess_the_letter");   
  41.     var context = theCanvas.getContext("2d");   
  42.        
  43.     initGame();   
  44.        
  45.     function initGame() {   
  46.         var letterIndex = Math.floor(Math.random() * letters.length);   
  47.         letterToGuess = letters[letterIndex];   
  48.         guesses = 0;   
  49.         lettersGuessed = [];   
  50.         gameOver = false;   
  51.         window.addEventListener("keyup", eventKeyPressed, true);   
  52.         var formElement = document.getElementById("createImageData");   
  53.         formElement.addEventListener('click', createImageDataPressed, false);   
  54.         drawScreen();   
  55.     }   
  56.        
  57.     function eventKeyPressed(e) {   
  58.         if(!gameOver) {   
  59.             var letterPressed = String.fromCharCode(e.keyCode);   
  60.             letterPressed = letterPressed.toLowerCase();   
  61.             guesses++;   
  62.             letterGuessed.push(letterPressed);   
  63.             if(letterPressed == letterToGuess) {   
  64.                 gameOver = true;   
  65.             } else {   
  66.                 letterIndex = letters.indexOf(letterToGuess);   
  67.                 guessIndex = letters.indexOf(letterPressed);   
  68.                 if(guessIndex < 0) {   
  69.                     higherOrLower = "请输入正确的字符";   
  70.                 } else if(guessIndex < letterIndex) {   
  71.                     higherOrLower = "小了";   
  72.                 } else {   
  73.                     higherOrLower = "大了";   
  74.                 }   
  75.             }   
  76.             drawScreen();   
  77.         }   
  78.     }   
  79.        
  80.     function drawScreen() {   
  81.         //背景   
  82.         context.fillStyle = "#ffffaa";   
  83.         context.fillRect(0, 0, 500, 300);   
  84.            
  85.         //箱子   
  86.         context.strokeStyle = "#000000";   
  87.         context.strokeRect(5, 5, 490, 290);   
  88.         context.textBaseLine = "top";   
  89.            
  90.         //日期   
  91.         context.fillStyle = "#000000";   
  92.         context.font = "10px _sans";   
  93.         context.fillText(today, 150, 20);   
  94.            
  95.         //消息   
  96.         context.fillStyle = "#FF0000";   
  97.         context.font = "14px _sans";   
  98.         context.fillText(message, 125, 40);   
  99.            
  100.         //猜测次数   
  101.         context.fillStyle = "#109900";   
  102.         context.font = "16px _sans";   
  103.         context.fillText("猜测次数： "+guesses, 215, 60);   
  104.            
  105.         //大还是小   
  106.         context.fillStyle = "#000000";   
  107.         context.font = "16px _sans";   
  108.         context.fillText("大还是小： "+higherOrLower, 150, 135);   
  109.            
  110.         //已经猜测的字符   
  111.         context.fillStyle = "#FF0000";   
  112.         context.font = "16px _sans";   
  113.         context.fillText("已经猜测的字符： "+letterGuessed.toString(), 10, 260);   
  114.            
  115.         if(gameOver) {   
  116.             context.fillStyle = "#FF0000";   
  117.             context.font = "40px _sans";   
  118.             context.fillText("你猜中了", 150, 180);   
  119.         }   
  120.     }   
  121.        
  122.     function createImageDataPressed(e) {   
  123.         window.open(theCanvas.toDataURL(), "canvasImage","left=0, top=0, width="+theCanvas.width+", height="+theCanvas.height+", toolbar=0, resizable=0");   
  124.     }   
  125. }  

从游戏名称可以看出，该游戏是猜字游戏。每局系统都会自动生成一个字母，玩家会按键盘来猜测该字母是哪一个。

例如生成的是s，玩家按了h，则游戏就会提示《小了》，因为英文字母当中h的索引比s的索引更靠前。

案例当中涉及的变量。

guesses：猜测次数
message：文字提示，指导用户如何玩该游戏
letters：文字数组，存放我们要猜测的文字的集合。这个例子用的是a到z
today：今天的日期
letterToGuess：要猜测的文字
higherOrLower：是《大了》还是《小了》
letterGuessed：已经猜测过得文字
gameOver：游戏是否结束，是布尔变量，开始的时候是false，猜对后设为true

变量的声明

JavaScript Code复制内容到剪贴板
  1. var guesses = 0;   
  2. var message = "Guess The Letter From a(lower) to z(higher)";   
  3. var letters = ["a","b","c","d","e","f","g","h","i","j","k","l",   
  4.                 "m","n","o","p","q","r","s","t","u","v","w","x","y","z"];   
  5. var today = new Date();   
  6. var letterToGuess = "";   
  7. var higherOrLower = "";   
  8. var letterGuessed = [];   
  9. var gameOver = false;  

初始化游戏

JavaScript Code复制内容到剪贴板
  1. function initGame() {   
  2.         var letterIndex = Math.floor(Math.random() * letters.length);   
  3.         letterToGuess = letters[letterIndex];   
  4.         guesses = 0;   
  5.         lettersGuessed = [];   
  6.         gameOver = false;   
  7.         window.addEventListener("keyup", eventKeyPressed, true);   
  8.         var formElement = document.getElementById("createImageData");   
  9.         formElement.addEventListener('click', createImageDataPressed, false);   
  10.         drawScreen();   
  11.     }  

通过使用Math的random()函数和floor()函数，根据文字的数组生成要猜测的文字。

并且当用户按键盘的时候监听《keyup》事件，根据传递过来的event，生成按下的键值。

因猜测游戏对大小写不敏感，为防止用户按大写字母，我们需要把值转换成小写形式。

猜测次数+1

猜测出来的文字添加到已经猜测的文字数组当中

JavaScript Code复制内容到剪贴板
  1. var letterPressed = String.fromCharCode(e.keyCode);   
  2. letterPressed = letterPressed.toLowerCase();   
  3. guesses++;   
  4. letterGuessed.push(letterPressed);   

剩下的就只有判断 大和小了。

通过indexOf函数 我们可以判断要猜测的文字和我们输入的文字在字符集上面的索引值。

如果我们输入的更靠前则提示《小了》反之《大了》

最终用户猜对了要猜测的文字 我们会在中央用大号字体显示《你猜对了》

JavaScript Code复制内容到剪贴板
  1. letterIndex = letters.indexOf(letterToGuess);   
  2. guessIndex = letters.indexOf(letterPressed);   
  3. if(guessIndex < 0) {   
  4.     higherOrLower = "请输入正确的字符";   
  5. } else if(guessIndex < letterIndex) {   
  6.     higherOrLower = "小了";   
  7. } else {   
  8.     higherOrLower = "大了";   
  9. ｝  

 

至此这个功能差不多完成了吧，我们还有一个小功能，那就是通过按下按钮的方式可以把屏幕结果抓去出来。

用的函数为toDataUrl()，有兴趣的朋友研究一下。

借助HTML5 Canvas API制作一个简单的猜字游戏

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
介绍CSS3使用技巧5个
Apr 02 HTML / CSS
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
Sep 02 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 HTML / CSS
css3实现二维码扫描特效的示例
Oct 29 HTML / CSS
CSS 说明横向进度条最后显示文字的实现代码
Nov 10 HTML / CSS
HTML5 与 XHTML2
Oct 17 HTML / CSS
html5指南-1.html5全局属性(html5 global attributes)深入理解
Jan 07 HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
使用HTML5 Canvas API控制字体的显示与渲染的方法
Mar 24 #HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
Mar 24 #HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
Mar 22 #HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 #HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 #HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
Mar 22 #HTML / CSS
使用HTML5 Canvas API绘制弧线的教程
Mar 22 #HTML / CSS
shell(3) 防盗链(1) 二级域名(1) reload(1) 前后端分离(1) 反向代理(2) 443(1) SSL(3) 默认端口(3) 压力测试(1)
You might like
咖啡的种类和口感
2021/03/03 新手入门
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
利用phpexcel对数据库数据的导入excel（excel筛选）、导出excel
2017/04/27 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
phpfpm的作用和用法
2019/10/10 PHP
js中eval详解
2012/03/30 Javascript
js捕获鼠标右键菜单中的粘帖事件实现代码
2013/04/01 Javascript
AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法
2014/06/06 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
2015/05/11 Javascript
php结合imgareaselect实现图片裁剪
2015/07/05 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
Vue-cli创建项目从单页面到多页面的方法
2017/09/20 Javascript
layui 对弹窗 form表单赋值的实现方法
2019/09/04 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
JavaScript数组排序功能简单实现
2020/05/14 Javascript
Vue scoped及deep使用方法解析
2020/08/01 Javascript
[01:20]2018DOTA2亚洲邀请赛总决赛战队Mineski晋级之路
2018/04/07 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
Python max内置函数详细介绍
2016/11/17 Python
Django model序列化为json的方法示例
2018/10/16 Python
在scrapy中使用phantomJS实现异步爬取的方法
2018/12/17 Python
Form表单及django的form表单的补充
2019/07/25 Python
Django发送邮件功能实例详解
2019/09/02 Python
flask 实现上传图片并缩放作为头像的例子
2020/01/09 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
美国紧身牛仔裤品牌：NYDJ
2017/05/24 全球购物
美国校园市场：OCM
2017/06/08 全球购物
Crocs美国官方网站：卡骆驰洞洞鞋
2017/08/04 全球购物
印尼极简主义和实惠的在线家具店：Fabelio
2019/03/27 全球购物
做一个有道德的人活动实施方案
2014/08/23 职场文书
创业计划书之服装
2019/10/07 职场文书
通过Qt连接OpenGauss数据库的详细教程
2021/06/23 PostgreSQL