当前位置：首页 > news >正文

html+css+js趣味小游戏~记忆卡片配对（附源码）

news 来源：原创 2025/5/21 5:32:41

下面是一个简单的记忆卡片配对游戏的完整代码，使用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));
}