スタート画面を作る(p5.js)

今までゲームスタート画面を作り忘れていたのでここで作り方を教えます。

let gameState = "start"; // ゲームの状態を保持する変数

function draw() {
  background(220);

  if (gameState === "start") {
    showStartScreen(); // スタート画面を表示
  } else if (gameState === "play") {
    showandmove();

    if (areAllEnemiesDefeated(Enemy)) {
      background(0);
      text("GAME CLEAR!", 330, 200);
      noLoop();
    }

    if (!player.isAlive) {
      background(0);
      text("GAME OVER!", 330, 200);
      noLoop();
    }

    time_limit();
    fill(0);
    textSize(24);
    text("Score: " + score, 10, 30);
  }
}

function showStartScreen() {
  textSize(32);
  textAlign(CENTER, CENTER);
  fill(0);
  text("Press ENTER to Start", width / 2, height / 2);
}

function keyPressed() {
  if (gameState === "start" && keyCode === ENTER) {
    gameState = "play"; // ENTERキーでゲームを開始
    startTime = millis(); // 開始時の時間をリセット
  } else if (gameState === "play") {
    switch (keyCode) {
      case LEFT_ARROW:
        player.move(-gridSize, 0);
        break;
      case RIGHT_ARROW:
        player.move(gridSize, 0);
        break;
      case UP_ARROW:
        player.move(0, -gridSize);
        break;
      case DOWN_ARROW:
        player.move(0, gridSize);
        break;
    }

    if (key === ' ') {
      let bullet = new Bullet(player.x + 20, player.y);
      bullets.push(bullet);
    }
  }
}

let gameStateでゲームの状態を管理しているただそれだけのコードです。