Day 28
主題：UI細節 — 美化按鈕、字體、過場效果

今日目標
今天專注於遊戲介面的最後潤飾，讓玩家操作時感覺更舒適與專業。

主要目標：

1. 按鈕美化 — 將開始、重新開始、靜音按鈕設計得更美觀、統一風格。
2. 字體與文字樣式 — 分數、翻牌次數與提示文字調整為更易讀、風格一致的字體。
3. 過場效果 — 遊戲開始、配對成功、遊戲結束時加入動畫或過渡效果，提高沉浸感。

學習與操作重點

1. 按鈕樣式
   使用 CSS border-radius、box-shadow、hover 效果增加按鈕觸感：

   button {
     padding: 10px 20px;
     border: none;
     border-radius: 8px;
     background: #ffb703;
     color: white;
     font-size: 16px;
     cursor: pointer;
     transition: all 0.3s ease;
   }
   button:hover {
     background: #fb8500;
     transform: scale(1.05);
   }
   

2. 字體與文字排版
   調整分數與翻牌次數文字大小與顏色，增強可讀性：

   #scoreboard p {
     font-size: 18px;
     font-weight: bold;
     margin: 5px 0;
   }
   

3. 過場與動畫效果
   遊戲開始時淡入遊戲版面：

   .game-board {
     opacity: 0;
     transition: opacity 0.5s ease-in;
   }
   .game-board.show {
     opacity: 1;
   }
   

   startBtn.addEventListener("click", () => {
     gameState = "playing";
     startTimer();
     board.classList.add("show"); // 遊戲版面淡入
     restartBtn.disabled = false;
   });
   

   • 配對成功或遊戲結束時可加入縮放或閃爍效果，增加視覺反饋。

程式範例

// 開始遊戲淡入效果
startBtn.addEventListener("click", () => {
  if (gameState !== "ready") return;
  gameState = "playing";
  startTimer();
  board.classList.add("show"); // CSS 過場效果
  restartBtn.disabled = false;
});

// 配對成功縮放動畫
function animateMatch(card) {
  card.classList.add("match-animation");
  setTimeout(() => card.classList.remove("match-animation"), 500);
}

/* 配對成功動畫 */
@keyframes matchEffect {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}
.match-animation {
  animation: matchEffect 0.5s ease-in-out;
}

今日成果
✅ 所有按鈕風格統一、美觀且有互動感。
✅ 遊戲文字字體清晰、整體風格一致。
✅ 過場與配對動畫增強玩家體驗，遊戲看起來更專業、流暢。