[Développement de jeux HTML5] Défiez la version horizontale d'ACT (1) : Huang Zhongchu apparaît dans Kaitiandi

Bien que je ne sois pas un développeur de jeux à plein temps, j'ai essayé de développer différents types de jeux, mais je n'ai pas encore essayé de jeux à défilement horizontal. Cette fois, j'utiliserai le moteur lufylegend pour défier l'ACT à défilement latéral. jeu. Pour le développement de jeux,

vous pouvez vous rendre sur

http://lufylegend.com/lufylegend

pour télécharger la dernière version du moteur lufylegend,

parce que je suis pareil. C'est la première fois que je développe ce genre de jeu, donc s'il y a des inexactitudes, vous êtes invités à répondre pour en discuter et me corriger.

Table des matières de cette série d'articles (en cours de mise à jour)

(1) : Huang Zhongchu de Kaitiandi apparaît

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

(2) : Montrez vos compétences et votre courage comme avant

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

(3) : Se sentir passionné en rencontrant un beau héros

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

Tout d'abord, il y a le problème du matériel que je cherche depuis un demi-mois, mais je n'ai pas trouvé de matériel satisfaisant, je n'ai pas d'autre choix que de demander au général Huang Zhong. Le général Huang m'a dit qu'il n'était pas sur Internet depuis des centaines d'années depuis qu'il avait été comploté par ce petit-fils de Ma Zhong. Dès que j'ai entendu que j'allais sur le champ de bataille, je suis immédiatement devenu. très excité. J'ai immédiatement dansé sur "Jiangnan Style" et chanté "Song of a Hero". Sa posture ressemblait vraiment à celle de Li Kui qui avait voyagé depuis Liangshanbo. Après avoir chanté, il a repris la chanson. Le gars a crié : " Allez ". Je n'ai pas osé négliger, alors j'ai rapidement pris l'ordinateur et me suis préparé. Cette fois, j'utiliserai d'abord le général Huang pour le bloquer. Si un ami a de bons matériaux, j'espère qu'il pourra les fournir afin que le vieux général Huang puisse se reposer.

Parce que le général Huang était trop excité et s'est précipité en avant, il s'est déplacé uniquement vers la droite et non vers la gauche. Pour cette raison, j'ai dû entrer dans l'objet LAnimation. le moteur lufylegend n'est pas utilisé car l'objet LAnimation peut utiliser une image miroir de l'image pour montrer l'action opposée à l'image ci-dessus.

Considérant qu'il y a différents soldats et généraux sur le champ de bataille, mais qu'ils sont tous des êtres humains et ont certains attributs communs, et que le général Huang est trop excité, afin de faciliter la gestion et les opérations, ce développement utilise toujours la POO. Sur la base de l'idée (se dit le vieux général Huang après l'avoir écouté, oh merde ?), créez d'abord un personnage de classe parent

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

Regardez ces quatre paramètres :

dataList : Par exemple, regardez la photo du général Huang ci-dessus. Il existe de nombreux groupes d'actions, chaque groupe d'actions est une image, et le paramètre dataList correspond à ces groupes d'images

<🎜. >coorderList : L'objet LAnimation doit afficher les images de manière séquentielle en fonction des coordonnées pour former une animation. Cela doit même passer dans le tableau de coordonnées de l'objet LAnimation

locationList : Considérant que la taille de l'image est. différent pour chaque action du personnage. Idem, la position est également différente. Ce tableau est utilisé pour ajuster la position d'affichage de l'image du groupe d'action correspondant

vitesse : Il est pratique de contrôler la fréquence des actions du personnage dans. chaque image de la chronologie

Ce qui suit est la classe Character Le constructeur complet de

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

où la variable ACTION et la variable DIRECTION sont les suivantes

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

Ce qui suit est une introduction détaillée à la classe LAnimation La classe LAnimation forme une animation en jouant un ensemble d'images dans. séquence ou ordre inverse. Son explication officielle est la suivante

LAnimation class LAnimation(layer,data,list )

■Fonction :

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

■参数：

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