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

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

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

 

プレイ動画

 

・ルール

プレイヤーが敵を倒すとスコアが獲得できます。

敵は3種類で、スコアの内訳は以下のようになります。

水色・・・100点

緑色・・・200点

黄色・・・300点

プレイヤーは3基の残基を持っていますが、これがなくなるとゲームオーバーとなります。

 

ルールはとても簡単です。

では早速ゲームを作っていきましょう!!

index.htmlの作成

まずは「index.html」というHTMLファイルを作成していきます。

(index.html)

重要ポイント

Canvasの設置

このCanvasというタグが非常に重要で、今回作成していくゲームの内容はこのCanvasに描画していきます。

JavaScriptファイルを外部から呼び出す

HTMLファイルの中にJavaScriptの内容を書くのではなく、JavaScriptは「JavaScript」ファイルで別々にしておきます。

Canvasタグの属性

・width

Canvasのを設定します。

・height

Canvasの高さを設定します。

・style

CanvasのデザインをCSSの書式で設定します。

今回は「background-color」で背景色を黒に設定しました。

main.jsを作成

 

メインループを作成

 

それでは「main.js」を作成していきます。

(main.js)

 

ゲームでは基本的に「メインループ」というのが必要になりますが、JavaScriptではこのように実装することで「メインループ」を作ることができます。

「requestAnimationFrame」関数自体はそこまで重要ではないので、気になった方は調べてみてください。

 

このプログラムを簡単に説明すると、「main」関数の中で「main」関数を呼び出すことで「メインループ」を実装していることになります。

 

Canvasに描画する

 

それではCanvasに描画を施していきます。

大まかな流れは、「Canvasを取得」→「CanvasのContextを取得」→「描画」となります。

(main.js)

 

getElementById」関数で、「index.html」で作成した「Canvas」を取得します。

この時、「index.html」側の「Canvas」のIDを設定する必要があるので注意です。

今回はIDを「canvas」という文字列にしたので、関数の引数には「canvas」を指定しました。

 

次に、取得した「Canvas」の「Context」を取得します。

この「Context」を使用することで描画関連の処理を行うことができます。

「Context」を取得するには「getContext」関数を使用し、引数に次元を指定するのですが、今回は2Dゲームなので「2d」を指定します。

 

キー操作を行う

 

次にキー操作を行います。

ゲームするにはコントローラーが必要ですからね。

 

キー操作は「addEventListener」関数で「キーイベント」を追加することで実装します。

今回は「キー押下・キー離上処理」の2つの「キーイベント」を追加していきます。

 

(main.js)

 

ブラウザの機能で「JavaScriptコンソール」を表示し、実際にキーを押してみてください。

そうすると、キーを押すと同時に数字が表示されるはずです。

この数字は、キーコードを呼ばれるものです。

キーコードはすべてのキーに付与されているので、どのキーが押されたかをこのキーコードで判別します

 

次回は、今回作成したプログラムを基に「プレイヤーの処理」を作成していきます。

次回

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

コメント