【JavaScript】シューティングゲームの作り方⑤【初学者向け】

シューティングゲーム、インベーダー・グラディウス・東方projectの弾幕STGなど様々な種類があり大変楽しいものです。

もちろんjavascriptで再現することができますが、難しい説明になりがちです。
「初学者向け」×「できるだけ丁寧に解説」が目標の記事となります。

理解の助けになれば幸いでございますので、よろしくお願いいたします。

筆者
・独学でゲームを作っている男
・javascriptが大好きな男

各回一覧

パート毎に分けておりますが、どの回も「完成品の確認⇒コードの解説」の流れで進みます。各回の一覧はこちら⇩

・第1回(マウスで移動できる自機)
・第2回(キーを押したら弾を発射できる)
・第3回(敵機を画面に表示する)
・第3⇒4回への補足　コピペ用　コード一覧
・第4回(敵機の弾を発射できる)
・第5回(今回)

完成品の確認

この記事では、弾が衝突したら自機/敵機を消すが目標です。

ついに弾が当たったら敵を倒すというゲームの醍醐味を作ることができます！
早速コードを見ていきましょう！

main.js

今回、弾が当たった判定を説明します。
難しそうですが、コードは20行程度です！

↑の2パターンのみですので早速見て行きましょう。

自機のショットが敵機と当たった時

今回追加されるのはこちら

//　第5回で追加した箇所①　//
// 弾が当たった判定
// 自機ショットを調べる
for(i = 0; i < Chara_Shot_Count; i++){
// 自機ショットの生存フラグをチェック
if(charaShot[i].alive){
// 自機ショットと敵機との衝突判定
for(j = 0; j < Enemy_Count; j++){
// 敵機の生存フラグをチェック
if(enemy[j].alive){
// 敵機と自機ショットとの距離を計算
p = enemy[j].position.distance(charaShot[i].position);
if(p.length() < enemy[j].size){
// 弾がめりこんでいる(距離が敵機サイズより小さい)場合、生存フラグを降ろす
enemy[j].alive = false;
charaShot[i].alive = false;

// 衝突があったのでループを抜ける
break;
}
}
}
}
}
//　第5回で追加した箇所①　//

これを言い換えると…

このようになります。
めりこんでいるかというのは⇩の画像をイメージいただければと思います。

charaShotがsizeの内側に入る=当たっている　と判定できます。
これをif文で判定、当たった場合はaliveフラグをfalseにすることで画面から消すことができます。

敵機のショットが自機と当たった時

続いては敵機ショットに自機が当たった時の処理です。

//　第5回で追加した箇所②　//
// 自機と敵機ショットとの衝突判定
for(i = 0; i < Enemy_Shot_Count; i++){
// 敵機ショットの生存フラグをチェック
if(enemyShot[i].alive){
// 自機と敵機ショットとの距離を計算
p = chara.position.distance(enemyShot[i].position);
if(p.length() < chara.size){

// 弾がめりこんでいる(距離が自機サイズより小さい)場合、生存フラグを降ろす
chara.alive = false;
// 衝突があったのでパラメータを変更
Run = false;

// ループを抜ける
break;
}
}
}
//　第5回で追加した箇所②　//

見ていただくと分かりますが、組み合わせが変わるだけですね。
自機ショット×敵機⇒敵機ショット×自機　となるだけですので、理解しやすいかと思います。

1点だけ、最後の部分だけ補足を致します。

Run=falseって何?

// 弾がめりこんでいる(距離が自機サイズより小さい)場合、生存フラグを降ろす 
chara.alive = false
// 衝突があったのでパラメータを変更
Run = false

chara.alive = falseになった時、「Runをfalseにしなさい」とあります。

これは第1回(マウスで移動できる自機)で解説したこの部分です。

// フラグにより再帰呼び出し
if(Run){setTimeout(arguments.callee, 1000/30);}

「Run=trueなら何度も呼び出してね」とすることでこのゲームは成立しています。
自機に弾があたる=gameover と今回はします。

よって、Run=falseにしてゲームを止めるための処理ということになります。

まとめ

前回までの頑張った分だけ、今回はボリューム少な目でしたね！
最後にポイントをおさらいしましょう。

①が最も大切だと思います。
組合せを間違えなければ、最後にフラグを降ろすだけですので問題ないと思います。

当記事がjavascriptでゲームを作ったりする時の理解の助けになれば幸いですので、お付き合いいただければと思います。