canvas 做的猜字游戏

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

 

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

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

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

以下是要设置的值:

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

第二步:主要函数

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

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

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

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

comments powered by Disqus