JavaScript

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

前回

【Part1/5】HTML+JavaScriptでシューティングゲームを作る今回はHTMLとJavaScriptを使って、ブラウザ上で動かせるシューティングゲームの作り方を解説していきます。 プレイ...

プレイヤークラスを作成する

 

プレイヤーの処理を実装するにあたって、このプレイヤークラスを用いてプレイヤーの情報を管理していきます。

JavaScript自体はオブジェクト指向の言語ではないのですが、便利な機能なので使っていきましょう。

 

(main.js)

 

JavaScriptではコンストラクタを「constructor」関数で実装します。

また、メンバ変数は「constructor」関数内で定義します。

この時、「this」を用いて定義しないとメンバ変数として認識されなくなってしまうので注意です。

 

プレイヤーを描画する

 

プレイヤーは「fillRect」関数を使って矩形で表現します。

引数は「X・Y座標」と「幅・高さ」です。

 

(main.js)

 

ポイント

「clearRect」で画面を消去する

プレイヤーを動かす上でこの画面の消去は欠かせません。

ゲーム内ではメインループが行われています。そのため画面消去がなされていないと、描画したものに上書きして描画を行うことになるため、連続して描画されたものが表示されてしまいます。

座標を真ん中に指定する

「fillRect」関数で描画される矩形の座標は「左上」に設定されていますが、ゲーム制作においては若干都合が悪いため「真ん中」に設定します。

なので、矩形の「X・Y」座標のそれぞれに、「幅・高さ」の半分を引き算します。

 

プレイヤーをキーで操作する

 

(main.js)

 

ポイント

斜め移動の速度を調整する

上記のプログラムを見ての通り、若干複雑なプログラムが組まれてるのがわかると思います。

これで何を行なっているかというと、実は「斜め移動の速度調整」を行なっています。

 

では何故調整が必要なのでしょうか。

例えば「X方向に+1」、「Y方向に+1」したとします。

こうすることで斜め移動が行われるのはわかると思います。

 

しかしよく考えてみてください。

単純に「X方向に+1」だけした場合と「Y方向に+1」だけした場合はプレイヤーの移動速度は「1」になりますが、斜め移動ではそうはいきません。

下の図をご覧ください。

この図を見てわかる通り、斜め移動した場合プレイヤーの速度は「\(sqrt{2}\)」になってしまい、若干速くなります。

このように三角形の長さの比率によってずれが生じてしまうため、斜め移動した場合だけ、「X方向に進んだ距離」と「Y方向に進んだ距離」をそれぞれ「\(sqrt{2}\)」で割る必要があります。

こうすることで速度を一定にすることができます。

 

キーの状態を知る

キー入力を実装する際に「addEventListener」関数を用いました。

しかしこの関数に登録されたイベントは、発生するタイミングが少し厄介になります。

 

例えばキーを押したとします。

本来なら1フレームごとに連続で呼び出されてほしいのですが、実際はこのようになります。

1回目・・・2回目3回目4回目5回目…..

このように、1回目と2回目との間に少しの間ができます。

 

こうなってしまうと、例えばキー入力イベントが呼ばれたタイミングでプレイヤーが移動するプログラムを組んだ時に、必ず1回止まってしまう現象が起きてしまいます。

 

ただ、押されてない状態から押す状態になる時にはこの現象は起きません。

ということは、押した時点で「押したフラグ」をオンにし、離した時点で「離したフラグ」をオンにするようなプログラムが組めれば、1回目と2回目の少しの間の影響を一切受けなくなります。

 

それを実現するために「key」という配列変数を用意し、「右」「左」「上」「下」の4つのキーの状態を、「1」「0」で管理します。

もしキーが押されたら「1」を、キーが離されたら「0」を代入します。

 

また、「右」「左」「上」「下」のキーコードに関しては、ネット上に上がっているので調べてみてください。

 

次回は弾を撃つ処理を実装していきます。

次回

【Part3/5】HTML+JavaScriptでシューティングゲームを作る 前回 https://itech-program.com/javascript/1524 弾クラスを作成する (m...
ABOUT ME
IT系だんし
プログラミングが大好きな人。 趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。