現時点では、プレイヤーを動かしてコースから外れても、特に何も起きません。
そこで、プレイヤーがコースから外れたら、ゲームオーバーになるようにしましょう。

コースアウトの判定には、繰り返しと条件分岐を利用します。

もう少し詳しく説明すると、
プレイヤーが全ての四角形の外側にあるとコースアウトで、ゲームオーバーになります。
逆に言うと、
プレイヤーが少なくとも1つの四角形の内部にあるとコースインで、ゲーム続行です。
この判定を、繰り返しと条件分岐を利用して実現します。

それでは、 updateGame 関数の部分を次のように変更してください。

function updateGame() {
  if (gameState === "start") {
    return;
  }
  updateRoads();
  detectGameover();
  score++;
}

function detectGameover() {
  let gameover = true;
  for (let i = 0; i < roads.length; i++) {
    let distanceX = abs(mouseX - roads[i].x);
    let distanceY = abs(mouseY - roads[i].y);
    if (distanceX <= 75 && distanceY <= 10) {
      gameover = false;
    }
  }
  if (gameover) {
    gameState = "gameover";
  }
}

新しい関数 detectGameover を定義し、updateGame 関数から呼び出しています。
detectGameover 関数を詳しく見ていきましょう。

まずはじめに gameover という変数を用意しています。
初期値を true にしています。

let gameover = true;

次に、繰り返しと条件分岐を利用して、プレイヤーが少なくとも1つの四角形の内部にあるかどうかを判定しています。

for (let i = 0; i < roads.length; i++) {
  let distanceX = abs(mouseX - roads[i].x);
  let distanceY = abs(mouseY - roads[i].y);
  if (distanceX <= 75 && distanceY <= 10) {
    gameover = false;
  }
}

コードを解説します。

let distanceX = abs(mouseX - roads[i].x);

ここは、プレイヤーと四角形のX方向の距離を計算しています。
abs 関数は、数値の絶対値を返す関数になります。

let distanceY = abs(mouseY - roads[i].y);

ここは、プレイヤーと四角形のY方向の距離を計算しています。

if (distanceX <= 75 && distanceY <= 10) {
  gameover = false;
}

この部分で、プレイヤーが四角形の内部にあるかどうかを判定しています。
四角形の横幅は150、高さは20なので、
X方向の距離が75以内、Y方向の距離が10以内であれば、内部にあると言えます。
内部にあれば、変数 gameover を false に設定して、ゲームオーバーにならないようにしています。

if (gameover) {
  gameState = "gameover";
}

最後に、変数 gameover が true のままであったなら、
ゲームの状態を保持する変数 gameState を "gameover" に変更しています。

これでコースアウトが判定できましたが、まだこの段階ではコースアウトしても何も起きません。
次のレッスンで、ゲームオーバー画面を作っていきましょう。