プレイヤーが表示できたので、次はコースを作っていきましょう。

最終目的は、以下の画像のようなコースを作ることです。

このコースは、以下のように複数の四角形を組み合わせることで作っています。

そのために、まずは四角形を1つ表示させましょう。
プレイヤーの表示と同じように、四角形を描画します。

現在こうなっているコードを、

function draw() {
  background(0);
  drawPlayer();
}

function drawPlayer(){
  fill(255, 0, 0);
  rect(mouseX, mouseY, 30, 30);
}

このように変更してください。

function draw() {
  background(0);
  drawRoads();
  drawPlayer();
}

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

function drawPlayer(){
  fill(255, 0, 0);
  rect(mouseX, mouseY, 30, 30);
}

ゲームを起動してみましょう。 画面真ん中に、白い四角形が表示されたと思います。

コードを解説していきます。

まず、新しい関数drawRoads を定義しました。

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

プレイヤーの表示と同じように、四角形を描画しています。
fill(255); は白で塗りつぶすことを意味しています。

次に、 draw 関数内で呼び出すことで、 drawRoads 関数を実行しています。

次のレッスンでは、四角形を複数作って、コースを作っていきます！