首页
所有分类
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 相关文章推荐
让IE6支持css3，让 IE7、IE8 都支持CSS3
Oct 09 HTML / CSS
CSS3正方体旋转示例代码
Aug 08 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
Oct 17 HTML / CSS
HTML5里的placeholder属性使用实例和美化显示效果的方法
Apr 23 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
Oct 16 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
Dec 02 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 HTML / CSS
CSS3 制作的书本翻页特效
Apr 13 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
监听(2) okenizer(1) re模块(2) vue-cli3.x(1) sched(1) 事件调度器(1) scss(1) 分词器(1) 项目打包(2) watch(1)
You might like
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
PHP命名空间用法实例分析
2019/09/04 PHP
escape编码与unescape解码汉字出现乱码的解决方法
2014/07/02 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
2015/02/02 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
轻松实现js选项卡切换效果
2016/09/24 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
JavaScript箭头(arrow)函数详解
2017/06/04 Javascript
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）
2018/01/07 Javascript
复习Python中的字符串知识点
2015/04/14 Python
python中threading超线程用法实例分析
2015/05/16 Python
python 动态生成变量名以及动态获取变量的变量名方法
2019/01/20 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python 等分切分数据及规则命名的实例代码
2019/08/16 Python
python面向对象之类属性和类方法案例分析
2019/12/30 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
Python中logger日志模块详解
2020/08/04 Python
pycharm 代码自动补全的实现方法(图文)
2020/09/18 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店：Focus Point
2018/12/13 全球购物
员工培训心得体会
2013/12/30 职场文书
新三好学生主要事迹
2014/01/23 职场文书
2014年元旦促销活动方案
2014/02/22 职场文书
意外死亡赔偿协议书
2014/10/14 职场文书
党的群众路线教育实践活动个人对照检查材料（公安）
2014/11/05 职场文书
抄袭同学作业检讨书1000字
2014/11/20 职场文书
后勤个人工作总结
2015/02/28 职场文书
优秀家长事迹材料（2016推荐版）
2016/02/29 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers