こんにちはgrandstreamです。
今回もJavaScript初心者である僕が、YouTube動画を見ながら「スーパーマ◯オ」を作成してみるシリーズをお届けします。
第五弾の今回は、背景（地面ブロック）を描画していきます。
なお、前回の記事はこちら↓
参考動画
参考にさせていただいたのは「Akichonプログラミング講座」さんの動画です。
背景描画部分の解説は本動画シリーズの第9回です。
「背景を描画」コード解説
前回までで、おじさんの動きに関する部分は一区切り付きましたので、今回は背景、具体的には地面ブロックの描画をしていきます。
こちらが今完成しているところまでのコードです。
なお、以下5ファイルあります。
- index.html
- const.js
- map.js
- main.js
- ojisan.js
今回は新たに「const.js」「map.js」というjsファイルを新たに作成しています。
「const.js」には定数の定義に関する記述をまとめ、「map.js」には背景の描画に関するクラスを作成しました。
ではさっそく、各ファイルの中身を詳しくみていきましょう。
index.html
今回新たに作成したjsファイル「const.js」「map.js」をhtmlで読み込んでいます。
const.js
ではさっそく、const.jsファイルのコードを見ていきます。
このファイルは無くても良さそうですが、定数だけをまとめてコードを見通しを良くするために作成していると思われます。
FPSと画面サイズに関する記述は、もともとmain.jsにあったものを切り取って持ってきています。
「一画面あたりのブロックの数」の部分では、画面の縦、横それぞれの幅を16ピクセルで分割して、縦、横に入るブロック数を算出しています。
なぜ16ピクセルなのかと言えば、おそらく、切り出し元の画像が16ピクセル単位で構成されているからでしょう。
次に、「マップデータのブロックの数」ですが、こちらも同様に、縦、横のブロック数を代入しています。
今回は暫定的に、1画面のブロック数と同じ値（256/16=16, 224/16=14）にしています。
後々、おじさんが右の方に進んでいく際には、横のブロック数（FIELD_SIZE_W）をどんどん増やして背景を作成していくものと思われます。
map.js
さて、今回のメインとなるmap.jsでは、ojisan.jsのときと同様に、背景用のクラスを作成していきます。
では、中身のコードを見ていきます。
fieldData変数の設定
まずfieldDataという変数をおいていますが、ここに1次元の配列を格納しています。
横方向に16列、縦は14行なので、画面全体を示していると考えられますね。
1つの数字が、1つのブロックに対応しているわけです。
なお、下の2行だけすべて「1」となっていますが、これは後ほどこの部分に地面ブロックを配置するためです。
描画処理（draw()）
この部分では、先程定義したfieldDataの要素を一つ一つ取り出すfor文を記述しています。
bl変数がまさに、ブロック1つ1つに該当します。
px, pyは、各ブロックの座標を表します。
つまり、画面左上を基準に、該当のブロックがx方向、y方向へ何ピクセル分の位置にあるかを示しています。
最後に、drawBlock関数（後ほど説明）を呼び出して実際に描画処理をします。
今回は、画面下方に地面ブロックを表示させるという処理を行なっています。
drawBlock関数でブロックを描画
ここでは、画像ファイルから地面ブロック画像（スプライトファイルの25*16の位置にある）を切り出して、画面に表示させるという処理を行なっています。
main.js
さて、このままではまだ画面に反映されていないので、main.jsに、先程作ったクラスを呼び出す必要があります。
黄色マーカーで示した部分が新たに追記したコードです。
これで地面ブロックが表示されるようになりました！
ojisan.js
最後にちょっと修正です。
というのも、現状ではおじさんが地面から浮いてしまっているので、地面の位置まで着地させる必要があります。
ojisan.js内の「床にぶつかる」処理の部分で、「150→160」に変更します。
16進数の記述を使っているので、160だとy座標がうまい具合にピッタリの位置になるようです。
まとめ
というわけで今回は背景部分、特に地面ブロックの表示を行いました。
次回も引き続き背景の作成をしていく予定です。
ではまた！
https://ochandiary.lsrv.jp/javascript_game6
コメント
[…] 【JavaScript】ゲーム制作をしてみた⑤背景を描画【スーパーマ◯オ】 […]
[…] 【JavaScript】ゲーム制作をしてみた⑤背景を描画【スーパーマ◯オ】 […]