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

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

HTML代码

1.   
2.   
3.       
4.           
5.           
6.           
7.       
8.       
9.           
10.             你的浏览器不支持HTML5 Canvas   
11.           
12.         
      
13.             ;   
14.           
15.       
16.   

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