2019.08.28今回はHTMLとJavaScriptを使って、ブラウザ上で動かせるシューティングゲームの作り方を解説していきます。プレイ動画https://itech-program.com/wp-content/uploads/2019/08/bd89spbuds.mp4・ルールプレイヤーが敵を倒すとスコアが獲得できます。敵は3種類で、スコアの内訳は以下のようになります。黄色・・・300点プレイヤーは3基の残基を持っていますが、これがなくなるとゲームオーバーとなります。ルールはとても簡単です。重要ポイントCanvasの設置JavaScriptファイルを外部から呼び出すCanvasタグの属性main.jsを作成メインループを作成Canvasに描画するキー操作を行うindex.htmlの作成まずは「index.html」というHTMLファイルを作成していきます。src="main.js"></script></body></html>重要ポイントCanvasの設置このCanvasというタグが非常に重要で、今回作成していくゲームの内容はこのCanvasに描画していきます。JavaScriptファイルを外部から呼び出すHTMLファイルの中にJavaScriptの内容を書くのではなく、JavaScriptは「JavaScript」ファイルで別々にしておきます。・widthCanvasの幅を設定します。・heightCanvasの高さを設定します。・styleCanvasのデザインをCSSの書式で設定します。今回は「background-color」で背景色を黒に設定しました。main.jsを作成メインループを作成それでは「main.js」を作成していきます。ループ}ゲームでは基本的に「メインループ」というのが必要になりますが、JavaScriptではこのように実装することで「メインループ」を作ることができます。「requestAnimationFrame」関数自体はそこまで重要ではないので、気になった方は調べてみてください。このプログラムを簡単に説明すると、「main」関数の中で「main」関数を呼び出すことで「メインループ」を実装していることになります。Canvasに描画するそれではCanvasに描画を施していきます。大まかな流れは、「Canvasを取得」→「CanvasのContextを取得」→「描画」となります。ループ}「getElementById」関数で、「index.html」で作成した「Canvas」を取得します。この時、「index.html」側の「Canvas」のIDを設定する必要があるので注意です。今回はIDを「canvas」という文字列にしたので、関数の引数には「canvas」を指定しました。次に、取得した「Canvas」の「Context」を取得します。この「Context」を使用することで描画関連の処理を行うことができます。「Context」を取得するには「getContext」関数を使用し、引数に次元を指定するのですが、今回は2Dゲームなので「2d」を指定します。キー操作を行う次にキー操作を行います。ゲームするにはコントローラーが必要ですからね。キー操作は「addEventListener」関数で「キーイベント」を追加することで実装します。今回は「キー押下・キー離上処理」の2つの「キーイベント」を追加していきます。キーコードを取得console.log(keyCode);});ブラウザの機能で「JavaScriptコンソール」を表示し、実際にキーを押してみてください。すると、キーを押すと同時に数字が表示されるはずです。この数字は、キーコードを呼ばれるものです。キーコードはすべてのキーに付与されているので、どのキーが押されたかをこのキーコードで判別します。次回は、今回作成したプログラムを基に「プレイヤーの処理」を作成していきます。今回は3種類の敵が必要なので、「水色」の敵は「0」、「緑色」の敵は「1」、「黄色」の敵は「2」とします。今、ブロックが壁・ブロックに着地した段階までできました。色の値は以下のように定数として用意します。このシリーズで目指していくテトリスは、このようなものになります。このシリーズを通してテトリスの作り方を学んでいくことによって、この画像と同じものを作ることができます。プレイヤーの処理を実装するにあたって、このプレイヤークラスを用いてプレイヤーの情報を管理していきます。コメントをキャンセルメールアドレスが公開されることはありません。R1カテゴリーJavaJavaFXJavaScriptPythonRこのサイトの管理人IT系だんしプログラミングが大好きな人。趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。