[HTML5-Spieleentwicklung] Fordern Sie die horizontale Version von ACT (1) heraus: Huang Zhongchu erscheint in Kaitiandi

Obwohl ich kein Vollzeit-Spieleentwickler bin, habe ich versucht, verschiedene Arten von Spielen zu entwickeln, aber ich habe noch keine Side-Scrolling-Spiele ausprobiert. Dieses Mal werde ich die Lufylegend-Engine verwenden, um das Side-Scrolling-ACT herauszufordern Für die Spieleentwicklung

können Sie zu

http://lufylegend.com/lufylegend

gehen, um die neueste Version der Lufylegend-Engine herunterzuladen,

weil ich genauso bin. Dies ist das erste Mal, dass ich ein Spiel dieser Art entwickle. Wenn es also Ungenauigkeiten gibt, können Sie mir gerne antworten, um mich zu besprechen und zu korrigieren.

Inhaltsverzeichnis dieser Artikelserie (in Aktualisierung)

(1): Huang Zhongchu von Kaitiandi erscheint

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

(2): Zeigen Sie Ihre Fähigkeiten und Ihren Mut wie zuvor

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

(3): Leidenschaft empfinden, wenn man einen schönen Helden trifft

http://www.php.cn/html5- Tutorial-354347.html

Zuallererst gibt es das Problem mit dem Material, das ich einen halben Monat lang gesucht habe, aber ich habe keine andere Wahl, als General Huang Zhong zu fragen Hilfe. General Huang erzählte mir, dass er seit Hunderten von Jahren nicht mehr im Internet war, seit er von diesem Enkel von Ma Zhong geplant wurde Sehr aufgeregt. Ich tanzte sofort zu „Jiangnan Style“ und sang „Song of a Hero“. Seine Haltung ähnelte wirklich Li Kui, der aus Liangshanbo angereist war Ich wagte es nicht, es zu vernachlässigen, also nahm ich schnell den Computer und machte mich fertig. Dieses Mal werde ich es zuerst mit General Huang blockieren. Wenn Freunde gute Materialien haben, hoffe ich, dass sie diese bereitstellen können, damit der alte General Huang sich ausruhen kann.

Weil General Huang zu aufgeregt war und einfach vorwärts stürmte, bewegte er sich nur nach rechts und nicht nach links. Aus diesem Grund blieb mir nichts anderes übrig, als mich zu bewegen vorwärts Das LAnimation-Objekt in der Lufylegend-Engine wird nicht verwendet, da das LAnimation-Objekt ein Spiegelbild des Bildes verwenden kann, um die entgegengesetzte Aktion zum obigen Bild anzuzeigen.

Angesichts der Tatsache, dass es verschiedene Soldaten und Generäle auf dem Schlachtfeld gibt, sie aber alle Menschen sind und einige gemeinsame Eigenschaften haben und General Huang zu aufgeregt ist, verwendet diese Entwicklung immer noch OOP, um die Verwaltung und den Betrieb zu erleichtern Erstellen Sie basierend auf der Idee (der alte General Huang sagte sich, nachdem er es gehört hatte, oh Scheiße?) zunächst einen Charakter der übergeordneten Klasse

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

Schauen Sie sich diese an vier Parameter:

dataList: Schauen Sie sich zum Beispiel das Bild von General Huang oben an. Es gibt viele Aktionsgruppen, jede Aktionsgruppe ist ein Bild und der Parameter dataList sind diese Bildgruppen

coordinateList: Das LAnimation-Objekt muss Bilder nacheinander entsprechend den Koordinaten anzeigen, um eine Animation zu bilden. Dies muss sogar das Koordinatenarray des LAnimation-Objekts übergeben Das Bild ist für jede Aktion des Charakters unterschiedlich. Dieses Array wird verwendet, um die Anzeigeposition des entsprechenden Aktionsgruppenbilds anzupassen.

Geschwindigkeit: Es ist praktisch, die Häufigkeit des Charakters zu steuern Aktionen in jedem Frame auf der Zeitleiste

Das Folgende ist die Zeichenklasse. Der vollständige Konstruktor von

, wobei die ACTION-Variable und die DIRECTION-Variable wie folgt sind folgt

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;
};

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

Das Folgende ist eine detaillierte Einführung in die LAnimation-Klasse Bilder in der Reihenfolge oder in umgekehrter Reihenfolge. Die offizielle Erklärung lautet wie folgt:

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

■参数：

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）！