[HTML5遊戲開發]挑戰橫版ACT(一)：開天地黃忠初登場

鄙人雖然不是專職的遊戲開發者，但是自己也嘗試著開發過各種各樣類型的遊戲，不過橫版類遊戲還沒有嘗試過，本次就使用lufylegend引擎來挑戰一下橫版ACT類遊戲的開發，

大家可以到

​​

http://lufylegend.com/lufylegend

下載lufylegend引擎的最新版本，

#由於鄙人也是第一次開發這類遊戲，所以有不妥的地方，歡迎大家回帖探討和指正。

本系列文章目錄（更新）

(一)：開天地黃忠初登場

http://www.php.cn/ html5-tutorial-354344.html

(二)：秀身手勇猛如當年

http://www.php.cn/html5-tutorial-354345. html

(三)：遇見紅顏英雄亦多情

#http://www.php.cn/html5-tutorial-354347.html

#首先，素材問題，苦尋半個月，一直沒找到滿意的素材，不得已求助於黃忠黃老將軍，黃老將軍跟我說自從被馬忠那個孫子暗算之後，已經有幾百年沒上戰場了，一聽到要上戰場，立刻興奮的不得了，直接就跳著《江南style》來了首《好漢歌》，那架勢真有像是從梁山泊穿越而來的李逵，唱完後抄起傢伙吼了聲：「Go”，我也不敢怠慢，趕緊拿起電腦，準備起來。這次估且先拿黃老將軍來擋一下，如果哪位朋友有好的素材，希望能提供一下，好讓一把年紀的黃老將軍休息一下。

由於黃老將軍過於興奮，只顧著一個勁兒的向前衝，所以只有向右的動作，沒有向左的動作，為此我不得不要使用lufylegend引擎中的LAnimation對象，因為LAnimation物件可以使用圖片的鏡像，來顯示與上面的圖片相反的動作。

考慮到戰場上有各種各樣的士兵武將，但是他們都屬於人，有一些共通的屬性，況且黃老將軍過於興奮，為了便於管理和操作，本次開發依然以OOP思想為基礎(黃老將軍聽了後自言自語道，哦哦屁？)，先來建一個人物的父類Character

function Character(dataList,coordinateList,locationList,speed){
	base(this,LSprite,[]);
};

來看看這四個參數：

dataList：舉個例子，看上面黃老將軍的圖片，有很多組動作，每組動作為一張圖片，參數dataList就是這幾組圖片

#coordinateList：LAnimation物件需要依照座標來順序顯示圖片，以形成動畫，這個即使要傳入LAnimation物件的座標數組######locationList：考慮到人物的每個動作的圖片的大小都不一樣，位置也不一樣，這個陣列用來調整相對應動作組圖片的顯示位置######speed：方便控制人物動作在時間軸上每幀的頻率######下面是Character類別的完整建構器############

function Character(dataList,coordinateList,locationList,speed){
	base(this,LSprite,[]);
	var self = this;
	//初始化
	//动作
	self.action = ACTION.STAND;
	//方向
	self.direction = DIRECTION.RIGHT;
	//保存参数
	self.coordinateList = coordinateList;
	self.locationList = locationList;
	self.dataList = dataList;
	self.speed = speed==null?1:speed;
	//保存初始化动作的图片
	self.data = dataList[ACTION.STAND];
	self.speedIndex = 0;
	//利用LAnimation对象来显示连贯的动作
	self.anime = new LAnimation(self,self.data,self.coordinateList[0]);
	self.anime.setAction(0);
	self.anime.x = -self.data.width*0.5;
	self.anime.y = -self.data.height;
};

###其中ACTION變數與DIRECTION變數為別如下############

//动作
var ACTION = {STAND:0,MOVE:1,RUN:2,JUMP:3,ATTACK:4};
//方向
var DIRECTION = {RIGHT:"right",LEFT:"left"};

######################################################################## ##下面詳細介紹下LAnimation類，LAnimation類別是透過順序或倒序播放一組圖片來形成動畫，它的官方解釋如下######LAnimation類 LAnimation(layer,data,list)##### ##########■作用：###

实现简单动画的播放，原理是将一张大的图片，按照保存有坐标的二维数组保存的坐标来逐个显示。

■参数：

layer：LSprite显示层
data：LBitmapData对象
list：装有坐标的二维数组

