次のレッスンが少し難易度が高いので、ここで補足レッスンをはさみます。
本レッスンは飛ばして次に進んでも問題はありません。
次のレッスンに取り組んでみて、よくわからないと思ったら本レッスンを読んでみてください。

次にやりたいことは、四角形を複数作ってコースを作ることでした。

単純に考えれば、前回のレッスンでこうなっていたコードを

function drawRoads() {
  fill(255);
  rect(200, 200, 150, 20);
}

こうすれば実現はできます。

function drawRoads() {
  fill(255);
  rect(200, 0, 150, 20);
  rect(200, 20, 150, 20);
  rect(200, 40, 150, 20);
  ...（中略）...
  rect(200, 380, 150, 20);
  rect(200, 400, 150, 20);
}

単純に、四角形を描画するコードをたくさん書いてみました。
しかし、これはプログラミングの考え方としてはあまり良くありません。
プログラミングでは、同じような処理を行う場合にコードをコピペして何度も書くことは良くないとされています。
このような場合は、 繰り返し処理 で記述しましょう。
（繰り返し処理について詳しく知りたい方は、こちらの解説をご覧ください→ 繰り返し処理とは - 入門コース ）

繰り返し処理で記述すると、次のようになります。

function drawRoads() {
  fill(255);
  for(let i = 0; i < 21: i++) {
    rect(200, 20 * i, 150, 20);
  }
}

コードがだいぶスッキリしましたね。

ゲームを起動してみてください。四角形が複数描画されて、コースができていると思います。

四角形を複数描画するだけであれば、これでOKです。
しかし、今後のレッスンでは、これらの四角形を動かしていきたいと考えています。
このコードでは四角形の座標は固定されてしまっているため、動かすことができません。
そこで、四角形の座標を変数で保持することにします。

今、四角形は21個あります。
これらの座標を保持するために、変数を21個分用意するのはあまり良くありません。
このような場合は、配列を活用します。
（配列について詳しく知りたい方は、こちらの解説をご覧ください→ 配列とは - 入門コース ）

ではまず次のように配列を宣言してみましょう。

let roadsX = [];
let roadsY = [];

これで、配列 roadsX に21個の四角形のX座標を、配列 roadsY に21個の四角形のY座標を格納することができるようになりました。

これでも良いのですが、もう一歩踏み込んで考えてみます。
四角形のX座標とY座標とは関連のあるデータです。
これらを保持するのにそれぞれ別々の配列を用意するよりは、1つにまとめたほうが良さそうです。

そこで、オブジェクトの配列として定義しようと思います。
（オブジェクトについて詳しく知りたい方は、こちらの解説をご覧ください→ オブジェクトとは - 入門コース ）

オブジェクトとしては次のように定義しようと思います。

{
  x: X座標の値,
  y: Y座標の値,
}

配列の定義は次のようにします。ここに要素としてオブジェクトを追加していきます。

let roads = [];

配列 roads に要素としてオブジェクトを追加する関数 createRoads を定義します。

function createRoads() {
  roads = [];
  for (let i = 0; i < 21; i++) {
    roads.push({
      x: 200,
      y: 20 * i,
    });
  }
}

createRoads 関数は setup 内で呼び出します。
createRoads 関数が実行されることで、配列 roads は次のような状態になります。

roads = [
  {x: 200, y: 0},
  {x: 200, y: 20},
  {x: 200, y: 40},
  ...（中略）...
  {x: 200, y: 400},
]

これで準備は整いました。
最後に drawRoads 関数を次のように変更することで、配列 roads に入っている要素のオブジェクトを1つ1つ取得して、四角形を描画できます。

function drawRoads() {
  fill(255);
  for (let i = 0; i < roads.length; i++) {
    rect(roads[i].x, roads[i].y, 150, 20);
  }
}

よくわからなくなってしまった方は、このページの下部にコード全文を載せていますので、確認してみてください。

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

このような画面になっていれば、成功です！

次のレッスンでは、上記の内容をより簡潔に説明しています。