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 herumIm 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 SiekeyCtrl[e.keyCode] = true;
keyCtrl[e.keyCode] = false;
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;
}
};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);
};var keyList = [{keyCode:0,time:0},{keyCode:0,time:0},{keyCode:0,time:0}];var keyThis = {keyCode:e.keyCode,time:(new Date()).getTime()};
var keyLast01 = keyList[0];
var keyLast02 = keyList[1];
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;
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();
}
};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];
};
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
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);
}
Solange Sie angreifen, während sich der Charakter im Sprungzustand befindet, wird dies als Sprungangriff 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);
}else if(hero.action == ACTION.JUMP){
hero.setAction(ACTION.JUMP_ATTACK,hero.direction);
}else{
setTimeout("keylock = true;",50);
hero.setAction(ACTION.ATTACK,hero.direction);
}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）！
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Der Unterschied zwischen HTML und HTML5
So lösen Sie das Problem eines ungültigen Datenbankobjektnamens
Was ist der Hauptunterschied zwischen C-Sprache und Python?
Der Unterschied zwischen den selbst betriebenen und offiziellen Flagship-Stores von JD.com
So lösen Sie ungültige Syntax in Python
Verwendung der Insert-Anweisung
Verwendung der Sprintf-Funktion in PHP
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
