こんにちはgrandstreamです。
今回もJavaScript初心者である僕が、YouTube動画を見ながら「スーパーマ◯オ」を作成してみるシリーズをお届けします。
第四弾の今回は、「おじさんクラス」を作成していきます。
なお、前回の記事はこちら↓
参考動画
参考にさせていただいたのは「Akichonプログラミング講座」さんの動画です。
おじさんクラスを作る部分の解説は本動画シリーズの第8回です。
「おじさんクラスを作成」コード解説
前回までで、おじさんの横移動とジャンプの動きが完成しましたが、コードが少し煩雑になってしまいました。
そこで今回は「おじさんクラス」を作ることでコードを整理していきたいと思います。
こちらが今完成しているところまでのコードです。
前回までは、「index.html」「main.js」の2ファイルでしたが、今回は「ojisan.js」というファイルを新たに作りました。
ここにおじさん情報（横移動・ジャンプ）をもつクラスを作成し、main.jsファイルの中でそれを呼び出して使用するという方針で作成しています。
index.html
htmlファイルは変更していませんので割愛します。
main.js
ではまず、main.jsファイルのコードを見ていきます。
先程も少し説明しましたが、今回行った作業は、おじさん情報をojisan.jsというファイルにまとめて、main.jsの中で呼び出すというものです。
したがって、main.jsファイルで今回変更したのは次の3つです。
- おじさんに関する変数・定数を削除し、おじさんクラスのインスタンスを生成
- 「更新処理」内のコードを削除し（ojisan.jsに移す）、おじさんクラスから呼び出す記述に変更
- 「描画処理」内のおじさんを表示する部分のコードもクラスから呼び出す記述に変更
では詳しくみていきます。
おじさんクラスのインスタンスを生成
クラスの中身については「ojisan.js」のところで解説しますが、ここでは、「ojisan.js」で作成したクラスを実際に利用するために、インスタンスを生成しています。
そうすることで、クラス内の様々なメソッド（関数）を使用することができます。
更新処理内で、おじさんの情報を呼び出す
もともとupdate()部分にはおじさんの横移動やジャンプに関する記述が長々と書かれていましたが、これをごっそり切り取って、おじさんクラスから呼び出す記述に置き換えています。
切り取ったおじさんの動きに関する記述は、ojisan.jsファイルに移しています。
描画処理内の「おじさんを表示」部分もクラスから呼び出す
おじさんの描画に関する記述もojisan.jsに移し、ここではそこから呼び出す記述に変更しています。
ojisan.js
今回新たに作成したojisan.jsファイルでは、main.jsから切り取った「おじさんの動きや描画処理に関する記述」をおじさんクラス（Ojisan）を作成することで再定義しています。
具体的には以下の流れで作成しました。
- 各種定数の設定
- コンストラクタの設定
- ジャンプ処理、歩く処理、スプライト（画像）を変更する処理
- 更新処理
- 描画処理
1. 各種定数の設定
おじさんクラス内で使用するいくつかの定数を設定しておきます。
「ANIME_◯◯◯」というのはすべて、どのスプライト画像を使用するか、に対応しています。
「ANIME_JUMP」だったら、ジャンプしているおじさんの画像が表示されます。
このように定数の名前を設定すれば、後で使用するときにとてもわかりやすいですね。
2. コンストラクタの設定
Ojisanクラスを宣言したらまずは、コンストラクタを設定します。
正直これに関しては僕もあんまり理解できていないのですが、コンストラクタは初期化用メソッドで、main.jsでインスタンスを生成する際に引数（x,y）を設定することで任意の値でインスタンスを生成できるようです…。
よくわからんですね…笑。
ともかく、ここでやっているのは、おじさんに関する様々な変数を定義し、初期値を設定しているということですね。
なお、これらの変数はもともとmain.jsに記述してあったものと同じです（変数名はちょっと変えていますが）。
3. ジャンプ処理、歩く処理、スプライト（画像）を変更する処理の記述
ここでは、おじさんに関する処理をいくつかに分割してメソッド（関数）として記述しています。
もともとmain.jsに書いてあったコードの変数部分はすべて、先程コンストラクタで設定したものに置き換えています。
あとは条件分岐(elseif)が多かったところはswich文に書き換えたり、その他諸々リファクタリング（見やすく整理）しています。
4. 更新処理の記述
ここでは、先程作った「ジャンプ処理」「歩く処理」「スプライト変更処理」のメソッドを呼び出すとともに、アニメカウンタ、座標変更などその他の処理をまとめて記述しています。
つまり、ここにはおじさんの動きに関する処理が全て書かれていることになります。
これをmain.jsのupdate()の中で呼び出しているわけですね。
5. 描画処理
最後に、おじさんの動きを画面に反映させる描画処理のメソッドを記述して終わりです。
これはmain.jsのdraw()内で呼び出して使用します。
まとめ
今回はおじさんクラスを作成しました。
なお、今回の作業は必須では無いようです（やらなくてもゲーム自体は動くので）が、今後キャラクタが増えたりするとさらにコードがぐちゃぐちゃになって見づらくなることが考えられます。
それを防ぐためにも、こういった作業はやっておいたほうが良いということのようです。
次回は背景の描画に移っていきます。
では！
コメント
[…] 【JavaScript】ゲーム制作をしてみた④クラス作成【スーパーマ◯オ】 […]