四角形を複数表示することで、コースを作っていきましょう。

同じものを複数作りたいときに使えるのが、 配列と繰り返し処理 です。
配列と繰り返し処理について詳しく学びたい方は、以下の入門コースを確認してください。

繰り返し処理とは - 入門コース
配列とは - 入門コース

また、四角形はX座標とY座標を持つため、これらをまとめて オブジェクト として定義します。
オブジェクトについて詳しく学びたい方は、以下の入門コースを確認してください。

オブジェクトとは - 入門コース

それではまずは四角形の座標を持つオブジェクトの配列を定義しましょう。
エディタの一番最初の行に、次のコードを追加してください。

let roads = [];

これで配列が定義できました。

次に、配列 roads に四角形の座標を持つオブジェクトを複数追加する関数 createRoads を定義します。

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

繰り返し処理を使って、配列に21個の四角形の座標を持つオブジェクトを追加しています。
今回、四角形の高さは20とします。
ゲーム画面の縦サイズが400なので、画面を埋め尽くすためには400÷20=20個の四角形が必要です。
さらに、これらの四角形を動かすためにもう1つ追加して、21個としています。
21個になる理由は次回以降のレッスンで理解できると思います。

X座標はいったん200で固定としています。
Y座標を y: 20 * i とすることで、ゲーム画面の縦方向に四角形が並ぶようにしています。

この createRoads 関数を、setup 関数内で呼び出しましょう。
setup 関数はゲーム起動時に1度だけ実行されるので、今回のように、「コースを生成する」といった最初に1度だけ実行したい関数はsetup 関数内で呼び出します。

function setup() {
  createCanvas(400, 400);
  rectMode(CENTER);
  createRoads();
}

createRoads 関数が実行されることで、配列 roads は次のようなオブジェクトの配列になります。

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

さて、この段階でゲームを起動しても、まだ画面上にコースは生成されません。
最後に四角形を描画することで、コースを生成しましょう。

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

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

繰り返し処理をすることで、配列 roads に入っている各オブジェクトのX座標とY座標を取得して、四角形を描画しています。

コードの変更はこれで以上です。
無事にコードを書くことができたでしょうか？
よくわからなくなってしまった方は、このページの下部にコード全文を載せていますので、確認してみてください。

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

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

次のレッスンからは、いよいよゲームを動かしていきましょう。