こんにちはgrandstreamです。
今回もJavaScript初心者である僕が、YouTube動画を見ながら「スーパーマ◯オ」を作成してみるシリーズをお届けします。
第二弾の今回は、「おじさんを左右に移動させる」部分を実装していきます。
なお、過去の記事はこちら↓
参考動画
参考にさせていただいたのは「Akichonプログラミング講座」さんの動画です。
おじさんを移動させる部分は本動画シリーズの第4回〜第6回途中までです。
「おじさんを左右に移動させる」コード解説
では、「おじさんを左右に移動させる」部分のコードについて解説してみたいと思います。
こちらが今完成している部分までのコードです。
見た目
コードを見ていく前に、現段階での見た目はこんな感じです。
キーボードの「←」「→」を押すとその方向におじさんが歩き出します。
最初はゆっくり目に歩きますが、だんだん早くなり、ある速度で一定の速さで走るようになります。
また急に方向転換したときは、急ブレーキするようなアニメーションとなっています。
index.html
htmlファイルは前回からなにも変わっていません。
main.js
では、JavaScriptファイルのコードを順に見ていきましょう。
今回の方針としては以下のような感じです。
- キーボード「←」「→」が押されたり離されたりしたことを示す情報を配列に格納
- 更新処理（update()）の中で、先程の情報をとりだし、「←」「→」を押したり離したりした際のおじさんの動きを設定
- 描画処理（draw()）の中で、そのおじさんの動きに対応する画像を表示させる
キーボードの登録
キーボードの「←」「→」を押したり離したりしたという情報を、任意で設定したkeyb配列に格納します。
例えば、「←」を「押した」時は、Left: trueというキーと値の組み合わせkeyb配列に格納していることになります。
全部で4パターン設定します。
keyb配列にこれらの情報を入れておくことで、後で簡単に呼び出して使用することができるというわけです。
ちなみに関数内の(e)というのは今まさに押しているキーボードのことを表し、console.log(e)で見てみると各キーボードに色々な情報があらかじめ備わっているのがわかります。
その中でも今回はキーボード一つ一つに割り当てられている、keyCodeというプロパティを参照していることになります。
「←」「→」を押した際のおじさんの位置や動きの設定
先程設定した「←」「→」の情報を取り出しつつ、各キーボードが押されているときのおじさんの動きを設定していきます。
ここで使われているおじさんの変数をまとめてみます。
- oji_x…x軸方向の座標
- oji_y…y軸方向の座標
- oji_vx…加速度
- oji_anime…「止まっている」or「歩いている」or「歩いている途中に急に方向転換」を判定するのに使用
- oji_sprite…スプライト（画像ファイル）の何番目の画像かを表す
- oji_acount…フレームごとにカウントされる（つまり1秒間で60増える）。歩く速さの調節時に使用。
- oji_dir…「←」「→」どちらを押しているかを判定。「←」を押している時に左向きの画像を使う設定に使用。
さて、コードですが大まかには「←」or「→」or「キーボードを離している」の3パターンで条件分岐をし、各パターンでの動きを記述しています。
例えば、「←」を押している際は加速度を-1を毎フレームごとに足していきます。
最高-32になったらそれ以上は速くなりません。
他にも、走っている際に急に方向転換する際の「キュキュッ」となる動きなど細かい指定もしています。
また、oji_animeで「止まっている」or「歩いている」or「歩いている途中に急に方向転換」のいずれかを判定し、各状態ごとに使用する画像（oji_sprite）を決定します。
最後に、oji_vxの値をoji_xに代入することで実際のおじさんの位置を指定しています。
おじさんの画像を表示
ここまで、キーボードの設定、各キーボードを押した際のおじさんの細かい動きの設定をしてきました。
ここでは、これまでに指定したおじさんの動きに対応する画像を表示していきます。
使用するの変数はすでに設定済みのoji_sprite（おじさんの画像）、oji_x、oji_y（おじさんの位置）の3つです。
これを描画処理（draw()）の中のdrawSprite関数の引数として渡します。
ここでdrawSprite関数の引数をまとめてみます。
- snum…スプライト番号（oji_spriteが渡される）
- x…おじさんのx軸方向の位置（oji_xが渡される）
- y…おじさんのy軸方向の位置（oji_yが渡される）
スプライト番号について補足しておくと、今回使用している画像ファイルでは1つのファイルに16×32ピクセルごとにおじさんや敵キャラ、その他諸々の画像が整然と敷き詰められています。
そのため、スプライト番号をもとにして、その画像ファイルから任意の範囲を指定して切り出すことができます。
その任意の範囲を指定するために、sx, syという変数を用意し、画像ファイル上の位置情報を格納しています。
これらの情報を元にして、drawImage関数で特定の範囲の画像を切り出して、それをゲーム画面上の特定の位置に表示するという処理が行われます。
その他の補足（oji_x, oji_yの値について）
oji_x, oji_y共に初期値は100<<4と指定しています。
これは16進数で4ビット分左にずらす、つまり100を16倍しているのと同じ意味になります。
どうやら、大きな数値で計算することで、小数点が発生せず、おじさんの動きにバグが出ないようにしているようです。
計算後は逆にoji_x>>4（4ビット右にずらす）と指定することで、もとのスケールに戻しています。
ビット演算はコンピュータの得意とする計算方法である上、小数点も発生しないので、扱いやすいようです。
まとめ
ビット演算は今回が初めてだったのですが、こういった計算方法にも少しずつ慣れていかないといけないですね。
とりあえず、おじさんを左右に動かすことができたので、引き続き取り組んで行きたいと思います。
ではまた次回！
コメント
[…] 【JavaScript】ゲーム制作をしてみた②おじさんを左右に移動【スーパーマ◯オ】 […]
[…] 【JavaScript】ゲーム制作をしてみた②おじさんを左右に移動【スーパーマ◯オ】 […]