[HTML5-Spieleentwicklung] Fordern Sie die horizontale Version von ACT (3) heraus: Fühlen Sie sich leidenschaftlich, wenn Sie einen schönen Helden treffen

Dies ist der dritte Artikel der Serie. Weitere Artikel finden Sie im Inhaltsverzeichnis im folgenden Beitrag

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

Der Anfang ist langwierig

Diese Reihe von Tutorials ist das erste Mal, dass ich mich weiterentwickelt habe Ein lächerlicher Stil. Der größte Teil des Artikels ist nur Speichellecker. Jeder kann ihn einfach kostenlos lesen und aufpassen, dass er nicht überschwemmt wird.

Der erste Engpass bei dieser Art der Entwicklung sind Materialien. Ich möchte Netizen Yorhomwang für die Bereitstellung einer großen Anzahl von Material-URLs danken.

Das Folgende ist das Ergebnis dieser Entwicklung, bitte sehen Sie sich zuerst eine Vorschau an.

Materialkonvertierungstool

Die diesmal gefundenen Materialien sind alle GIF-Bilder. Wenn Sie sie im Spiel verwenden möchten, benötigen Sie Um die GIF-Bilder zu konvertieren, habe ich Flash verwendet, um ein einfaches Konvertierungstool zu erstellen. Die URL lautet wie folgt.

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

Hauptthema

Man kann sagen, dass General Huang seit langem von mir auf dem Schlachtfeld außen vor gelassen wurde Seit einiger Zeit langweile ich mich extrem. Ich bin mit einem Messer auf dem Schlachtfeld, schlage wie verrückt zu, renne, brülle...

Ich kann es nicht mehr ertragen, zu lesen, also bin ich entschlossen, es zu tun Schreiben Sie weiter ein paar Zeilen Code, um seinem alten Mann etwas Spaß zu machen.

1. Verschieben Sie das Schlachtfeld

Verschieben Sie zunächst die Schlachtfeldkarte. Sie können nicht an derselben Stelle laufen, egal wie Sie eine Variable definieren.

var back_run = true;

Wenn diese Variable wahr ist, kann die Hintergrundkarte des Schlachtfelds verschoben werden, andernfalls kann sie nicht verschoben werden.

Fügen Sie dann den Code zur Steuerung der Schlachtfeldbewegung in der Bewegungsfunktion von Player.js hinzu. Warum ist er in Player.js und nicht in Character.js? Denn die Karte bewegt sich nur, wenn sich der Protagonist, General Huang, bewegt. Der Charakter ist die übergeordnete Klasse, und die Feinde werden später auch von dieser Klasse erben.

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

Sie können sehen, dass sich die Kartenkoordinaten in die entgegengesetzte Richtung erhöhen und verringern, wodurch eine visuelle Kartenbewegung realisiert wird. Beachten Sie, dass es eine Zeile gibt, die die Funktion „addEnemy“ aufruft Die Funktion besteht darin, zu erkennen, ob ein Feind dem Schlachtfeld hinzugefügt wird.

Zweitens: Füge einen Feind hinzu

Sehen wir uns an, wie man einen Feind hinzufügt. Dieses Material ist relativ vollständig, nicht einzeln aufgeführt . Aus.

Fügen Sie unten eine Enemy.js-Klasse hinzu

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

Diese Klasse ähnelt Player.js und beide erben von der Character-Klasse. Es ist nur so, dass ich nicht mehr jedes relevante Array an den Konstruktor übergebe, was zu umständlich ist. Stattdessen übergebe ich eine Array-Liste mit allen Parametern, die festgelegt werden müssen.

Wenn die Funktion addEnemy() zum Hinzufügen von Feinden aufgerufen wird, können wir Feinde nicht unbegrenzt hinzufügen. Bereiten Sie daher im Voraus vor, welche Feinde hinzugefügt werden sollen und wann sie hinzugefügt werden sollen.

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

Ich habe ein Energ_list-Array hinzugefügt, das das „when_x“ enthält, wann der Feind hinzugefügt werden soll, die Koordinaten des Ortes, an dem der Feind erscheint, und Informationen, z. B. ob sich die Karte nach dem Erscheinen des Charakters nicht mehr bewegt. Wann addEnemy Wenn die Funktion aufgerufen wird, bestimmt sie basierend auf when_x und der Position des Protagonisten, ob der Feind hinzugefügt werden muss.

3. Angriff

Mit dem Feind wird es einen Kampf geben, über die Entschlossenheit, anzugreifen und angegriffen zu werden.

Die Bestimmung des Angriffs ist eigentlich die Erkennung von Kollisionen. Natürlich können wir Kollisionen auf Pixelebene verwenden, aber für diese Art von Spiel ist das etwas übertrieben und die Effizienz ist zu gering, also verwenden wir Rechtecke hier Kollisionserkennung.

Die lufylegend.js-Engine verfügt über die Funktion LGlobal.hitTest(), mit der erkannt werden kann, ob ein Rechteck kollidiert. Da es jedoch viele leere Bereiche im Bildmaterial gibt, wird diese Methode direkt verwendet , der Fehler ist etwas zu groß. Daher stelle ich die Angriffsreichweite und die Angriffsreichweite ein, die für jeden Frame des Zeichens erkannt werden müssen. Siehe den Code in CharacterList.js unten.

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

Verwenden Sie auf diese Weise einfach diese voreingestellten Bereiche, um Kollisionen zu erkennen. Natürlich wird eine Rechteckklasse LRectangle in der lufylegend.js-Engine verwendet. Informationen zur spezifischen Verwendung finden Sie im offiziellen API-Dokument. Die Funktion intersects() wird verwendet, um zu erkennen, ob zwei LRectangle vorhanden sind Objekte überlappen sich, das heißt, ob sie kollidieren.

Da sowohl unsere Seite als auch der Ort angegriffen werden können, wird die Angriffserkennung in die übergeordnete Klasse Character geladen und der folgende Code zur Onframe-Funktion der Character-Klasse hinzugefügt.

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

Das heißt, wenn die Aktion des aktuellen Charakters ein Angriff oder eine andere Aktion ist und es sich um einen Feind handelt, wird die Funktion checkAction zur Angriffserkennung wie folgt eingegeben.

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

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

好了，剩下的敌人的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中文网（www.php.cn）！