コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > H5 チュートリアル > 【HTML5ゲーム開発】ヨコ版ACTに挑戦（2）：前回同様、勇気を出してスキルを披露

【HTML5ゲーム開発】ヨコ版ACTに挑戦（2）：前回同様、勇気を出してスキルを披露

黄舟
リリース： 2017-03-01 16:20:30
オリジナル
1875 人が閲覧しました

この記事はシリーズの2回目です他の記事については、以下の投稿の目次をご覧ください

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

突然です。鍾馗老将軍が食料も水もなく、しばらく暗い戦場にいたことを思い出した。
戦場に来て見てみると、そんな心配は無用だったことが分かりました、老将軍はその場でまだ元気で活動的で、「私を陥れようとするな、私は一度死んでいる。」と叫び続けていました。 「」。

必死に二歩前に進もうとする老大将を見て、私は老大将を動かしてもらうことにしました。
ただし、最初に、戦場を明るくし、背景画像を準備してから、LBitmap オブジェクトを使用してゲーム内に表示し、元の黒い四角形をコメントアウトする必要があります。 

//背景层
	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);
ログイン後にコピー

効果は以下の通りです



黄老将軍は久しぶりに見慣れた戦場を眺め、戦場にある「東」の旗を見て叫んだ。 「危うく気を失いそうになった、董卓、それが私に何の関係があるの！？」 実際、適切な写真を見つけるしかありません。次のステップはキャラクターを動かすことです。」もう動き始めていますが、動き回るだけでもう疲れ果ててしまいました。ところで、このおじさんはなぜそんなに怒っているのでしょうか...

私は彼に注意を払ってコードを書き続けるのが面倒なので、前のコードを中断して、一度に 1 つのアクションを実行してみましょう。ここではコア部分のみを書きます。完全なコードはすぐにダウンロードされます。

1. 歩き回る

ゲームでは、キーボードの各キーの状態が押されているかポップアップされているかを正確に判断する必要があるため、キーボードのキーの状態を保存する keyCtrl 配列を用意します。

押すときは

keyCtrl[e.keyCode] = true;
ログイン後にコピー

ポップアップするときは

keyCtrl[e.keyCode] = false;
ログイン後にコピー

このようにして、keyCtrl配列を通じて各キーの状態を取得することができます。

次に、Characterクラスのonframe関数内でmove関数を呼び出し、move関数内でキャラクターの現在の状態に基づいて、移動する移動ステップの長さを計算します。 

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;
	}
};
ログイン後にコピー

上記のself.mx、self.myはPlayerクラスで計算されます

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);
};
ログイン後にコピー

callParent関数は、lufylegendエンジンの親クラスの関数を呼び出すメソッドで、最初のパラメータはメソッドです。親クラスの名前。Player は Character を継承するため、2 番目のパラメーターは固定パラメーター引数であり、Character オブジェクトの move 関数が呼び出されます。

次に、キーボードのキー押下の onkeydown リスニング機能で、キーに応じてキャラクターの状態を変更し、キャラクターが歩くことができるようにします。

2. ランニング

ランニングとは、左または右を2回連続で押すことを意味します。これには、次のトリックなどを考慮して、キーを格納するための配列keyListがあります。

キーが押されるたびに、現在の情報が配列にプッシュされ、不要なキー情報(2回前)が削除されます。 

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();
ログイン後にコピー

を実行するかどうかを判断します。 3.ジャンプ

キャラクターの動きがLAnimationを介しているため、制御を容易にするためにジャンプ画像を修正しました

オブジェクトが表示されるので、ジャンプ処理中にLAnimationオブジェクトのy座標を変更すればジャンプが実現できます

Playerクラスのonframe関数を書き直しました

	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;
ログイン後にコピー

上記のコードは、キャラクターがジャンプしたり、ジャンプ 攻撃するとき、対応する onjump 関数と onjump_attach 関数が呼び出されます。この 2 つの関数では、画像の再生回数に応じて LAnimation オブジェクトの y 座標が変更されます

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();
	}
};
ログイン後にコピー

このようにして、ジャンプが完全に実現されます。

4.攻撃

をするとき、攻撃アクションが終了するまでは歩くことやジャンプなどのアクションが不可能なので、攻撃ボタンを押したときにボタンを無効にするためにボタンをロックする必要があります

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];
};
ログイン後にコピー

setTimeout関数? , 発動する必殺技もあるため、必殺技を発動するには攻撃ボタンとジャンプボタンを同時に押す必要がありますが、2つのボタンを同時に押すことは不可能です。ここでは、この間隔の最大値を 50 ミリ秒に設定しています。この 50 ミリ秒以内にもう一度ジャンプ キーを押すことができます。

5、連続攻撃

通常攻撃が連続すると、3回ごとに特殊攻撃が出現します

setTimeout("keylock = true;",50);
hero.setAction(ACTION.ATTACK,hero.direction);
ログイン後にコピー

もちろん、3回攻撃の場合は、この連続攻撃の時間を判断する必要があります。 1秒以内に設定すると連続攻撃と判定されます。

6.ジャンプ攻撃

これも簡単ですが、キャラクターがジャンプ状態の時に攻撃すればジャンプ攻撃と判定されます。 

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);
}
ログイン後にコピー

7、スキル攻撃

アーケード三国志をプレイしたことのある友人は皆、下=>上=>攻撃を押すと特別な一般スキルが発動することを知っています。これも簡単です。攻撃ボタンは最初の2つのボタンを押すだけです。 

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、究極のトリック

画面が周囲の敵でいっぱいの場合はどうすればよいですか?ズームインしてください。

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

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）！


関連ラベル：
HTML5，游戏开发，ACT
ソース：php.cn
前の記事：【HTML5ゲーム開発】横版ACTに挑戦（1）：黄忠忠が凱天帝に登場 次の記事：【HTML5ゲーム開発】ヨコ版ACTに挑戦（3）：美しき英雄との出会いに熱くなる
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript - Mocha Chai 単体テストが実行されない 私はフロントエンド Web 開発コースのブートキャンプでプロジェクトに取り組んでいますが、残念ながら教授は私のこの質問に答えることができません。 2 人のプレイヤーが参加し、26 ...
から 2024-04-02 14:52:19
0
1
356
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート