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

コース全体が下に移動していくので、上から新しい四角形をどんどん追加していく必要があります。
これをどのように実現したらいいでしょうか？

まず思いつくのは、四角形の配列にどんどん新しい四角形を追加していくという方法です。
しかし、これは実際には良い方法ではありません。
ゲームを起動している間、常に配列の要素が増えていくことになるため、だんだんゲームの動きが遅くなっていってしまいます。

そこでどうするかというと、ゲーム画面の下に消えていった四角形を再利用します。

次のようなイメージになります。

画面の下に消えていった四角形を、画面の上に持ってくることで、再利用します。

それではこれを実現するコードを書いてみましょう。

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

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

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

if (roads[i].y >= 410) {
  roads[i].y = -10;
}

このコードは条件分岐のif文を利用しています。
条件分岐について詳しく知りたい方は、以下の入門コースの解説をご覧ください。

条件分岐とは - 入門コース

四角形のY座標が410に到達したら、Y座標を-10に書き換えています。

ゲーム画面の縦サイズが400で、四角形の高さが20なので、
四角形のY座標が410に到達したときに、四角形は画面下に消えます。
そうなったときに、Y座標を-10にすることで、画面上に持ってきています。

ゲームを起動してみましょう。
コースが途切れなく続いていれば成功です！

ただこれだと、ずっと真っ直ぐのコースが続いていくだけなので、ゲームとしては面白くないですね。
次のレッスンでは、コースを変化させていきます。