Maison > interface Web > Tutoriel H5 > [Développement de jeux HTML5] Défiez la version horizontale d'ACT (3) : se sentir passionné en rencontrant un beau héros

[Développement de jeux HTML5] Défiez la version horizontale d'ACT (3) : se sentir passionné en rencontrant un beau héros

黄舟
Libérer: 2017-03-01 16:24:08
original
1623 Les gens l'ont consulté


Ceci est le troisième article de la série. Pour les autres articles, veuillez consulter la table des matières dans l'article ci-dessous

http ://m.sbmmt.com/html5-tutorial-354344.html

Le début est long

Cette série de tutoriels est la première fois que je développe en un style ridicule. La plupart du contenu de l'article n'est que de la salive. Tout le monde peut simplement le lire gratuitement et faire attention à ne pas se laisser inonder.

Le premier goulot d'étranglement dans ce type de développement concerne les matériaux. Je tiens à remercier l'internaute yorhomwang pour avoir fourni un grand nombre d'URL matérielles.

Ce qui suit est le résultat de ce développement, veuillez d'abord le prévisualiser.


Outil de conversion de matériaux

Les matériaux trouvés cette fois sont tous des images de type gif. Si vous souhaitez les utiliser dans le jeu, vous en avez besoin. pour convertir les images GIF Chaque image d'action est supprimée pour former une nouvelle image. J'ai utilisé Flash pour créer un outil de conversion simple. Les amis dans le besoin peuvent simplement l'utiliser.

http://lufylegend.com/flash/demo/GifToPng

Sujet principal

On peut dire que le général Huang a été laissé de côté sur le champ de bataille par moi pendant quelque temps. Je m'ennuie énormément ces jours-ci. Je suis sur le champ de bataille avec un couteau, je frappe comme un fou, je cours, je rugis...

Je ne supporte plus de lire, alors je suis déterminé à le faire. continuez à écrire quelques lignes de code pour ajouter du plaisir à son vieux.

1. Déplacez le champ de bataille

Tout d'abord, déplaçons la carte du champ de bataille. Vous ne pouvez pas courir au même endroit, quelle que soit la manière dont vous exécutez.

var back_run = true;
Copier après la connexion

Lorsque cette variable est vraie, la carte de fond du champ de bataille peut être déplacée, sinon elle ne peut pas être déplacée.

Ensuite, ajoutez le code pour contrôler le mouvement du champ de bataille dans la fonction de déplacement de Player.js. Pourquoi est-il dans Player.js et pas dans Character.js ? Parce que la carte ne bougera que lorsque le protagoniste, le général Huang, bougera, le personnage sera la classe parent, et les ennemis hériteront également de cette classe plus tard.

Player.prototype.move = function (){
	var self = this, mx = 0, my = 0;
	if(keyCtrl[KEY.LEFT] && charaLayer.x + self.x > 0){
		mx = -1;
	}else if(keyCtrl[KEY.RIGHT] && charaLayer.x + self.x < LGlobal.width){
		mx = 1;
	}
	if(keyCtrl[KEY.UP]){
		my = -1;
	}else if(keyCtrl[KEY.DOWN]){
		my = 1;
	}
	self.mx = mx;
	self.my = my;
	if(self.action == ACTION.RUN){
		mx *= 2;
		my *= 2;
	}else if(self.action == ACTION.HIT){
		mx = 2*(self.direction == DIRECTION.RIGHT ? 1 : -1);
		my = 0;
	}
	if(back_run && mx > 0 && charaLayer.x + self.x > LGlobal.width * 0.5){
		var setX = mx*MOVE_STEP;
		if(backLayer.data.x + setX + backLayer.data.width > backLayer.data.image.width){
			back_run = false;
			setX = backLayer.data.image.width - backLayer.data.width - backLayer.data.x;
		}
		charaLayer.x -= setX;
		backLayer.data.setCoordinate(backLayer.data.x + setX,backLayer.data.y);
		addEnemy();
	}
	self.callParent("move",arguments);
};
Copier après la connexion

Vous pouvez voir que lorsque le protagoniste se déplace, les coordonnées de la carte augmenteront et diminueront dans la direction opposée, réalisant ainsi un mouvement visuel de la carte. Notez qu'il existe une ligne qui appelle la fonction addEnemy. La fonction est de détecter si un ennemi est ajouté au champ de bataille.

