Day 23
主題：狀態管理 — 完成開始/結束/重新開始功能

🎯今日目標
今天要讓遊戲擁有完整的流程控制，不再是一打開就能亂點卡片。
核心目標：

1. 開始遊戲 — 點擊「開始」按鈕後，才能翻牌並計時。
2. 遊戲結束 — 所有卡片配對完成或倒數計時結束時，自動停止遊戲。
3. 重新開始 — 能清空數據與畫面，重新挑戰遊戲。
   透過這個狀態管理，遊戲流程更清晰，玩家體驗更好。

學習與操作重點

1. 遊戲狀態變數
   建立 gameState，狀態可為：

   "ready" → 遊戲尚未開始
   "playing" → 遊戲進行中
   "finished" → 遊戲結束

2. 控制操作
   在 "ready" 或 "finished" 狀態下，禁止翻牌。
   「重新開始」按鈕會重置所有數據與 UI。

3. 重置函式
   清空翻牌數、分數、計時器、翻開的卡片。
   重新洗牌並生成卡片。

💻程式範例

<button id="startBtn">開始遊戲</button>
<button id="restartBtn" disabled>重新開始</button>

<script>
  let gameState = "ready";

  const startBtn = document.getElementById("startBtn");
  const restartBtn = document.getElementById("restartBtn");

  startBtn.addEventListener("click", () => {
    if (gameState !== "ready") return;
    gameState = "playing";
    startTimer();
    restartBtn.disabled = false;
  });

  restartBtn.addEventListener("click", () => {
    resetGame();
  });

  function flipCard(card) {
    if (lockBoard || gameState !== "playing" || card.classList.contains("flip")) return;

    card.classList.add("flip");
    flippedCards.push(card);
    flipCount++;
    updateScoreboard();

    if (flippedCards.length === 2) checkMatch();
  }

  function checkGameEnd() {
    if (matchedPairs === symbols.length) {
      gameState = "finished";
      stopTimer();
      alert("🎉 恭喜完成遊戲！");
    }
  }

  function resetGame() {
    location.reload(); // 簡單方式：重新整理頁面
  }
</script>

✨今日成果
✅ 完成遊戲狀態管理，開始/進行中/結束流程明確。
✅ 玩家翻牌時會受到狀態限制，避免亂操作。
✅ 「重新開始」功能可清空數據並重新挑戰，遊戲更完整。