html+css+js趣味小游戏~记忆卡片配对（附源码）
下面是一个简单的记忆卡片配对游戏的完整代码，使用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操作。