JavaScript

【Part5/5】HTML+JavaScriptでシューティングゲームを作る【最終回】

前回

【Part4/5】HTML+JavaScriptでシューティングゲームを作る 前回 https://itech-program.com/javascript/1526 敵クラスを作成する (m...

当たり判定

 

プレイヤーと敵の当たり判定

(main.js)

 

当たり判定の考え方

上の図のように、プレイヤーと敵の「X・Y」方向の距離「w・h」の値を求めて、プレイヤーと敵の幅・高さと比較し、「w・h」が共に大きかった場合は当たっていることになります。

 

同様に「プレイヤーと敵の弾」「プレイヤーの弾と敵」の当たり判定を作っていきます。

 

プレイヤーと敵の弾の当たり判定

(main.js)

 

プレイヤーの弾と敵の当たり判定

(main.js)

 

敵に弾が当たった後

敵に弾が当たったら、ランダムな位置(X座標)に配置し、角度もランダムに設定します。

また、Mathの「random」関数は「0〜1」のランダムな値を返す関数なので、数値計算では若干注意が必要です。

 

ダメージエフェクトと残基

 

これで当たり判定はできましたが、敵・敵の弾がプレイヤーに当たった時になにもアクションがないので、このままではわかりづらいです。

そこで、ダメージエフェクトと残基の表示を行います。

 

ダメージエフェクトの追加

(main.js)

 

ポイント

ダメージを受けた後に、点滅を繰り返すことでダメージエフェクトを実装しています。

また、ダメージエフェクトが発動している間はプレイヤーは無敵状態となり、敵の攻撃を受けません。

なので、「deffect」が「true」の場合はプレイヤーに対する当たり判定を無視します。

 

残基の表示

(main.js)

 

スコア処理

 

(main.js)

 

敵の種類によってスコアが違う

少しでもゲーム性を上げるために、敵の種類によってスコアが違うようにしました。

水色・・・100点

緑色・・・200点

黄色・・・300点

 

ゲームオーバー処理

 

いよいよゲームオーバー処理を行います。

完成が近づいてきました!

 

ゲームオーバー判定とプレイヤーの死亡

(main.js)

 

プレイヤーの死亡

プレイヤーの残基が0になったらプレイヤーは死亡し、ゲームオーバーとなります。

ゲームオーバーになると、プレイヤーは死亡しているため、プレイヤーに関する処理は実行する必要がありません。(11〜15行目

 

また、当たり判定も行う必要がないので条件文によって実行させません。(23〜67行目

 

ゲームオーバー後の処理

 

(main.js)

 

ポイント

ゲームオーバー後は「GAME OVER」と「Press Enter to Continue」を表示しますが、この時「Press Enter to Continue」の文字列が薄くなったり濃くなったりするようにします。

これを実装するには、「sinカーブ」と呼ばれるものを用います。

\(alpha = \sin 2\pi * cnt \div 200\)

このようにすることで、「0〜1」の間を200カウントの間で行ったり来たりするようになります。

ABOUT ME
IT系だんし
プログラミングが大好きな人。 趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。