【JavaScript】ゲーム制作をしてみた③ジャンプ【スーパーマ◯オ】

こんにちはgrandstreamです。

今回もJavaScript初心者である僕が、YouTube動画を見ながら「スーパーマ◯オ」を作成してみるシリーズをお届けします。

第三弾の今回は、「おじさんをジャンプさせる」部分を実装していきます。

なお、前回の記事はこちら↓

参考動画

参考にさせていただいたのは「Akichonプログラミング講座」さんの動画です。

おじさんをジャンプさせる部分の解説は本動画シリーズの第6回途中〜第7回までです。

では、「おじさんをジャンプさせる」部分のコードについて解説してみたいと思います。

こちらが今完成している部分までのコードです。

コードを見ていく前に、現段階での見た目はこんな感じです。

キーボードの「X」を押すとおじさんがジャンプします。

また「X」を短めに押すと小ジャンプ、長めに押すと大ジャンプとなります。

htmlファイルは変更していませんので割愛します。

では、JavaScriptファイルのコードを順に見ていきましょう。

今回の方針としては以下のような感じです。

前回と同様、今度はキーボードの「X」をジャンプボタンに割り当てる作業をしていきます。

キーボードを押したとき、離したときのそれぞれの関数に「ABUTTON」というキー名でkeyb配列に格納します。

ちなみに「BBUTTON」（キーボード「Z」）もついでに登録していますが、こちらは今回は使いません。

「oji_vy」は縦軸方向の加速度です。マイナス方向に大きければ大きいほど、上に大きくジャンプさせるようにます。

「oji_jump」はジャンプフラグで、０が初期値（つまりジャンプしていない状態）です。

「ANIME_JUMP」はジャンプ時の画像を表示させる際に使用します。

「GRAVITY」は、おじさんにかかる重力を設定している定数です。後で見ますが、この数字を大きくするほど重力が強くなります。

x軸の設定時と同様、y軸方向のおじさんの座標を設定しています。

今回のメインとなる、「X」を押した際のジャンプの動きを設定している箇所です。

更新処理の関数（update()）内に記述しています。

まず、「X（ABUTTON）」を押しているときに、ジャンプしていない場合（oji_jump==０）にジャンプ処理を書いていきます。

具体的には、画像をジャンプ画像に変え、またoji_jump==１（ジャンプしている状態）に設定しています。（57〜58行目）

また実際に上方向にジャンプさせるために、oji_vyにマイナスの値を設定します。（60行目）

oji_vyの値設定は少し複雑なのですこし掘り下げて解説します。

ジャンプしている（oji_jump==０以外のとき）間は常に「oji_jump」に毎フレームごとに1を足す。（62行目）
「X」を押している間かつ「oji_jump」が15フレーム目になるまでは、「oji_jump」の値に応じて「oji_vy」に設定される加速度が小さくなっていく。（60行目）
→ つまり、「X」を長押しした場合は頂点付近で減速するようになる。また「X」を押している間は加速度が設定され続けるので、大ジャンプとなる。
→ 逆に「X」を短く押すと加速度がその間しか設定されないので重力（毎フレームごとにoji_vyに正の値が足されている）に負けて、小ジャンプになる。

そして、次に床にぶつかる設定です。（67行目〜）

おじさんの縦軸方向の座標（oji_y）が 150<<4（2400）以上のときに、以下のように設定します。