[HTML5-Spieleentwicklung] Fordern Sie die horizontale Version von ACT (2) heraus: Zeigen Sie Ihr Können und seien Sie so mutig wie zuvor

Dieser Artikel ist der zweite in dieser Artikelserie. Weitere Artikel finden Sie im Inhaltsverzeichnis im Beitrag unten

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

Plötzlich fiel mir ein, dass General Huang Zhong und Huang schon seit einiger Zeit ohne Essen und Trinken auf dem dunklen Schlachtfeld waren tat.
Als ich auf das Schlachtfeld kam und einen Blick darauf warf, wurde mir klar, dass diese Sorge unnötig war. Der alte General war immer noch energisch und aktiv an Ort und Stelle und schrie immer wieder: „Versuchen Sie nicht, mich in eine Falle zu locken, das war ich.“ für eine Weile tot. „Zurück.“

Als ich sah, wie der alte General verzweifelt versuchte, zwei Schritte nach vorne zu machen, beschloss ich, den alten General ziehen zu lassen.
Aber zuerst müssen Sie das Schlachtfeld aufhellen, ein Hintergrundbild vorbereiten, es dann mit dem LBitmap-Objekt im Spiel anzeigen und das ursprüngliche schwarze Rechteck auskommentieren.

//背景层
	backLayer = new LSprite();
	//backLayer.graphics.drawRect(1,"#000",[0,0,LGlobal.width,LGlobal.height],true,"#000");
	baseLayer.addChild(backLayer);
	var background = new LBitmap(new LBitmapData(imglist["back"]));
	backLayer.addChild(background);

Der Effekt ist wie folgt

Der alte General Huang blickte auf das bekannte Schlachtfeld Er hatte es schon lange nicht mehr gesehen. Dann blickte er auf die Flagge mit dem Wort „Dong“ auf dem Schlachtfeld und schrie: „Ich bin fast außer Atem. Was für eine Beziehung hat Dong Zhuo zu mir!?“ >

Eigentlich konnte ich nicht anders, ich konnte kein passendes Bild finden. Jetzt besteht der nächste Schritt darin, die Charaktere weiter zu rufen: „Es hat bereits begonnen, sich zu bewegen.“ Aber es ist einfach so, dass ich mich nirgendwo bewegen kann. Übrigens, warum ist dieser alte Mann so wütend ...

Ich möchte nicht auf ihn achten und weiterhin Code schreiben. Lassen Sie uns den vorherigen Code ruhen lassen und ihn eine Aktion nach der anderen ausführen. Ich werde nur den Kernteil schreiben und der vollständige Code wird in Kürze heruntergeladen.

1. Gehen Sie herum

Im Spiel muss genau beurteilt werden, ob der Status jeder Taste auf der Tastatur gedrückt oder angezeigt wird. Bereiten Sie daher ein keyCtrl-Array vor, um den Status zu speichern der Tastaturtasten.

Wenn gedrückt, verwenden Sie

keyCtrl[e.keyCode] = true;

Wenn es angezeigt wird, verwenden Sie

keyCtrl[e.keyCode] = false;

Auf diese Weise kann der Status jeder Taste über das keyCtrl-Array abgerufen werden .

Als nächstes rufen Sie die Move-Funktion in der Onframe-Funktion der Character-Klasse auf. Berechnen Sie in der Move-Funktion basierend auf dem aktuellen Status des Charakters den zu bewegenden Schritt.

Character.prototype.move = function (){
	var self = this, mx = self.mx, my = self.my;
	if(self.action == ACTION.MOVE || self.action == ACTION.JUMP || self.action == ACTION.JUMP_ATTACK){
		mx *= MOVE_STEP;
		my *= MOVE_STEP;
	}else if(self.action == ACTION.RUN){
		mx *= MOVE_STEP*2;
		my *= MOVE_STEP*2;
	}else if(self.action == ACTION.HIT){
		mx = MOVE_STEP*2*(self.direction == DIRECTION.RIGHT ? 1 : -1);
		my = 0;
	}else{
		mx = my = 0;
	}
	if(mx == 0 && my == 0)return;
	self.x += mx;
	self.y += my;
	if(self.y < 250){
		self.y = 250;
	}else if(self.y > 448){
		self.y = 448;
	}
};

