JavaScript

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

前回

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

敵クラスを作成する

 

(main.js)

 

敵に必要な情報

敵の種類

今回は3種類の敵が必要なので、「水色」の敵は「0」、「緑色」の敵は「1」、「黄色」の敵は「2」とします。

敵の弾

最大発射数を「3」にし、敵が弾を撃てるように「Bullet」クラスのインスタンスを保持させます。

X・Y座標

敵の描画位置を設定します。

幅・高さ

敵を矩形で表現するので、「幅・高さ」を設定します。

角度・速度(ベクトル)

敵の進行方向と速度を設定します。

カウンタ

敵が弾を撃つ間隔を決定するのに用います。

 

敵を動かす

 

敵は壁にぶつかることで跳ね返り、それによって進行方向が変化するようにします。

もちろんただ跳ね返るのではなく、入射角と反射角が等しくなるように跳ね返らせます。

 

(main.js)

 

ポイント

入射角と反射角が等しくなるように跳ね返らせる

右・左に跳ね返る場合

\(angle =\) 敵の進行方向

入射角・反射角 \(= \theta = angle – \displaystyle \frac{\pi}{2}\)

跳ね返る方向 \(= angle – 2\theta\)

 

上・下に跳ね返る場合

\(angle =\) 敵の進行方向

入射角・反射角 \(= \theta = angle – 2\pi\)

跳ね返る方向 \(= angle – 2\theta\)

 

速度を上げて難易度を上げる

上手い人であれば、永遠にゲームオーバーしない可能性があるので、いつか終わるように速度を毎回少しずつ上げていきます。

 

敵を描画する

 

それでは敵を描画していきます。

 

(main.js)

 

ポイント

敵の初期角度

実行してみてわかったと思いますが、敵が扇状に移動していくのがわかると思います。

これを実装する上で若干の数学の知識が必要になるので、解説をします。

上記の画像のように一番左の敵は「150°(\(= \displaystyle \frac{5\pi}{6}\))」の方向に進むとし、この基準から「\(\theta\)」ずつ区切っていくことで扇状に移動させます。

 

敵に弾を撃たせる

 

プレイヤーの時と同様に「shot」関数を作成します。

 

(main.js)

 

敵の発射間隔

敵は20カウントずつ1発発射します。

また、最大発射数(3発)を超えた場合は、発射されていない弾ができるまで新たに発射することはできません。

 

敵の弾を描画

 

(main.js)

 

最後に弾の描画をして、これで敵の処理ができました。

 

次回はゲームの完成をしていきます。

次回

【Part5/5】HTML+JavaScriptでシューティングゲームを作る【最終回】前回 https://itech-program.com/javascript/1529 当たり判定 プレイヤーと敵の当た...
ABOUT ME
IT系だんし
プログラミングが大好きな人。 趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。