Web-Frontend
H5-Tutorial
[HTML5-Spieleentwicklung] Fordern Sie die horizontale Version von ACT (3) heraus: Fühlen Sie sich leidenschaftlich, wenn Sie einen schönen Helden treffen
[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 ://m.sbmmt.com/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中文网（m.sbmmt.com）！
Heiße KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Wofür ist das beiseite, für das in HTML5 beiseite ist?
Aug 12, 2025 pm 04:37 PM
Die Auslagerung sollte fürsortiert, dass die Tätigkeiten, solche ASSIDEBARS, PullQuotes, Definitionen, Anzeigen, OrteLatedLinks; 2. ItcanbeplaceInsieTIDEANTICDETEPENDINGINGONCONTEXTELECTEN;
Wie verwenden Sie das AutoFocus -Attribut in HTML5?
Aug 14, 2025 pm 06:47 PM
TheautofocusattributeautomatischfokusseaFormelementWhenapageloads.2.ISABOOLEANATTRIBUTE, SONOVALIVELEISNEDEDED - Justincludeautofocusinthetag.3.OnlyoneElementPagaGeSheduseToavoidunpretableBehavioremen.
Was ist eine Definitionsliste in HTML5?
Aug 20, 2025 pm 02:01 PM
AdefinitionListinhtml5iscreatedusedtheelementtogrupterms () mit derviderdefinitions (), erlauben MultipletenmstoshareadefinitionorateraterMtohavemultiPledeFinitions, Makeitidealforfaqs, Glossaries, Metadata und ContactactaTailswhilealFrevingfrevingfreving und ChontactailswhilealFrevingfrection und Chontactailswhileal,
So verwenden Sie das NAV -Tag für Navigationslinks in HTML5
Aug 15, 2025 am 05:55 AM
Thetaginhtml5isusedTodeFineAsctionofmajornAvigationLinks, ProvidingSemanticsStructureAnDimPultingAccessibilityandseo;
So erstellen Sie ein benutzerdefiniertes Kontrollkästchen mit HTML5
Aug 16, 2025 am 07:05 AM
Um ein benutzerdefiniertes Kontrollkästchen zu erstellen, müssen Sie zunächst eine HTML -Struktur mit Etikett verwenden, um die Zugänglichkeit zu gewährleisten. 2. Ausblenden Sie das Standard -Kontrollkästchen über CSS, behalten Sie aber seine Funktionalität. 3.. Verwenden Sie Pseudo-Elemente und Pseudoklassen, um den ausgewählten Zustand auf den benutzerdefinierten. Checkmark-Elementen zu zeichnen. V. 5. Halten Sie native Eingänge vorhanden, um die Tastaturnavigations- und Bildschirmleser zu unterstützen und letztendlich schöne und zugängliche benutzerdefinierte Kontrollkästchen zu erhalten.
Was ist das Figurenelement und wie wird es mit Figcaption in HTML5 verwendet?
Aug 20, 2025 pm 02:06 PM
Das Elementinhtml5isusedTomarkup-inselbe geschlossene Kontentikum, Diagramme, OrcodesnippetthatcanStandindependentywithinadocument
Wie laden ich Inhalte mit rel = 'Vorspannung' in HTML5 vor?
Aug 20, 2025 pm 04:12 PM
rel = "vorladen" wird verwendet, um die Schlüsselressourcen im Voraus zu laden, um die Seitenleistung zu verbessern. 1. Verwenden Sie die Syntax und geben Sie das AS -Attribut an. 2. Taste -Ressourcen wie Schriftarten, Stilblätter, Skripte, Bilder usw. und die Schriftart muss Crossorigin hinzugefügt werden. 3.. Es kann gemäß den Bedingungen in Kombination mit Medienattributen geladen werden. 4. Folgen Sie den Best Practices wie dem Laden von nur wichtigen Ressourcen auf dem ersten Bildschirm, der Vermeidung übermäßiger Nutzung und korrekten Einstellen von Typ und Kreuzorigin. 5. Moderne Browser unterstützen es ausführlich und können durch JavaScript eine allmähliche Verbesserung der Verarbeitung dynamisch hinzufügen oder durchführen, um sicherzustellen, dass die Seite normal funktioniert, wenn sie nicht unterstützt wird.
Wie können Sie eine Karte in HTML5 einbetten?
Aug 16, 2025 am 06:56 AM
Tembedamapinhtml5, useaniframefromgooglemaps bygeneratingTheembedcodeviathegooglemapsembedapiandinsertIntoyourHtml.2.Customizetheiframyad -Justing -Width, Höhe, Style und Maktribute, "undaddingattribute," und "Makingattribute," und "Makingattributes =" und "und" Makingattribute, "und" Makingattribute, "und" Makingattribute "="
