随着对canvas的深入了解，发现canvas真是个好东西，也发现android真烂，哎！

最近在用canvas做小游戏，简单的跑酷类，打地鼠类的小游戏做了一遍，今天先写一个打地鼠的制作心得。

PS:以前用JS做过打地鼠的游戏，现在看看真心烂。

首先我使用的是lufylegend.js 1.9.1的版本（非常好用的引擎，强烈推荐）。

在制作过程中先来分析打地鼠的游戏大概需要那几个模块：

1.老鼠这个对象。

2.游戏背景。

3.开始及结束。

首先来初始化引擎，lufylegend.js引擎初始化通过LInit(time,"id",x,y,main)实现；

引擎提供loading效果，当图片及js加载完毕后，删除loading效果，进入开始界面。

function main(){
if(LGlobal.canTouch){
LGlobal.stageScale = LStageScaleMode.SHOW_ALL;
LSystem.screen(LStage.FULL_SCREEN);
}
loadingLayer = new LoadingSample4();
addChild(loadingLayer);
LLoadManage.load(loadData, function(progress) {
loadingLayer.setProgress(progress);
}, imgLoadComplete);
};
function imgLoadComplete(result) {
datalist = result;
removeChild(loadingLayer);
loadingLayer = null;
var background = new Background();

开始界面先执行background函数来实现背景的创建，在background里来执行time、character函数；

function Background(){
base(this,LSprite,[]);
this.init();
};
Background.prototype.init = function(){
var self = this;
backLayer = new LSprite;
stageLayer = new LSprite;
addChild(backLayer);
self.bitmap = new LBitmap(new LBitmapData(datalist["background"],0,0,640,960));
backLayer.addChild(this.bitmap);
//console.log(this.bitmap.childList);
self.back = new LBitmap(new LBitmapData(datalist["backCove"],0,0,640,960));
self.back.x = 0;
self.back.y = 0;
backLayer.addChild(self.back);
timeLayer = new LSprite();
backLayer.addChild(timeLayer);
time = new Time();
timeLayer.addChild(time);
charaLayer = new LSprite();
backLayer.addChild(charaLayer);
}；

time函数是通过时间来控制进度条的缩放，通过scroleX来改变时间进度条的长短。

character函数创建对象，通过对象的操控可以方便的对每个对象进行事件监听。

function Character(){
base(this,LSprite,[]);
this.init();
};
Character.prototype.init = function(){
var self = this;
self.x = adressData[adressNum][0];
self.y = adressData[adressNum][1];
self.adressNum = adressNum;
var charaNum = parseInt(Math.random()*4);
self.index = charaNum;
self.bitmap = new LBitmap(new LBitmapData(datalist[charaData[charaNum]]));
self.addChild(self.bitmap);
self.speed = 5;
self.canClick = false;
self.clickSpeed = 2;
};

当然要注意的是地鼠出现的位置不能重复，我通过数组的方法，每次随机出现的位置与数组内做比较，如果重复则重新随机数，不重复添加到数组中，并对对象进行赋值。当打到地鼠的时候删除数组中的这个位置。

Character.prototype.hide = function(obj){
var self = obj;
self.bitmap = new LBitmap(new LBitmapData(datalist[charaData[self.index][0]+"J"]));
charaLayer.addChild(self);
self.canClick = true;
self.addChild(self.bitmap);
self.x = adressData[self.adressNum][0];
self.y = adressData[self.adressNum][1];
for(var key in charaLayer.childList){
charaLayer.childList[key].clickSpeed -= 1;
if(self.canClick == true && charaLayer.childList[key].speed <= 0){
//移除该成员
var that = charaLayer.childList[key];
point += 100;
arr.remove(that.adressNum);
charaLayer.removeChild(charaLayer.childList[key]);
}
}
};
Character.prototype.run = function(){
var self = this;
for(var key in charaLayer.childList){
charaLayer.childList[key].speed -= 2;
if(self.canClick == false && charaLayer.childList[key].speed <= 0){
//移除该成员
arr.remove(charaLayer.childList[key].adressNum);
charaLayer.removeChild(charaLayer.childList[key]);
}
}
}

当然这是对charaLayer这个层上的对象进行操作，canvas游戏特别要注意层的这个概念。而且面向对象的思想也很重要。

在地鼠这个对象上要添加相应属性，方便后续操作的判断。首先判断这个地鼠是否被打中，我通过self.canClick属性来判断，若为false则没打中，改变速度，2秒后消失，如果打中值为true，更换图片，2秒后消失。

分数的加减在点击事件中，很简单。

gameover时，删除backLayer上所有层，增加一个层，显示游戏结束。

游戏不难，只要思路清晰，便很快能完成，理解层的概念，面向对象的思想，就OK了；