Deuxièmement, ajouter un ennemi

Voyons comment ajouter un ennemi. J'ai trouvé plusieurs matériaux de Sun Shangxiang. Ce matériel est relativement complet, en voici un, non répertorié un par un. . Dehors.


Ajoutez une classe Enemy.js ci-dessous

function Enemy(list,speed){
	var self = this;
	base(this,Character,[list,speed]);
	self.belong = "enemy";
	self.hp = 100;
};
Enemy.prototype.onjump = function (){
	var self = this;
	self.callParent("onjump",arguments);
	self.setLocation();
	var index = self.anime.colIndex;
	self.yArr = [0,-10,-20,-30,-40,-40,-30,-20,-10,0];
	self.anime.y += self.yArr[index];
};
Enemy.prototype.onjump_attack = function (){
	var self = this;
	self.callParent("onjump_attack",arguments);
	self.setLocation();
	var index = self.anime.colIndex;
	if(index >= self.yArr.length)return;
	self.anime.y += self.yArr[index];
};
Enemy.prototype.setAction = function (action,direction){
	var self = this,yArr = new Array();
	if(action == ACTION.MOVE && self.action == ACTION.JUMP)return;
	if(action == ACTION.JUMP_ATTACK){
		var index = self.anime.colIndex,i;
		for(i = index;i0){
		self.anime.y += self.yArr[0];
	}
};
Enemy.prototype.overActionRun = function (lastAction,animeAction){
	var self = this;
	self.callParent("overActionRun",arguments);
	keylock = false;
	
	if(lastAction == ACTION.FALL){
		if(self.direction == DIRECTION.LEFT){
			self.x += 80;
		}else{
			self.x -= 80;
		}
	}
};
Enemy.prototype.move = function (){
	var self = this, mx = 0, my = 0;
	self.mx = mx;
	self.my = my;
	self.callParent("move",arguments);
};
Copier après la connexion

Cette classe est similaire à Player.js et toutes deux héritent de la classe Character. C'est juste que je ne transmets plus tous les tableaux pertinents au constructeur, ce qui est trop gênant, mais je passe une liste de tableaux avec tous les paramètres qui doivent être définis.

Lorsque la fonction addEnemy() pour ajouter des ennemis est appelée, nous ne pouvons pas ajouter d'ennemis sans limite, alors préparez à l'avance les ennemis à ajouter et quand les ajouter.

var enemy_list = new Array(
	{name:"sunji",x:800,y:350,when_x:300,back_run:false},
	{name:"huangzhong",x:1200,y:280,when_x:800,back_run:true}
);
function addEnemy(){
	if(enemy_list.length == 0)return;
	if(enemy_list[0].when_x > hero.x)return;
	var charadata = CharacterList[enemy_list[0].name]();
	var enemy = new Enemy(charadata);
	enemy.x = enemy_list[0].x;
	enemy.y = enemy_list[0].y;
	charaLayer.addChild(enemy);
	enemy_list.shift();
}
Copier après la connexion

J'ai ajouté un tableau ennemis_list, qui contient le when_x du moment où ajouter l'ennemi, les coordonnées de l'emplacement où l'ennemi apparaît et des informations telles que si la carte s'arrête de bouger après l'apparition du personnage. Quand addEnemy Lorsque la fonction est appelée, elle utilise when_x et la position du protagoniste pour déterminer si l'ennemi doit être ajouté.

3. Attaque

Avec l'ennemi, il y aura une bataille. Parlons de la détermination d'attaquer et d'être attaqué.

La détermination de l'attaque est en fait la détection de collision. Bien sûr, nous pouvons utiliser une collision au niveau du pixel, mais pour ce genre de jeu, c'est un peu exagéré et l'efficacité est trop faible, nous utilisons donc un rectangle. ici Détection de collision.

Le moteur lufylegend.js possède la fonction LGlobal.hitTest(), qui peut être utilisée pour détecter si un rectangle entre en collision. Cependant, comme il existe de nombreuses zones vides dans le matériau de l'image, si cette méthode est utilisée directement. , l'erreur est un peu trop importante. Par conséquent, j'ai défini à l'avance la plage d'attaque et la plage d'attaque qui doivent être détectées pour chaque image du personnage. Voir le code dans CharacterList.js ci-dessous.

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,134));
		dataList.push(new LBitmapData(imglist["player_attack"],0,0,242,143));
		dataList.push(new LBitmapData(imglist["player_big_attack"],0,0,232,143));
		dataList.push(new LBitmapData(imglist["player_jump_attack"],0,0,232,143));
		dataList.push(new LBitmapData(imglist["player_hit"],0,0,161,88));
		dataList.push(new LBitmapData(imglist["player_skill"],0,0,324,140));
		dataList.push(new LBitmapData(imglist["player_big_skill"],0,0,441,166));
		dataList.push(new LBitmapData(imglist["player_hert"],0,0,179,87));
		dataList.push(new LBitmapData(imglist["player_fall"],0,0,298,157));
		//图片分割数据
		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));
		var jumpList = LGlobal.pideCoordinate(655,134,1,5);
		coordinateList.push([[jumpList[0][0],jumpList[0][0],jumpList[0][1],jumpList[0][1],jumpList[0][2],jumpList[0][2],jumpList[0][3],jumpList[0][3],jumpList[0][4],jumpList[0][4]]]);
		var attackList = LGlobal.pideCoordinate(484,143,1,2);
		coordinateList.push([[attackList[0][0],attackList[0][1],attackList[0][1],attackList[0][1]]]);
		var bigattackList = LGlobal.pideCoordinate(927,143,1,4);
		coordinateList.push(bigattackList);
		var jumpattackList = LGlobal.pideCoordinate(927,143,1,4);
		coordinateList.push(jumpattackList);
		coordinateList.push(LGlobal.pideCoordinate(966,88,1,6));
		coordinateList.push(LGlobal.pideCoordinate(2268,140,1,7));
		var bigskillList = LGlobal.pideCoordinate(2205,830,5,5);
		coordinateList.push([[bigskillList[0][0],bigskillList[0][1],bigskillList[0][2],bigskillList[0][3],bigskillList[0][4]
				,bigskillList[1][0],bigskillList[1][1],bigskillList[1][2],bigskillList[1][3],bigskillList[1][4]
				,bigskillList[2][0],bigskillList[2][1],bigskillList[2][2],bigskillList[2][3],bigskillList[2][4]
				,bigskillList[3][0],bigskillList[3][1],bigskillList[3][2],bigskillList[3][3],bigskillList[3][4]
				,bigskillList[4][0],bigskillList[4][1],bigskillList[4][2],bigskillList[4][3],bigskillList[4][4]]]);
		var hertList = LGlobal.pideCoordinate(358,87,1,2);
		coordinateList.push([[hertList[0][0],hertList[0][0],hertList[0][1],hertList[0][1]]]);
		var fallList = LGlobal.pideCoordinate(2682,157,1,9);
		coordinateList.push([[fallList[0][0],fallList[0][1],fallList[0][2],fallList[0][3],fallList[0][4],fallList[0][5],fallList[0][6],fallList[0][6],fallList[0][6],fallList[0][7],fallList[0][7],fallList[0][6],fallList[0][6],fallList[0][7],fallList[0][8]]]);
		//图片位置数据
		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});
		locationList.push({x:20,y:20});
		locationList.push({x:20,y:20});
		locationList.push({x:0,y:0});
		locationList.push({x:100,y:0});
		locationList.push({x:150,y:20});
		locationList.push({x:5,y:0});
		locationList.push({x:-30,y:10});
		//被攻击范围
		var hertList = [[[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50],[-30,-60,60,50]],
		[[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60],[-30,-70,50,60]],
		[[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60],[-30,-70,60,60]],
		[[-25,-70,50,60],[-25,-70,50,60],[-25,-70,50,60],[-25,-70,50,60],[-25,-70,50,60]],
		[[-10,-60,30,60],[-10,-60,30,60],[-30,-60,30,60],[-30,-60,30,60]],
		[[0,-60,40,60],[0,-60,40,60],[-20,-60,30,60],[-20,-60,30,60]],
		[],
		[[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60],[-20,-60,30,60]],
		[[0,-70,40,60],[0,-70,40,60]],
		[],[],[]
		];
		//攻击范围
		var attackList = [[],[],[],[],
		[[0,0,0,0],[0,0,0,0],[-10,-70,115,60],[-10,-70,115,60]],
		[[0,0,0,0],[0,0,0,0],[-10,-100,140,90],[-10,-100,140,90]],
		[[0,0,0,0],[0,0,0,0],[-10,-130,115,60],[-10,-110,140,120]],
		[[10,-70,30,70],[10,-70,30,70],[10,-70,30,70],[10,-70,30,70],[10,-70,30,70],[10,-70,30,70]],
		[[0,0,0,0],[0,0,0,0],[-40,-70,80,60],[-60,-100,80,60],[20,-100,130,100],[20,-100,130,100]],
		[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],
		[50,-105,50,20],[60,-100,120,40],[60,-90,150,40],[50,-80,190,40],[50,-80,210,40],
		[50,-75,310,60],[50,-75,310,60],[50,-75,310,60],[50,-75,310,80]],[],[]
		];
		return [dataList,coordinateList,locationList,hertList,attackList];
	},
	sunji:function(){
		//图片数据
		var dataList = new Array();
		dataList.push(new LBitmapData(imglist["sunji_stand"],0,0,129,89));
		dataList.push(new LBitmapData(imglist["sunji_move"],0,0,128,97));
		dataList.push(new LBitmapData(imglist["sunji_run"],0,0,125,77));
		dataList.push(new LBitmapData(imglist["sunji_jump"],0,0,131,134));
		dataList.push(new LBitmapData(imglist["sunji_attack"],0,0,197,103));
		dataList.push(new LBitmapData(imglist["sunji_big_attack"],0,0,198,103));
		dataList.push(new LBitmapData(imglist["sunji_jump_attack"],0,0,182,143));
		dataList.push(new LBitmapData(imglist["sunji_hit"],0,0,238,86));
		dataList.push(new LBitmapData(imglist["sunji_skill"],0,0,215,102));
		dataList.push(new LBitmapData(imglist["sunji_big_skill"],0,0,275,139));
		dataList.push(new LBitmapData(imglist["sunji_hert"],0,0,131,79));
		dataList.push(new LBitmapData(imglist["sunji_fall"],0,0,249,136));
		//图片分割数据
		var coordinateList = new Array();
		coordinateList.push(LGlobal.pideCoordinate(1548,89,1,12));
		coordinateList.push(LGlobal.pideCoordinate(640,97,1,5));
		coordinateList.push(LGlobal.pideCoordinate(1000,77,1,8));
		var jumpList = LGlobal.pideCoordinate(655,134,1,5);
		coordinateList.push([[jumpList[0][0],jumpList[0][0],jumpList[0][1],jumpList[0][1],jumpList[0][2],jumpList[0][2],jumpList[0][3],jumpList[0][3],jumpList[0][4],jumpList[0][4]]]);
		var attackList = LGlobal.pideCoordinate(394,103,1,2);
		coordinateList.push([[attackList[0][0],attackList[0][1],attackList[0][1],attackList[0][1]]]);
		var bigattackList = LGlobal.pideCoordinate(792,103,1,4);
		coordinateList.push(bigattackList);
		var jumpattackList = LGlobal.pideCoordinate(728,143,1,4);
		coordinateList.push(jumpattackList);
		coordinateList.push(LGlobal.pideCoordinate(1428,86,1,6));
		coordinateList.push(LGlobal.pideCoordinate(2365,102,1,11));
		var bigskillList = LGlobal.pideCoordinate(1650,695,5,6);
		coordinateList.push([[bigskillList[0][0],bigskillList[0][1],bigskillList[0][2],bigskillList[0][3],bigskillList[0][4],bigskillList[0][5]
				,bigskillList[1][0],bigskillList[1][1],bigskillList[1][2],bigskillList[1][3],bigskillList[1][4],bigskillList[1][5]
				,bigskillList[2][0],bigskillList[2][1],bigskillList[2][2],bigskillList[2][3],bigskillList[2][4],bigskillList[2][5]
				,bigskillList[3][0],bigskillList[3][1],bigskillList[3][2],bigskillList[3][3],bigskillList[3][4],bigskillList[3][5]
				,bigskillList[4][0],bigskillList[4][1],bigskillList[4][2],bigskillList[4][3],bigskillList[4][4],bigskillList[4][5]]]);
		var hertList = LGlobal.pideCoordinate(262,79,1,2);
		coordinateList.push([[hertList[0][0],hertList[0][0],hertList[0][1],hertList[0][1]]]);
		var fallList = LGlobal.pideCoordinate(1245,544,4,5);
		coordinateList.push([[fallList[0][0],fallList[0][1],fallList[0][2],fallList[0][3],fallList[0][4],fallList[1][0],fallList[1][1],fallList[1][2],fallList[1][3],fallList[1][4],fallList[2][0],fallList[2][1],fallList[2][2],fallList[2][3],fallList[2][4],fallList[3][0],fallList[3][1],fallList[3][2],fallList[3][3],fallList[3][4]]]);
		//图片位置数据
		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:40,y:8});
		locationList.push({x:20,y:0});
		locationList.push({x:20,y:20});
		locationList.push({x:0,y:0});
		locationList.push({x:0,y:0});
		locationList.push({x:70,y:10});
		locationList.push({x:5,y:0});
		locationList.push({x:-35,y:0});
		//被攻击范围
		var hertList = [[[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60],[-25,-70,60,60]],
		        		[[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80],[-25,-90,50,80]],
		        		[[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40],[-30,-60,70,40]],
		        		[[-25,-90,50,70],[-25,-90,50,70],[-25,-90,50,70],[-25,-90,50,70],[-25,-90,50,70]],
		        		[[-20,-80,50,70],[-20,-80,50,70],[-10,-60,70,50],[-10,-60,70,50]],
		        		[[-10,-80,50,60],[-10,-80,50,60],[-10,-80,50,60],[-10,-80,50,60]],
		        		[[-30,-80,50,70],[-30,-80,50,70],[-30,-80,50,70],[-30,-80,50,70]],
		        		[[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60],[-20,-70,60,60]],
		        		[[-10,-80,40,70],[-10,-80,40,70]],
		        		[],[],[]
		        		];
		//攻击范围
		var attackList = [[],[],[],[],
			          		[[0,0,0,0],[0,0,0,0],[30,-70,75,60],[30,-70,75,60]],
			          		[[0,0,0,0],[0,0,0,0],[20,-100,80,90],[20,-100,80,90]],
			          		[[0,0,0,0],[0,0,0,0],[-10,-90,100,80],[-10,-90,100,80]],
			          		[[10,-70,50,70],[10,-70,50,70],[10,-70,50,70],[10,-70,50,70],[10,-70,50,70],[10,-70,50,70]],
			          		[[0,0,0,0],[0,0,0,0],[-30,-70,90,60],[-90,-70,130,60],[-100,-80,140,70],[-40,-80,140,70]],
			          		[[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,0,0,0],[0,-100,100,40],[0,-110,100,50],[0,-110,100,50],
			          		[0,0,0,0],[20,-120,140,120],[20,-120,130,120],[-50,-120,160,120],[-60,-80,180,80],
			          		[-20,-50,150,60],[-10,-60,150,60],[50,-60,90,60],[50,-75,150,70],[50,-75,150,70],
			          		[50,-75,150,70],[50,-75,150,70]],[],[]
			          		];
		return [dataList,coordinateList,locationList,hertList,attackList];
	}
}
Copier après la connexion

