スポンサーリンク
スポンサーリンク

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


前回

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

弾クラスを作成する

 

(main.js)

 

ポイント:弾に必要な情報

存在フラグ

その弾が存在しているかどうかのフラグ。

フラグを表す変数は基本的に「true・false」で管理します。

X・Y座標

弾がどの位置にあるかを2次元座標で管理します。

幅・高さ

今回のゲームでは弾を矩形で表現するので、弾の幅と高さを情報を矩形を描画する際に指定する必要があります。

角度・速度(ベクトル)

弾の角度と速度、つまりはベクトルです。

弾を発射した時に、どの方向にどれだけの速さで進むのかを設定します。

 

プレイヤーに弾を与える

プレイヤーが弾をショットするので、プレイヤーが弾を保持する必要があります。

なので、先ほど作成した「Bullet」クラスをプレイヤークラス内で定義します。

 

(main.js)

 

ポイント

弾の最大発射数の意味

この弾の最大発射数の意味ですが、これはプレイヤーがゲーム内で発射できる弾の最大数ではありません。

つまりこの場合、プレイヤーが5発撃った時点で終了するわけではありません。

 

では何故最大数を設定しているかというと、不自由なくプレイヤーが弾を連射できる範囲で、メモリの節約をするためです。

つまりこの場合、「Bullet」クラスのインスタンスに用いられるメモリが、「Bullet」5個分に節約されることになります。

 

プレイヤーが弾をショットする

 

プレイヤーが弾をショットする際に行う操作は、大まかにいうと1つです。

それは弾の情報の設定です。

なのでまず、弾の情報を設定するための関数、「enter」関数を「Bullet」クラス内で定義します。

 

(main.js)

 

このシューティングゲームでは「Z」キーを押すことでショットすることにします。

なので、「Z」キーを押したタイミングで「enter」関数が呼ばれるようにします。

 

(main.js)

 

ポイント

存在している弾は発射できない!

すでに発射した弾をもう一回発射することはできません。

ということは、弾を発射する時に「発射されていない弾」を発射する必要があります。

そこで「getBulletNum」関数を定義し、「発射されていない弾(existがfalse)」を検索し、配列の要素番号を返します。

 

Zキーは1・0で管理しない

今回のシューティングゲームでは、1回「Zキー」を押すごとに1回弾を発射するようにします。

そのため「Zキー」が押された後に「Zキー」の状態を1で固定してしまうと、5ミリ秒の間に5発発射されてしまいます。

なので、1回発射したら「1」より大きい別の数字にする必要があります。

 

発射した弾の進行方向は「ー90度」

数学における角度と、プログラミングにおける角度は違う場合があります。

言語によりますが、JavaScriptの場合は違います。

このように、「JavaScript」は時計回りに、「数学」は半時計回りに回ります。

なのでこの場合、プレイヤーが上方向に弾を発射する時の角度は「270度(もしくはー90度)」になります。

 

プレイヤーの弾を移動・描画する

 

まずは発射された弾の座標を更新し、弾を移動させます。

 

(main.js)

 

ポイント

移動の計算式

\(\theta = angle\)

\(x’ = x + cos\theta * spd\)

\(y’ = y + sin\theta * spd\)

このように三角関数を用いて進みたい方向に、一定に速度で進ませることができます。

 

 

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

(main.js)

 

これでプレイヤーの弾の描画ができました。

 

次回は敵の処理を実装していきます。

次回

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

コメント