[HTML 5ゲーム開発]横版ACTに挑戦(二):その年のように勇猛である

10867 ワード

本編はこのシリーズの文章の第2編で、その他の文章は以下の招待状の中の目次を見てください
http://blog.csdn.net/lufy_legend/article/details/8441677
ところで、突然黄忠黄老将軍が私にまだ真っ暗な戦場にいたことを思い出した.もうしばらく経ったが、食べていないので、飲んでいないので、どうしたのか分からない.私が戦場に来てみると、この心配は余計だと気づいた.
老将軍がこんなに必死に2歩進もうとしているのを見て、私は老将軍を歩かせることにした.しかし、まず戦場を明るくして背景画像を用意し、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つの動作をします.私はコア部分だけを書いて、完全なコードは後でダウンロードします.
1、歩く
ゲームでは、キーボードの各キーの状態が押しているか弾いているかを正確に判断する必要があるので、キーCtrl配列を用意してキーボードキーの状態を保存します.
押している間に、

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エンジンで親関数を呼び出す方法であり、2つのパラメータ、1つ目のパラメータは親のメソッド名、2つ目のパラメータは固定パラメータargumentsであり、PlayerはCharacterから継承されるため、Characterオブジェクトを呼び出すmove関数である.
そしてキーボードキーで押したリスニング関数onkeydownでキーによって人物の状態を変えることで、人物の歩行が可能になります.
2、走る
走行とは左または右を2回連続で押すことであり,これは前回と今回の2回のキーを判断し,後の技などを考慮して,ここではキーを格納する配列keyListを作成する必要がある.

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

キーを押すたびに、現在の情報を配列に押し込み、不要なキー情報を2回前に削除します.

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;

3、ジャンプ
コントロールしやすいようにジャンプ画像を修正しました
人物の動きはLAnimationオブジェクトによって表示されるので、ジャンプ中にLAnimationオブジェクトのy座標を変えるだけでジャンプが実現します
Playerクラスでonframe関数を書き換えました

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

上のコードは、人物がジャンプまたはジャンプして攻撃すると、対応するonjump関数とonjump_が呼び出されます.attack関数は、この2つの関数内で画像の再生シーケンス番号に基づいて、LAnimationオブジェクトのy座標を変更します.

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、攻撃
攻撃するときは、攻撃動作が終了するまで、ウォーキングやジャンプなど他の動作を行うことはできませんので、攻撃キーを押すときは、キーをロックして無効にする必要があります

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

settimeout関数を使用する理由また绝技の発动もありますので、绝技の発动には攻撃キーとジャンプキーを同时に押す必要がありますが、人间が2つのキーを同时に押すことはできません.小さな间隔が必要です.私はこの间隔の最大値を50ミリ秒に设定します.だから、この50ミリ秒以内に、ジャンプキーを再び押すことができます.
5、連続攻撃
通常攻撃が何回か続くと、特殊な攻撃が出てくるので、3回ごとに特殊な攻撃を行うように設定します.

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

当然、この数回の連続攻撃の時間を判断する必要があり、ここでは1秒以内に3回攻撃を行うように設定し、連続攻撃と判定する.
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);
	}else if(hero.action == ACTION.JUMP){
		hero.setAction(ACTION.JUMP_ATTACK,hero.direction);
	}else{
		setTimeout("keylock = true;",50);
		hero.setAction(ACTION.ATTACK,hero.direction);
	}

7、スキル攻撃
アーケード三国志をプレイしたことのある方はご存知ですが、下=>上=>で攻撃すると、特殊な武将技を発動します.これも簡単です.攻撃ボタンを押すときに前の2回のボタンを判断すればいいのです.

if(keyLast01.keyCode == KEY.UP && keyLast02.keyCode == KEY.DOWN && keyThis.time - keyLast02.time < 300){
	keylock = true;
	hero.setAction(ACTION.SKILL,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);
}

绝招発动の时、他のボタンは无効なので、キーキーキーはキーロック=true;
特殊なのは、絶技画像の動きが多くて、全部1行に合わせると、画像が長すぎるので、私は5行に分けました.
他のアクション画像はすべて1行なので、ここでは特殊な処理が必要です.1行の画像が再生されたら、すぐに次の行の画像が再生され、すべてのアクションが再生されることを知るまでです.
処理過程は,まず動作が変化したときにリスニング関数を加える.

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下
走る:2回で歩く
ジャンプ: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ダウンロードを行います.
転載はlufyから転載することを明記してくださいlegendのブログ
引き続き私のブログに注目してください
http://blog.csdn.net/lufy_legend

レイアウトのborder

文字列関数strcmp