De cette façon, utilisez simplement ces plages prédéfinies pour détecter les collisions. Comment détecter de telles collisions rectangulaires ? Bien sûr, une classe rectangle LRectangle dans le moteur lufylegend.js est utilisée. Pour une utilisation spécifique, veuillez vous référer au document officiel de l'API. La détection de collision utilisée cette fois est la fonction intersects(). Cette fonction est utilisée pour détecter si deux LRectangle. les objets se chevauchent, c'est-à-dire s'il faut entrer en collision.

Parce que notre côté et le lieu peuvent être attaqués, la détection d'attaque est chargée dans la classe parent Character et le code suivant est ajouté à la fonction onframe de la classe Character.

if(self.action == ACTION.ATTACK || self.action == ACTION.BIG_ATTACK || self.action == ACTION.HIT || 
			self.action == ACTION.JUMP_ATTACK || self.action == ACTION.SKILL || self.action == ACTION.BIG_SKILL){
		for(key in charaLayer.childList){
			chara = charaLayer.childList[key];
			if(self.belong == chara.belong)continue;
			self.checkAction(chara);
		}
	}
Copier après la connexion

C'est-à-dire que lorsque l'action du personnage actuel est une attaque ou une autre action, et lorsqu'il s'agit d'un ennemi, la fonction checkAction de détection d'attaque est entrée La fonction checkAction est la suivante.

Character.prototype.checkAction = function (chara){
	var self = this;
	var attack_rect = self.getAttackRect();
	var hert_rect = chara.getHertRect();
	if(!attack_rect || !hert_rect)return;
	if(attack_rect.intersects(hert_rect) && Math.abs(self.y - chara.y) < 30){
		if(self.action == ACTION.ATTACK){
			chara.setAction(ACTION.HERT,chara.direction);
		}else{
			var dir = DIRECTION.RIGHT;
			if(self.x < chara.x)dir = DIRECTION.LEFT;
			chara.setAction(ACTION.FALL,dir);
		}
	}
}
Copier après la connexion

getAttackRect函数和getHertRect函数分别返回当前的攻击和被攻击的范围LRectangle对象,然后通过intersects函数判断是否攻击到了对方,如果是普通攻击,则被攻击方变为被攻击状态,其他攻击方式的话,变为摔倒状态。

getAttackRect和getHertRect函数如下。

Character.prototype.getAttackRect = function(){
	var self = this;
	attackList = self.attackList[self.action];
	if(self.anime.colIndex >= attackList.length)return false;
	var rect = attackList[self.anime.colIndex];
	var x = rect[0],y=rect[1],w=rect[2],h=rect[3];
	if(x == 0 && y == 0 && w == 0 && h == 0)return false;
	y += self.y;
	if(self.direction == DIRECTION.LEFT){
		x = self.x - x - w;
	}else{
		x = self.x +x;
	}
	return new LRectangle(x,y,w,h);
}
Character.prototype.getHertRect = function(){
	var self = this;
	var hertList = self.hertList[self.action];
	if(self.anime.colIndex >= hertList.length)return false;
	var rect = hertList[self.anime.colIndex];
	var x = rect[0],y=rect[1],w=rect[2],h=rect[3];
	if(x == 0 && y == 0 && w == 0 && h == 0)return false;
	y += self.y;
	if(self.direction == DIRECTION.LEFT){
		x = self.x - x - w;
	}else{
		x = self.x +x;
	}
	return new LRectangle(x,y,w,h);
}
Copier après la connexion

