プレイヤーを動かそう1
現在、プレイヤー(飛行機)はゲーム画面の左上に固定して描画されているだけですね。
そこで下の動画のように、プレイヤーを動かしていきたいと思います。
まずプレイヤーの情報を変数に保持することにします。
ブロックを動かそう と同様に、プレイヤーの情報をオブジェクトにまとめて、変数に保持します。
今回、プレイヤーは横方向(X方向)には動かず、縦方向(Y方向)にのみ動きます。
また、プレイヤーのサイズは固定です。
そこで、プレイヤーのY方向の情報のみ、オブジェクトにまとめて変数に保持することにします。
「Y方向の情報のみなら、情報は1つだけなのでオブジェクトでなくてもいいのでは?」と思われたかも知れません。
ところが今回は、プレイヤーが重力に従って落ちるような動きをします。
このような場合、Y方向の (位置, 速度, 加速度) の情報が必要になるので、それら3つの情報をオブジェクトにまとめます。
さて、ここからは物理の力学の知識が少し必要になってきます。
物理の力学を学んでいない方は、本レッスンはあまり深く考えずさらっと流していただけばと思います。
それではコードを書いていきましょう。
まずは一番上の行に、プレイヤーの情報を保持する変数を宣言してください。
let player;
次に、setup
関数内で、変数 player
にオブジェクトを代入してください。
player = { y: 100, vy: 0, ay: 0.05 };
y
がプレイヤーのY方向の位置、vy
が速度、ay
が加速度を意味しています。
初期位置としてY座標に100を指定しています。
速度は最初は0です。
加速度は下方向に0.05ほどの値を指定しています。
次に、updateGame
関数内に次のコードを追加して、プレイヤーを動かしましょう。
player.vy += player.ay; player.y += player.vy;
+=
という演算子は、左項の現在の値に右項の値を加えるという意味になります。
例えばもし player.vy
の現在の値が10で、player.ay
の値が1だった場合、
player.vy += player.ay
を実行するとplayer.vy
の値は11になります。
さてこのコードの意味ですが、まず加速度に従って、速度が増加します。
そして速度に従って、位置が変化するという処理になります。
最後に drawGame
関数内で、オブジェクトの情報を取得してプレイヤーを描画しましょう。
image(airplaneDownImage, 100, player.y, 50, 50);
コードの変更は以上になります。
無事にコードを書けたでしょうか?
よくわからなくなってしまった方は、このページ下部にコード全文を載せていますので、確認してみてください。
それではゲームを起動してみましょう。
プレイヤーが重力に従って落ちるようになったと思います!
次のレッスンでは、マウスがクリックされるとプレイヤーが逆向きに動くようにしていきます。