【Part1/5】HTML+JavaScriptでシューティングゲームを作るitech-program.com2019.08.28目次プレイヤークラスを作成するプレイヤーを描画するポイント「clearRect」で画面を消去する座標を真ん中に指定するプレイヤーをキーで操作するポイント斜め移動の速度を調整するキーの状態を知るプレイヤークラスを作成するプレイヤーの処理を実装するにあたって、このプレイヤークラスを用いてプレイヤーの情報を管理していきます。JavaScript自体はオブジェクト指向の言語ではないのですが、便利な機能なので使っていきましょう。キーコードを取得console.log(keyCode);});JavaScriptではコンストラクタを「constructor」関数で実装します。メンバ変数は「constructor」関数内で定義します。この時、「this」を用いて定義しないとメンバ変数として認識されなくなってしまうので注意です。プレイヤーを描画するプレイヤーは「fillRect」関数を使って矩形で表現します。引数は「X・Y座標」と「幅・高さ」です。キーコードを取得console.log(keyCode);});ポイント「clearRect」で画面を消去するプレイヤーを動かす上でこの画面の消去は欠かせません。ゲーム内ではメインループが行われています。そのため画面消去がなされていないと、描画したものに上書きして描画を行うことになるため、連続して描画されたものが表示されてしまいます。座標を真ん中に指定する「fillRect」関数で描画される矩形の座標は「左上」に設定されていますが、ゲーム制作においては若干都合が悪いため「真ん中」に設定します。矩形の「X・Y」座標のそれぞれに、「幅・高さ」の半分を引き算します。break;}});ポイント斜め移動の速度を調整する上記のプログラムを見ての通り、若干複雑なプログラムが組まれてるのがわかると思います。これで何を行なっているかというと、実は「斜め移動の速度調整」を行なっています。調整が必要なのでしょうか。「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回目の少しの間の影響を一切受けなくなります。4つのキーの状態を、「1」「0」で管理します。キーが押されたら「1」を、キーが離されたら「0」を代入します。キーコードに関しては、ネット上に上がっているので調べてみてください。次回は弾を撃つ処理を実装していきます。色の値は以下のように定数として用意します。今回は3種類の敵が必要なので、「水色」の敵は「0」、「緑色」の敵は「1」、「黄色」の敵は「2」とします。最大発射数をJavaScript【Part1/5】HTML+JavaScriptでシューティングゲームを作る今回はHTMLとJavaScriptを使って、ブラウザ上で動かせるシューティングゲームの作り方を解説していきます。プレイヤーが敵を倒すとスコアが獲得できます。このテトリスにおいて、何もないマスは「0」、壁を「9」とし、それ以外の数字をブロックとします。今、ブロックが壁・ブロックに着地した段階までできました。このシリーズで目指していくテトリスは、このようなものになります。このシリーズを通してテトリスの作り方を学んでいくことによって、この画像と同じものを作ることができます。コメントをキャンセルメールアドレスが公開されることはありません。R1カテゴリーJavaJavaFXJavaScriptPythonRこのサイトの管理人IT系だんしプログラミングが大好きな人。趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。