下面是一個簡單的記憶卡片配對游戲的完整代碼，使用HTML、CSS和JavaScript實現：
html
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>記憶卡片配對游戲</title><link rel="stylesheet" href="css/css.css">
</head>
<body><h1>記憶卡片配對游戲</h1><div class="game-info">匹配數: <span id="matches">0</span>/8 | 嘗試次數: <span id="attempts">0</span></div><div class="game-board" id="gameBoard"></div><button class="restart-btn" id="restartBtn">重新開始</button><script src="js/js.js"></script>
</body>
</html>css
body {font-family: 'Arial', sans-serif;display: flex;flex-direction: column;align-items: center;background-color: #f5f5f5;padding: 20px;
}h1 {color: #333;margin-bottom: 10px;
}.game-info {margin-bottom: 20px;font-size: 18px;
}.game-board {display: grid;grid-template-columns: repeat(4, 1fr);gap: 15px;max-width:1200px;margin: 0 auto;
}
JavaScript
// 初始化游戲
function initGame() {// 重置游戲狀態gameBoard.innerHTML = '';flippedCards = [];matchedPairs = 0;attempts = 0;matchesDisplay.textContent = '0';attemptsDisplay.textContent = '0';canFlip = true;// 卡片符號 - 使用emojiconst symbols = ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'];// 創建卡片對const cardSymbols = [...symbols, ...symbols];// 洗牌shuffleArray(cardSymbols);// 創建卡片元素cards = cardSymbols.map((symbol, index) => {const card = document.createElement('div');card.className = 'card';card.dataset.index = index;card.dataset.symbol = symbol;const front = document.createElement('div');front.className = 'front';front.textContent = symbol;const back = document.createElement('div');back.className = 'back';back.textContent = '?';card.appendChild(front);card.appendChild(back);card.addEventListener('click', () => flipCard(card));return card;});// 添加到游戲板cards.forEach(card => gameBoard.appendChild(card));
}效果圖及其視頻?
?
游戲說明
- 游戲目標：找出所有配對的卡片。
- 游戲規則：
- 點擊卡片翻轉它
- 每次只能翻轉兩張卡片
- 如果兩張卡片匹配，它們會保持翻轉狀態
- 如果不匹配，卡片會翻回去
- 記錄你的嘗試次數
如何擴展
- 增加難度級別（不同大小的網格）
- 添加計時功能
- 增加更多卡片符號或使用圖片
- 添加音效（翻轉、匹配成功等）
- 添加動畫效果
- 實現高分記錄系統
這個游戲適合所有年齡段的人玩，可以鍛煉記憶力和反應能力。代碼結構清晰，適合初學者學習JavaScript事件處理和DOM操作。