Die oben genannten self.mx, self.my werden in der Player-Klasse berechnet

Player.prototype.move = function (){
	var self = this, mx = 0, my = 0;
	if(keyCtrl[KEY.LEFT]){
		mx = -1;
	}else if(keyCtrl[KEY.RIGHT]){
		mx = 1;
	}else if(keyCtrl[KEY.UP]){
		my = -1;
	}else if(keyCtrl[KEY.DOWN]){
		my = 1;
	}
	self.mx = mx;
	self.my = my;
	self.callParent("move",arguments);
};

Die callParent-Funktion ist die Methode zum Aufrufen der übergeordneten Klassenfunktion in der Zwei Parameter: Der erste Parameter ist der Methodenname der übergeordneten Klasse und der zweite Parameter sind die festen Parameterargumente. Da Player von Character erbt, ruft er die Bewegungsfunktion des Character-Objekts auf.

Dann kann in der Onkeydown-Abhörfunktion für Tastaturtastendrücke der Zustand des Charakters entsprechend den Tasten geändert werden, sodass der Charakter gehen kann.

2. Laufen

Beim Laufen muss man das letzte Mal und dieses Mal die folgenden Tricks usw. berücksichtigen die Einrichtung Ein Array keyList

var keyList = [{keyCode:0,time:0},{keyCode:0,time:0},{keyCode:0,time:0}];

, das Schlüssel speichert. Bei jedem Tastendruck werden die aktuellen Informationen in das Array verschoben und anschließend die unnötigen Schlüsselinformationen (zweimal) entfernt.

var keyThis = {keyCode:e.keyCode,time:(new Date()).getTime()};
var keyLast01 = keyList[0];
var keyLast02 = keyList[1];
keyList.unshift(keyThis);
keyList.pop();

Entscheiden Sie dann anhand der Informationen in der Tastenfolge, ob ausgeführt werden soll

	switch(e.keyCode){
		case KEY.LEFT:
			if(keyLast01.keyCode == KEY.LEFT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.LEFT);
			}else{
				hero.setAction(ACTION.MOVE,DIRECTION.LEFT);
			}
			break;
		case KEY.RIGHT:
			if(keyLast01.keyCode == KEY.RIGHT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.RIGHT);
			}else{
				hero.setAction(ACTION.MOVE,DIRECTION.RIGHT);
			}
			break;

3, springen

Zur Vereinfachung der Kontrolle werde ich springen Das Bild wurde geändert

Da die Bewegungen des Charakters über das LAnimation-Objekt angezeigt werden, solange Sie während des Sprungs die y-Koordinate des LAnimation-Objekts ändern , du kannst Springen realisieren

Ich habe die Onframe-Funktion in der Player-Klasse neu geschrieben

Player.prototype.onframe = function (){
	var self = this;
	self.callParent("onframe",arguments);
	if(self.action == ACTION.JUMP){
		self.onjump();
	}else if(self.action == ACTION.JUMP_ATTACK){
		self.onjump_attack();
	}
};

Der obige Code lautet: Wenn der Charakter springt oder zum Angriff springt, werden die entsprechende Onjump-Funktion und onjump_attack verwendet Mit dieser Funktion ändern Sie innerhalb dieser beiden Funktionen die Y-Koordinate des LAnimation-Objekts entsprechend der Wiedergabenummer des Bildes. Auf diese Weise wird der Sprung perfekt realisiert.

Player.prototype.onjump = function (){
	var self = this;
	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];
};
Player.prototype.onjump_attack = function (){
	var self = this;
	self.setLocation();
	var index = self.anime.colIndex;
	if(index >= self.yArr.length)return;
	self.anime.y += self.yArr[index];
};

4. Angriff

Beim Angriff ist es unmöglich, zu gehen oder zu springen und andere Aktionen auszuführen, bevor die Angriffsaktion endet. Wenn also die Angriffstaste gedrückt wird, müssen Sie sperren die Schlüssel und machen sie ungültig

