Day 30
主題：最終收尾與部署 — 完整遊戲完成與發布準備

今日目標
今天是30 天鐵人賽的最後一天，重點是把整個遊戲做最後整理、收尾和部署，確保成品完整、穩定，並可以讓他人遊玩。

主要目標：

1. 最終功能檢查 — 確認翻牌、配對、計分、計時、動畫、音效等功能完整且正常運作。
2. 程式碼整理 — 清理無用程式碼、命名統一、增加註解，方便日後維護。
3. UI 最終微調 — 調整卡片、按鈕、字體、顏色與過場效果，使遊戲視覺一致且舒適。
4. 部署準備 — 將遊戲上傳至 GitHub Pages 或其他平台，並測試線上運行。

學習與操作重點

1. 全局檢查
   從遊戲開始到結束，完整操作至少三次，確認計時器、分數、翻牌動畫、音效及過場效果均正常。

2. 程式碼整理與註解
   移除測試用的 console.log。
   統一函式命名與變數命名，使程式易讀。
   在重要流程加入註解，例如翻牌、配對檢查、遊戲結束判斷。

3. UI 最終微調
   調整卡片間距與大小，確保手機、平板與桌機操作舒適。
   優化按鈕樣式與文字對比，提高可讀性與操作便利性。
   確保過場動畫順暢，遊戲體驗完整。

4. 部署測試
   將 HTML、CSS、JS、音效檔案整理到專案資料夾。
   上傳至 GitHub Pages 或本地測試伺服器。
   確認所有檔案連結正確、音效正常播放、RWD 在各裝置顯示良好。

程式碼整理示範

// 初始化遊戲
function initGame() {
  flippedCards = [];
  matchedPairs = 0;
  flipCount = 0;
  gameState = "ready";
  board.innerHTML = "";
  createCards();
  updateScoreboard();
}

// 開始遊戲
startBtn.addEventListener("click", () => {
  if (gameState !== "ready") return;
  gameState = "playing";
  startTimer();
  board.classList.add("show");
});

/* 最終 UI 微調 */
.card {
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

button {
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
button:hover {
  transform: scale(1.05);
}

今日成果
✅ 遊戲完整功能確認，無重大 bug。
✅ UI 與動畫微調完成，操作與視覺體驗流暢。
✅ 程式碼整理完成，易讀且維護方便。
✅ 成品已部署並可線上遊玩，完成 30 天鐵人賽挑戰！ 🎉