Day 24
主題：動畫微調 — 卡片翻轉流暢度、結束動畫

今日目標
今天專注於遊戲的視覺與互動體驗，讓整個翻牌動作更順暢，並在遊戲結束時增加有趣的動畫效果。

主要目標：

1. 翻牌動畫優化 — 讓卡片翻轉更自然，增強立體感。
2. 遊戲結束動畫 — 所有卡片配對完成時，加入視覺效果或文字動畫。
3. 增強使用者體驗 — 玩家在遊戲過程中感受到更流暢的操作與成就感。

學習與操作重點

1. CSS 翻轉優化
   使用 transition 與 cubic-bezier 讓卡片旋轉更平滑。
   可加入 box-shadow 或微小縮放，增加立體感。

2. 結束動畫
   用 CSS @keyframes 加入閃光、縮放或跳躍效果。
   透過 JS 加上 class 觸發動畫，例如：

   gameBoard.classList.add("win-animation");
   

3. 整合遊戲結束提示
   結束動畫完成後可顯示文字提示，增加成就感。

💻程式範例

/* 翻牌動畫微調 */
.card.flip .card-inner {
  transform: rotateY(180deg);
  transition: transform 0.6s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* 遊戲結束動畫 */
@keyframes winEffect {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

.win {
  animation: winEffect 0.5s ease-in-out 3;
}

function checkGameEnd() {
  if (matchedPairs === symbols.length) {
    stopTimer();
    // 為所有卡片加上勝利動畫
    document.querySelectorAll(".card").forEach(card => card.classList.add("win"));
    alert("🎉 全部配對成功！");
  }
}

今日成果
✅ 翻牌動畫更加流暢自然，操作手感提升。
✅ 遊戲結束時有動態效果，增強視覺享受。
✅ 玩家對遊戲完成時的成就感更明顯。