首页 前端知识 HTML5 Canvas API制作一个简单的猜字单机游戏

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

2024-06-04 10:06:06 前端知识 前端哥 770 374 我要收藏

这篇文章主要介绍了借助HTML5 Canvas API制作一个简单的猜字单机游戏的实例分享,游戏中每局会自动生成一个字母,玩家按键盘来猜测该字母是哪一个,需要的朋友可以参考下

HTML代码

  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>  

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. }  
  126. 从游戏名称可以看出,该游戏是猜字游戏。每局系统都会自动生成一个字母,玩家会按键盘来猜测该字母是哪一个。

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

    案例当中涉及的变量。

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/10743.html
标签
评论
发布的文章

js-jquery页面跳转集合

2024-06-08 22:06:13

echarts柱状图数据过多

2024-06-08 22:06:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!