grandstream blog

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

こんにちはgrandstreamです。

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

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

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

【JavaScript】ゲーム制作をしてみた②おじさんを左右に移動【スーパーマ◯オ】

参考動画

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

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

「おじさんをジャンプさせる」コード解説

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

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

見た目

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

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

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

index.html

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

main.js

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

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

  1. キーボード「X」が押されたり離されたりしたことを示す情報を配列に格納
  2. 更新処理(update())の中で、先程の情報をとりだし、「X」を押した際のおじさんの動きを設定

キーボードの登録

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

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

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

ジャンプに関する変数・定数の設定

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

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

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

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

おじさんのy座標設定

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

「X」を押した際のおじさんの動きの設定

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

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

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

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

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

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

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

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

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

  • 歩いている画像に変更
  • ジャンプフラグを0に
  • 加速度も0に
  • 座標をoji_y = 150<<4に固定

こうすることで、ジャンプして重力で下に戻ってきた際にoji_y = 150<<4の位置でおじさんが床にぶつかって止まるようになります。

その他調整

最後に、歩いているときの処理と干渉しないように、横移動の処理部分に「!oji_jump(ジャンプしていない時は)」という条件を追加して微調整を行なって完了です。

まとめ

一言にジャンプと言っても、大ジャンプ・小ジャンプの区別があったり、ジャンプ中に減速していったりなど細かい調節がなかなか大変ですね…!

次回は、乱雑になったコードを少し整理する作業についてまとめていく予定です。

ではまた!

【JavaScript】ゲーム制作をしてみた④クラス作成【スーパーマ◯オ】

“【JavaScript】ゲーム制作をしてみた③ジャンプ【スーパーマ◯オ】” への1件のコメント

コメントはお気軽にどうぞ