随着对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了;