簡易卡牌遊戲示例與教學

簡易卡牌配對遊戲

遊戲教學

1. 本遊戲有多組卡牌，各有一個相同的文字（可改成圖案）。

2. 按一下卡牌即可翻開，若兩張卡牌相同即配對成功，否則恢復原狀。

3. 成功配對的卡牌會消失，直到所有卡牌都配對完成。

4. 按下「重新開始」按鈕可重置整個遊戲，並再次洗牌。

想挑戰更高難度嗎？可以自行修改卡牌內容或增加卡牌數量，提升遊戲難度哦！

程式開發教學

步驟 1：基本結構（HTML）
我們使用標準的 HTML 來建立網頁結構，包括 head 與 body。在 head 中，我們載入 jQuery 函式庫，並可加入自己的 <style> 區塊撰寫客製化樣式。
在 body 中，我們建立 <div class="game-board"></div> 做為遊戲卡牌的容器，以及 <button> 供用戶重新開始遊戲。

步驟 2：樣式設計（CSS）
利用 CSS 設定卡牌、遊戲版面及文字樣式，例如 .card 的大小、邊框與翻轉時的背景顏色變化等。為了增添互動感，我們也使用了 transition，在翻牌或滑鼠指向時可呈現平滑的轉換效果。

步驟 3：加入 jQuery（JavaScript）
透過 script src 載入 jQuery CDN，然後在 $(document).ready() 中初始化遊戲邏輯。例如：

• 使用 shuffleArray 進行洗牌。
• 迭代生成卡牌並加入 .card 元素。
• 在點擊時觸發 flipCard 函式，判斷是否配對成功。
• 在失敗時將卡片恢復，成功時將卡片標記為 hidden。

每張卡片都透過 data("value") 綁定一個內部值。用此方法來辨別是否配對，相當直覺且易於維護。

步驟 4：邏輯與狀態控管
遊戲核心為 flipCard 和 checkMatch 兩個函式。

• flipCard：當玩家翻開卡牌時，判斷是否為第一張牌或第二張牌。
• checkMatch：若兩張卡牌的 value 相同，則配對成功；反之則恢復原狀。

透過旗標 canFlip 來避免重複翻開卡牌，以及 matchedPairs 來統計已成功配對的組合數量。

步驟 5：重置遊戲與洗牌
重新開始按鈕點擊後，再次呼叫 initGame：

• 重新洗牌 cardValues。
• 清空 .game-board 並重新生成卡牌。
• 重置遊戲變數，如 firstCard、secondCard、matchedPairs 等。

這樣就能快速恢復遊戲初始狀態，準備再次挑戰！

小結
透過上述步驟，我們完成了簡易卡牌遊戲的核心流程：翻牌、比對、分數統計及重置。若要進一步延伸，可考慮：

• 增加卡牌數量或種類，提升難度。
• 替換卡牌文字為圖像或圖示。
• 新增計時器、排行榜等功能。
• 把整個流程改為多人對戰模式。

jQuery 在這裡主要協助我們快速對 DOM 進行操作，並簡化事件綁定。希望你能透過此範例熟悉前端遊戲開發流程，並在此基礎上發揮創意，創造更豐富的遊戲體驗！