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

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

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

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

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

各回一覧

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

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

完成品の確認

この記事では、Ready…・GameOver・スコアの表示が目標です。

ついに「敵を倒してスコアが増える」STGの醍醐味部分です！
早速コードを見ていきましょう！

main.js

全文コードは↑のcodepenをご確認ください。
【//　第6回で追加した箇所　⓪//】で囲んだ場所が追加分です。

今回のポイントは3つ

・変数
・敵を弾で倒した時：変数更新～スコア表示
・自機が被弾した時：GameOver表示

まずは、新しく増えた変数から見ていきましょう。

変数

今回追加された変数は1つです。

var score = 0

scoreは敵機を倒した時のスコアです。
敵を1機倒すごとに +1していくため、初期値を0としています。

と理解を広げていただければと思います。
実際、第5回の周辺に少し手を加えるだけで完成できます。

敵を弾で倒した時：変数更新～スコア表示

変数の更新、スコア表示の計2か所が追加されています。

// 変数の更新 //
// スコアを1加算
score++;

こちらが変数の更新、衝突判定の処理の中(L435-437)に追加されています。
敵を1機倒す⇒scoreを1加算　ということですね。

この加算したものを表示するためのものがこちら

//　画面下にスコアを表示する　//
info.innerHTML = 'SCORE: ' + (score * 100) + ' ' + message

『スコアの100倍を表示させなさい』という大変シンプルな処理です。
フラグにより再帰呼び出しのすぐ上(L472～474)にこれを入れることでスコアを反映させることができます。

「READY…」→「GO!!』を表示する

続いて、「READY…」→「GO!!の表示
敵キャラクターの処理のすぐ上(L327～343)にこれを追加します。

// カウンターの値でシーン分岐
switch(true){
// カウンターが70より小さい
case counter < 70:
message = 'READY...';
break

// カウンターが100より小さい
case counter < 100:
message = 'GO!!'
break

// カウンターが100以上
default:
message = ''

switch文でcounterの大きさ(70以下⇒100以下⇒100以上)で表示を変えていきます。
「READY…」→「GO!!」→「(なし)」の順番ですね。

switchは第3回(敵機のクラス)で解説しておりますので、ご参考下さい。

自機が被弾した時：GameOver表示

最後は自機に弾が当たる時、GameOverを表示する処理
追加するのは自機×敵機ショットがぶつかった時(L460～462)ですね。

message = 'GAME OVER !!'

大変シンプルですね。
処理内容より、どこにこれを追加するかの方が難しいのでまとめておきましょう。

// 自機と敵機ショットとの衝突判定
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;
　　　　　//　第6回で追加した箇所③　//
          message = 'GAME OVER !!';
　　　　　//　第6回で追加した箇所③　//
            break;
        }
    }
}
//　第6回で追加した箇所④　//    
break
}    
//　第6回で追加した箇所④　//
      
//　第6回で追加した箇所⑤　//
      info.innerHTML = 'SCORE: ' + (score * 100) + ' ' + message;
//　第6回で追加した箇所⑤　//

//　第6回で追加した箇所④　//    でbreakの処理が追加されています。
これはswitch文にかかっていますので注意が必要です。

まとめ

今回もボリューム少な目でしたね！
最後にポイントをおさらいしましょう。

①は第3回の敵クラスの際に説明した場合分けの考え方ですね。
②はswitch文にかかっていることを理解できれば問題ないと思います。

ついに次回は最終回！ボス敵を作成します！

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