Warum die setTimeout-Funktion verwenden? , denn es gibt auch einen Spezialzug, der aktiviert werden muss, indem man gleichzeitig den Angriffsknopf und den Sprungknopf drückt, aber es ist unmöglich, dass man zwei Knöpfe gleichzeitig drückt Hier stelle ich den Maximalwert dieses Intervalls auf 50 Millisekunden ein, sodass Sie innerhalb dieser 50 Millisekunden erneut die Sprungtaste drücken können.

5, kontinuierliche Angriffe

setTimeout("keylock = true;",50);
hero.setAction(ACTION.ATTACK,hero.direction);

Wenn es mehrere aufeinanderfolgende normale Angriffe gibt, erscheint alle drei Mal ein Spezialangriff

Natürlich. Sie müssen die Zeit dieser aufeinanderfolgenden Angriffe beurteilen. Wenn drei Angriffe innerhalb einer Sekunde ausgeführt werden, wird dies als kontinuierlicher Angriff gewertet.

case KEY.ATTACK:
if(keyLast01.keyCode == KEY.ATTACK && keyLast02.keyCode == KEY.ATTACK && keyThis.time - keyLast02.time < 1000){
	keyList = [{keyCode:0,time:0},{keyCode:0,time:0},{keyCode:0,time:0}];
	keylock = true;
	hero.setAction(ACTION.BIG_ATTACK,hero.direction);
}

6. Sprungangriff

Solange Sie angreifen, während sich der Charakter im Sprungzustand befindet, wird dies als Sprungangriff gewertet.

7, Fertigkeitsangriff

Freunde, die die Arcade Three Kingdoms gespielt haben, wissen alle, dass Sie eine besondere allgemeine Fertigkeit starten, wenn Sie nach unten => nach oben => angreifen Außerdem ist es ganz einfach: Beurteilen Sie einfach die ersten beiden Tastendrücke, wenn die Angriffstaste gedrückt wird.

case KEY.ATTACK:
	if(keyLast01.keyCode == KEY.ATTACK && keyLast02.keyCode == KEY.ATTACK && keyThis.time - keyLast02.time < 1000){
		keyList = [{keyCode:0,time:0},{keyCode:0,time:0},{keyCode:0,time:0}];
		keylock = true;
		hero.setAction(ACTION.BIG_ATTACK,hero.direction);
	}else if(hero.action == ACTION.JUMP){
		hero.setAction(ACTION.JUMP_ATTACK,hero.direction);
	}else{
		setTimeout("keylock = true;",50);
		hero.setAction(ACTION.ATTACK,hero.direction);
	}

8. Großer Trick

Was solltest du tun, wenn der Bildschirm voller Feinde um dich herum ist? Einfach reinzoomen.

if(keyLast01.keyCode == KEY.UP && keyLast02.keyCode == KEY.DOWN && keyThis.time - keyLast02.time < 300){
	keylock = true;
	hero.setAction(ACTION.SKILL,hero.direction);
}

在攻击键按下的时候，判断一下跳跃键是不是同时被按下了。

if(keyLast01.keyCode == KEY.JUMP && keyThis.time - keyLast01.time < 50){
	keylock = true;
	hero.setAction(ACTION.BIG_SKILL,hero.direction);
}

当然，在跳跃键按下的时候，也需要判断一下攻击键是不是被按下了。

if(keyLast01.keyCode == KEY.ATTACK && keyThis.time - keyLast01.time < 50){
	keylock = true;
	hero.setAction(ACTION.BIG_SKILL,hero.direction);
}

绝招发动的时候，其他按键是无效的，所以键按键上锁keylock=true;

比较特殊的是，绝招图片的动作比较多，全都合到一行上的话，图片太长，所以我分成了5行。

其他的动作图片都是一行，所以这里需要做些特殊处理，就是当一行图片播放完之后，马上开始播放下一行图片，知道全部动作都播放完为止。

处理过程是，首先在动作改变的时候，加上侦听函数

self.anime.addEventListener(LEvent.COMPLETE,self.overAction);

这样，当一组动作播放完毕之后，会调用overAction函数

下面是Character对象的overAction函数

Character.prototype.overAction = function (anime){
	var self = anime.parent;
	self.anime.removeEventListener(LEvent.COMPLETE,self.overAction);
	var lastAction = self.action;
	var animeAction = anime.getAction();
	self.setAction(ACTION.STAND,self.direction);
	self.overActionRun(lastAction,animeAction);
};
Character.prototype.overActionRun = function (lastAction,animeAction){
};