好了,剩下的敌人的AI和声效等部分,咱们留着以后再继续。现在,大家可以点击下面的测试连接,看看本次的成果了

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

黄老将军听说即将登场的是孙尚香后激动不已,那叫一个美啊,眼睛整个眯成了一个心形,大吼着,尚香啊,老夫等你几百年了。这是在令我大吃一惊,孙尚香不是刘备老婆吗,是这老家伙的主子啊,这真是太不像话了。可老将军在一旁兴奋的吼着,“靠!我会让你知道我暗恋她几百年吗?老夫绝对不会承认的。”,“如果当年我年轻个几十年,呸,我怎么会这么想,她毕竟是主公的老婆。”,“不对,主公也老了。啊,老夫可是忠臣,我是不会跟主公抢的。”,“老夫什么都没说。lufy,你给我听着,老夫什么都没说。”。我急忙说“啊啊,我什么都没听见啊……”

不过,这有什么用啊,这老家伙一上场,就开始往前跑,边跑边嘟囔“妞,给大爷摸一个……”。由于某种原因,这里省略1000字。

终于,孙尚香出现了,老黄忠一下子就扑了过去,刚伸手去摸了一把,就发现孙尚香被他打的满地跑,立马吼道“lufy,老夫要的是摸,不是砍啊”。

lufy:“哼哼,老色鬼,我岂能给你方便,让你得逞……”,另外他还不知道在前面,还给他准备了另一个黄忠,一个孙尚香,看他们怎么抢吧,哈哈。

唉,真是:
神箭威名数黄忠,斩将杀敌显神通。百年宝刀仍未老,一遇红颜梦成空。

源码

现在给出本次源码下载,喜欢的可以看一下。

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

注意:该附件只包含本次文章源码,lufylegend.js引擎请到http://lufylegend.com/lufylegend进行下载。

 以上就是[HTML5游戏开发]挑战横版ACT(三):遇红颜英雄亦多情的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal