Day 25
主題：手機操作優化 — 測試觸控手勢與響應速度

今日目標
重點是讓遊戲在手機和平板上操作流暢，確保玩家在觸控螢幕上翻牌時不會出現延遲或誤操作。

主要目標：

1. 觸控手勢支援 — 點擊、輕觸事件都能正常翻牌。
2. 回應速度優化 — 避免觸控延遲或連續觸發問題。
3. 適配不同螢幕尺寸 — 確保卡片大小、間距與版面在手機上舒適易操作。

學習與操作重點

1. 觸控事件
   使用 touchstart 搭配 click 事件，讓手機操作順暢：

   card.addEventListener("click", flipCard);
   card.addEventListener("touchstart", flipCard);
   

2. 避免多點觸控問題
   使用 lockBoard 鎖定翻牌中狀態，避免快速連點或多手指同時翻牌造成錯誤。

3. RWD 調整
   確認 grid-template-columns、卡片寬度和間距在小螢幕下仍合理：

   @media (max-width: 600px) {
     .game-board {
       grid-template-columns: repeat(2, 80px);
       grid-gap: 8px;
     }
     .card {
       width: 80px;
       height: 120px;
     }
   }
   

4. 優化觸控反饋
   在 CSS 加入 cursor: pointer 和輕微縮放動畫，提升觸控體驗：

   .card:active {
     transform: scale(0.98);
   }
   

💻程式範例

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

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

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

// 支援手機觸控
cards.forEach(card => {
  card.addEventListener("click", flipCard);
  card.addEventListener("touchstart", flipCard, {passive: true});
});

今日成果
✅ 遊戲可以在手機、平板上正常翻牌操作。
✅ 避免了多點觸控或快速連點造成的錯誤。
✅ 版面與卡片尺寸在小螢幕上仍保持美觀與易操作性。