さていよいよ今回のレッスンからゲームを動かしていきます。

レーシングゲームなので、プレイヤー（車）はどんどん前進していきます。
これをどのように実現したらいいでしょうか？

本講座では、コースを動かすことによってプレイヤーの前進を表現します。

次の動画をご覧ください。

プレイヤーがコース上を前進しているように見えますね？
ですが実際にやっていることは、コースを上から下に動かしているだけです。

それではやってみましょう。

ゲームの動きを実現する際に、キーとなるのは draw 関数です。
draw 関数はゲームの実行中、常に繰り返し実行され続けています。
より具体的には、1秒間に何十回も繰り返し実行され続けています。
そのため、draw 関数内でゲームの動きを表現することができます。

あまりイメージが湧かないかもしれませんね。
実際にコードを書いて実行してみることで、感覚が掴めると思うのでやってみましょう。

draw 関数を次のように変更してください。

function draw() {
  for (let i = 0; i < roads.length; i++) {
    roads[i].y += 1;
  }
  background(0);
  drawRoads();
  drawPlayer();
}

次のコードを追加しました。

for (let i = 0; i < roads.length; i++) {
  roads[i].y += 1;
}

すべての四角形のY座標を+1しています。
このコードが実行されると何が起こるでしょうか。
コース全体が、下に1だけ移動します。

そして、これをdraw 関数内に書くことで、
1秒間に何十回も、コース全体が下に1だけ移動し続けます。

それではゲームを起動してみましょう。

このようにコース全体が動けば成功です！

コースが途中で途切れてしまっていますね。
次のレッスンでは、コースが途切れなく続くようにしていきます。