0%

canvas 做的猜字游戏

HTML5 canvas 做的小游戏,猜字母。字母为电脑随机产生的a到z之间的一个字母,一共有3次机会(可以修改),并且每次猜测之后都会有提示,正确的字母会在游戏结束后显示。下面为主界面,它是由canvastoDataURL()方法导出的图片。

download

程序主要分三块:initGame(),keyPressed(),drawScreen(),最后还有导出图像的函数createImageDataPressed()

整个图形是由HTML5 Canvas画的,每一次按键都会触发一次keyPressed()事件,事件触发后设置一些变量,如按下的键,剩余的猜测次数,然后对canvas重新绘制,不重新绘制它会和之前画的重叠在一起。对canvasheightwidth设置一次值它就会重新绘制,这是它的巧妙之处。但是不能做到保留不变的,绘制变化的部分,所以有好有坏。这一特性经常被用来清除画布内容。

第一步:设置一些全局变量,以便各个函数能够随时读取。

以下是要设置的值:

1
2
3
4
5
6
7
8
9
10
11
12
var canv = document.getElementById('game')
, contxt = canv.getContext('2d')
, guess = 3 //猜测的次数
, message = "Guess The Letter From a(lower) to z(higher)"//游戏提示
, 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"]
, today = new Date()//日期显示
, letterToGuess = ""//系统随机产生的待猜测的字母
, letterToGArray = []//游戏结束时,用于显示待猜测字母
, LowerOrHigher = ""//每次键按下后对用户提示
, lettersGuessed//存放已经按过的字母
, index//待猜测字母在letters数组中的索引值
, game = false;//用户猜测成功后为true

index为待猜测字母在letters数组中的索引值,它由初始化函数initGame()产生,index = Math.floor(Math.random()*letters.length);js的Math.random()产生的是一个大于0小于1的双精度浮点数。

第二步:主要函数

初始化函数主要对前面的变量进行初始化,并且对按键事件建立监听。

1
2
3
4
5
6
7
8
9
10
function initGame(){
index = Math.floor(Math.random()*letters.length);
letterToGuess = letters[index];
//console.log(letterToGuess);
lettersGuessed = [];
window.addEventListener('keyup',keyPressed,true);
var formElement = document.getElementById('createImageData');
formElement.addEventListener('click',createImageDataPressed,false);
drawScreen();
}

事件触发之后就能绘制图像了。这里的关键就是对按键事件的监听。其中函数fromCharCode(e.keyCode)为判断按下的是什么键的提供了很大的便利。它返回按下的键的值,然后就可以在letters数组中遍历,如果没找到,即返回-1,则用户没有按要求按下字母,返回的是>=0的数字,就可以与index相比较判断用户输得字母是低了还是高了,a方为低,z方为高。如果与index相等,那用户就赢了。但是不知道是不是编码的问题,按下其他键比如空格键、分号、逗号等它显示的是希腊字母。letterToGArray[]数组初始化为空数组,只有游戏结束是才会给它push进去一个值,即letterToGuess

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function keyPressed(e){
if(!game && guess>0){
var keyPressed = String.fromCharCode(e.keyCode)//获得按下的键的值
, keyPressedIndex;
keyPressed = keyPressed.toLowerCase();
lettersGuessed.push(keyPressed);
keyPressedIndex = letters.indexOf(keyPressed);
if(keyPressedIndex >= 0){
guess = guess - 1;
if(keyPressedIndex === index) {
game = true;//用户获胜,game的值为true
LowerOrHigher = "You win!";
letterToGArray.push(letterToGuess);
} else {
if(guess > 0) {
if(keyPressedIndex > index) {
LowerOrHigher = "Lower";
}
if(keyPressedIndex < index) {
LowerOrHigher = "Higher";
}
}
if(guess == 0 && game == false) {
letterToGArray.push(letterToGuess);
LowerOrHigher = "game over!";
}
}
} else{
LowerOrHigher = "That is not a letter";
if(guess == 0) {
letterToGArray.push(letterToGuess);
}
}
}
canv.height = "300";//重新绘制
drawScreen();
}

drawScreen()就没有什么悬念了,都是一些基本的操作,不做展示。还需值得一提的是canvastoDataURL(),它能将canvas以图像的形式导出。但是从它的名字可以看出,它将返回的是图像的数据,以便存储或导出。

1
2
3
4
function createImageDataPressed (e) {
window.open(canv.toDataURL(),"cavasImage","left=0,top=0,
width="+canv.width+",height="+canv.height+",toolbar=0,
resizable=0");}

live demo: http://www.tomo.im/guess-game