LAnimation对象的getAction函数是获取当前的属性，包括播放的图片序号和镜像等，具体请参照lufylegend引擎的API文档，接着在Player对象中重写overActionRun函数。

Player.prototype.overActionRun = function (lastAction,animeAction){
	var self = this;
	self.callParent("overActionRun",arguments);
	keylock = false;
	
	if(lastAction == ACTION.BIG_SKILL && animeAction[0] < 3){
		keylock = true;
		self.setAction(ACTION.BIG_SKILL,self.direction);
		self.anime.setAction(animeAction[0]+1);
		self.anime.onframe();
	}
};

animeAction[0]是播放图片的行序号，根据行序号的值，判定是否继续播放下一行动作，绝招处理完成。

最后，整合一下上面的处理，onkeydown函数的完整代码如下。

function onkeydown(e){
	if(keylock || keyCtrl[e.keyCode])return;
	
	var keyThis = {keyCode:e.keyCode,time:(new Date()).getTime()};
	var keyLast01 = keyList[0];
	var keyLast02 = keyList[1];
	
	keyCtrl[e.keyCode] = true;
	keyList.unshift(keyThis);
	keyList.pop();
	
	switch(e.keyCode){
		case KEY.LEFT:
			if(keyLast01.keyCode == KEY.LEFT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.LEFT);
			}else{
				hero.setAction(ACTION.MOVE,DIRECTION.LEFT);
			}
			break;
		case KEY.RIGHT:
			if(keyLast01.keyCode == KEY.RIGHT && keyThis.time - keyLast01.time < 200){
				hero.setAction(ACTION.RUN,DIRECTION.RIGHT);
			}else{
				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:
			if(keyLast01.keyCode == KEY.ATTACK && keyLast02.keyCode == KEY.ATTACK && keyThis.time - keyLast02.time < 1000){
				keyList = [{keyCode:0,time:0},{keyCode:0,time:0},{keyCode:0,time:0}];
				keylock = true;
				hero.setAction(ACTION.BIG_ATTACK,hero.direction);
			}else if(keyLast01.keyCode == KEY.JUMP && keyThis.time - keyLast01.time < 50){
				keylock = true;
				hero.setAction(ACTION.BIG_SKILL,hero.direction);
			}else if(hero.action == ACTION.JUMP){
				hero.setAction(ACTION.JUMP_ATTACK,hero.direction);
			}else if(keyLast01.keyCode == KEY.UP && keyLast02.keyCode == KEY.DOWN && keyThis.time - keyLast02.time < 300){
				keylock = true;
				hero.setAction(ACTION.SKILL,hero.direction);
			}else{
				setTimeout("keylock = true;",50);
				hero.setAction(ACTION.ATTACK,hero.direction);
			}
			break;
		case KEY.JUMP:
			if(keyLast01.keyCode == KEY.ATTACK && keyThis.time - keyLast01.time < 50){
				keylock = true;
				hero.setAction(ACTION.BIG_SKILL,hero.direction);
			}else if(keyCtrl[KEY.DOWN]){
				hero.setAction(ACTION.HIT,hero.direction);
			}else{
				hero.setAction(ACTION.JUMP,hero.direction);
			}
			break;
	}
}

测试连接如下：

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

下面是各个动作的按键，大家可以测试一下

走动：A向左，D向右，W向上，S向下

跑：按两下走动

跳：K

攻击：J

连续攻击：攻击多次

跳跃攻击：K => J

撞击：S+K

技能攻击：S => W => J

绝招：J+K

老将军既然已经能跑能跳了，便冲着我大喊：“马忠在哪儿？”。要知道找个素材那可是比登天还难啊，我上哪里给他找马忠去啊，下次还是先给他整几个炮灰让他先过过瘾吧。

上面说的可能有点乱，现在给出本次源码下载，喜欢的可以看一下。

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

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

 以上就是[HTML5游戏开发]挑战横版ACT(二)：秀身手勇猛如当年的内容，更多相关内容请关注PHP中文网（www.php.cn）！