上面的三个参数中，layer是一个LSprite对象，data是一个LBitmapData对象，这些都比较好理解，第三个参数list是一个二维数组，它的格式如下

[
[{x:0,y:0},{x:0,y:0},{x:0,y:0}],
[{x:0,y:0},{x:0,y:0},{x:0,y:0}],
[{x:0,y:0},{x:0,y:0},{x:0,y:0}]
]

LAnimation对象的setAction函数，有四个参数，分别为

LAnimation.setAction(rowIndex,colIndex,mode,isMirror)
参数：
rowIndex：播放动画的行号
colIndex：播放动画的列号
mode：(1,0,-1)分别代表(正序播放,静止,倒序播放)
isMirror：Boolean型，当设定为true的时候，图片显示为水平翻转后的镜像

当然，光有一个构造器是不行的，因为LAnimation对象是通过调用onframe函数来实现播放的，所以给Character类添加一个函数，如下

Character.prototype.onframe = function (){
	var self = this;
	//人物动作速度控制
	if(self.speedIndex++ < self.speed)return;
	self.speedIndex = 0;
	//人物动画播放
	self.anime.onframe();
};

如此一来，只要不断的调用Character的实例的onframe函数，就能实现动态播放了。

黄老将军可能对比不感兴趣，此时已经在一旁打起了呼噜，我必须加快速度了......

考虑到战场上敌方和我方会有不同处理，建立一个继承自Character类的子类，如下

function Player(datalist,coordinateList,locationList,speed){
	base(this,Character,[datalist,coordinateList,locationList,speed]);
};

因为想要实例化这个类，需要三个参数，我再新建一个对象来获取这三个参数

var CharacterList = {
	huangzhong:function(){
		//图片数据
		var dataList = new Array();
		dataList.push(new LBitmapData(imglist["player_stand"],0,0,106,77));
		dataList.push(new LBitmapData(imglist["player_move"],0,0,115,85));
		dataList.push(new LBitmapData(imglist["player_run"],0,0,125,87));
		dataList.push(new LBitmapData(imglist["player_jump"],0,0,131,212));
		dataList.push(new LBitmapData(imglist["player_attack"],0,0,242,143));
		//图片分割数据
		var coordinateList = new Array();
		coordinateList.push(LGlobal.pideCoordinate(1272,77,1,12));
		coordinateList.push(LGlobal.pideCoordinate(920,85,1,8));
		coordinateList.push(LGlobal.pideCoordinate(750,87,1,6));
		coordinateList.push(LGlobal.pideCoordinate(786,212,1,6));
		var attackList = LGlobal.pideCoordinate(484,143,1,2);
		coordinateList.push([[attackList[0][0],attackList[0][1],attackList[0][1],attackList[0][1]]]);
		//图片位置数据
		var locationList = new Array();
		locationList.push({x:0,y:0});
		locationList.push({x:0,y:0});
		locationList.push({x:0,y:0});
		locationList.push({x:0,y:0});
		locationList.push({x:20,y:20});
		return [dataList,coordinateList,locationList];
	}
}

所以我们要得到黄老将军的参数的话，就直接CharacterList.huangzhong()就可以了。

这时候，耳旁突然一声大吼，用什么拼音，要用English,怎么的也得叫Mr.Huang或者Huang Sir吧，由于英语太差，所以我假装没听到，继续写代码......
下面，开始就马上开始游戏初始化的工作。

//初始化层
baseLayer = new LSprite();
addChild(baseLayer);
	
//背景层
backLayer = new LSprite();
backLayer.graphics.drawRect(1,"#000",[0,0,LGlobal.width,LGlobal.height],true,"#000");
baseLayer.addChild(backLayer);
	
//人物层
charaLayer = new LSprite();	
baseLayer.addChild(charaLayer);
addHero();

//添加贞事件
baseLayer.addEventListener(LEvent.ENTER_FRAME,onframe);

暂时没有准备背景图片，所以就画了一个黑色矩形当做背景了，下面看addHero函数和onframe函数

function addHero(){
	var heroData = CharacterList.huangzhong();
	hero = new Player(heroData[0],heroData[1],heroData[2]);
	hero.x = 200;
	hero.y = 200;
	charaLayer.addChild(hero);
}
function onframe(){
	var key = null;
	for(key in charaLayer.childList){
		charaLayer.childList[key].onframe();
	}
}

运行代码，得到效果如下

话说，黄老将军正在呼呼地睡大觉，突然被我弄进了游戏里，并且四种漆黑一片，立刻就想到跑，但是由于我没有添加动作变换代码，它只能傻傻的站在那里，脑子里各种问号，为了不欺负人家，我必须赶紧写下去。

游戏中，有走，跑，跳，攻击等各种动作，咱们就用键盘的wsad来控制上下左右，j控制攻击，k控制跳，首先要添加键盘事件

	//添加键盘事件
	LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_DOWN,onkeydown);
	LEvent.addEventListener(LGlobal.window,LKeyboardEvent.KEY_UP,onkeyup);

function onkeydown(e){
	if(keylock)return;
	switch(e.keyCode){
		case KEY.LEFT:
			hero.setAction(ACTION.MOVE,DIRECTION.LEFT);
			break;
		case KEY.RIGHT:
			hero.setAction(ACTION.MOVE,DIRECTION.RIGHT);
			break;
		case KEY.UP:
			hero.setAction(ACTION.MOVE,hero.direction);
			break;
		case KEY.DOWN:
			hero.setAction(ACTION.MOVE,hero.direction);
			break;
		case KEY.ATTACK:
			keylock = true;
			hero.setAction(ACTION.ATTACK,hero.direction);
			break;
		case KEY.JUMP:
			keylock = true;
			hero.setAction(ACTION.JUMP,hero.direction);
			break;
	}
}
function onkeyup(e){
	if(hero.action == ACTION.MOVE || hero.action == ACTION.RUN)hero.setAction(ACTION.STAND,hero.direction);
	keylock = false;
}

hero是Player对象的一个实例，既然调用了Player对象的setAction函数，那就必须给Player对象添加这个函数，不过我依然将函数添加到它的父类Character里面

/**
 * 动作变换
 * @param action 动作
 * @param direction 方向
 */
Character.prototype.setAction = function (action,direction){
	var self = this;
	//动作和方向都没有改变，则不做变换
	if(self.action == action && self.direction == direction)return;
	//重新设定保存在LAnimation对象中的图片和坐标数组
	self.data = self.dataList[action];
	self.anime.bitmap.bitmapData = self.data;
	self.anime.bitmap.bitmapData.setCoordinate(0,0);
	self.anime.imageArray = self.coordinateList[action];
	self.action = action;
	self.direction = direction;
	//如果方向向左则必须使用镜像
	self.anime.setAction(0,0,null,self.direction == DIRECTION.LEFT);
	//调整位置
	self.setLocation();
	//如果被添加了事件，则将事件移除
	self.anime.removeEventListener(LEvent.COMPLETE,self.overAction);
	//除了走和跑，其他动作要保持连贯性，在一个动作结束之前，不能再次变换，所以添加动画播放结束事件，来控制keylock的值
	if(self.action != ACTION.MOVE && self.action != ACTION.RUN){
		self.anime.addEventListener(LEvent.COMPLETE,self.overAction);
	}
};
Character.prototype.setLocation = function (){
	var self = this;
	self.anime.x = self.locationList[self.action].x*(self.direction == DIRECTION.LEFT ? -1 : 1)-self.data.width*0.5;
	self.anime.y = self.locationList[self.action].y-self.data.height;
};
Character.prototype.overAction = function (anime){
	var self = anime.parent;
	self.anime.removeEventListener(LEvent.COMPLETE,self.overAction);
	self.setAction(ACTION.STAND,self.direction);
	keylock = false;
};

也许是黄老将军太久没有上战场了，现在已经开始活蹦乱跳了

测试连接

http://lufy.netne.net/lufylegend-js/act/index.html

黄老将军虽然无比兴奋，但是很快就发现了不对劲儿，因为无论走，跳，向左，向右，他只能在同一个地方折腾，急得他满头大汗，于是我在他回头看我之前，我就先闪人了，身后传来黄老将军的一声怒吼：“我X”。

本次丫丫就到这里了，要想知道黄老将军在战场上究竟做了什么，请听下回分析。

本次源码下载

http://fsanguo.comoj.com/download.php?i=act01.rar

 以上就是[HTML5游戏开发]挑战横版ACT(一)：开天地黄忠初登场的内容，更多相关内容请关注PHP中文网（www.php.cn）！