ゲーム開発室通信 Vol.7 ～避けゲーのプログラミング解説その⑦～

最終ステージの障害物の動作編

ご訪問いただき誠にありがとうございます。
今回はいよいよ最終ステージの障害物の処理について解説いたします。

最終ステージは宝箱を開けに行くだけのステージです。ところが宝箱を開けてみると突然グラグラと揺れだして、右から巨大な障害物が追いかけてくる、という筋書きになっています。『インディ・ジョーンズ　レイダース失われたアーク』（古！）を彷彿させる演出にしています。このままで主人公は倒されてしまいます。よく見ると主人公は今までとは逆向きの左に向いています。そうなんです。ここからは今までクリアしてきたステージを逆に辿っていくことになるんです。往路と復路のステージで違うところは、大地がグラグラと揺れ続けているのと、後ろから巨大な障害物がいつまでも追いかけてくるところです。果たして、主人公は生き延びることができるのか？結末を体験したい方はぜひ下記のリンクからゲームにアクセスしてください。

実際の「避けゲー」で遊びたい方は以下よりアクセスしてください。

ソースコードはGitHub上にアップしていますので適宜参考にしてください。

最終？ステージの制御

最終ステージ（実はまだ折り返し地点なのですが）はtre()関数で制御しています。最終ステージの制御は以下です。

1. 宝箱の表示
2. 主人公が宝箱に近づいたときの仕掛けの発動
3. 仕掛け発動後、一定期間操作不能にする制御
4. 右から大きな障害物が追いかけてくる制御
5. 障害物との当たり判定

シンプルな処理ばかりですのでコードを見れば何をやっているかは分かりますが、いつものようにアクティビティ図とソースコードを載せておきます。

tre()関数のアクティビティ図

tre()関数のコード（avoider.jsから抜粋）

let evt=0;	//	復路のイベント用カウンタをクリア
function tre() {
	//宝箱の表示
	ctx.beginPath();
	ctx.rect(550+Rex, 110, 100, 100);
	ctx.fillStyle = "yellow";
	ctx.fill();
	ctx.closePath();

	//右から追いかけてくる障害物の表示（最終ステージのみここで表示、他のステージはReE()で表示）
	if (Re) {
		ctx.beginPath();
		ctx.arc(1600-evt, 160, 400, 0,Math.PI*2, false);	//キャンバスをはみ出る大きめの円を描画
		ctx.fillStyle = "red";
		ctx.fill();
		ctx.closePath();
	}
	
	//自キャラが宝箱に近づいたら
	if (x>=550&&!Re) {
		gamewait=true;	//ゲームを一旦停止する
		Re=true;	//復路側にセット
		e3 = false;	//第二ステージ用の点滅フラグをクリア
		em3 = 0;	//第二ステージ用の点滅状態をクリア
		et3 = 0;	//第二ステージ用の点滅カウンタをクリア
	}
	if (evt>400) {	//ゲーム一旦停止してから4秒経過後
		gamewait=false;	//ゲームを再開させる
	}
	if (x>=1600-evt-400) {	//円（障害物）の左端のx座標とぶつかったか
		gameover=true;	//障害物にぶつかったと判定し、ゲームオーバーの判定をセットする
	}
}

まとめ

今回も最後までご覧いただきありがとうございます。

今回は最終ステージの障害物の動きを見ていきました。最終ステージでは宝箱をゲットした瞬間に、さまざまな仕掛けが発動します。一定期間操作が不能になったり、ぐらぐらと揺れ出したり、後ろから障害物が追っかけてきたり、といった仕掛けです。また描画する際に、キャンバス外のエリアも使って大きく描画する工夫も見てきました。

さて、各ステージの処理の解説はこれでおしまいになります。次回は主人公が障害物に当たったときの演出やその他の細々した内容を見ていく予定です。

「避けゲー」のプログラミングの解説シリーズは次回で最終回となります。次回のブログにもお付き合いいただけると嬉しいです。