1、游戏开始4张卡牌，每次过关后新增两张，总共64张卡，可以修改数组EMOJIS，添加表情，增加卡牌数量
2、新建txt文件，将代码粘贴进去，保存后，将txt修改后缀名为html的格式
<!DOCTYPE html>
<html>
<head><style>:root {--card-size: 80px; /* 缩小卡片尺寸以适应更多卡片 */--gap: 4px; /* 减小间距 */}body {background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);display: flex;flex-direction: column;align-items: center;min-height: 100vh;margin: 0;font-family: 'Arial Rounded MT Bold', Arial, sans-serif;}.game-info {margin: 20px;font-size: 1.5em;color: #2c3e50;}.game-container {display: grid;gap: var(--gap);padding: 20px;background: rgba(255, 255, 255, 0.9);border-radius: 16px;box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);backdrop-filter: blur(10px);}.card {width: var(--card-size);height: var(--card-size);perspective: 1000px;cursor: pointer;position: relative;}.card-inner {position: relative;width: 100%;height: 100%;transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);transform-style: preserve-3d;border-radius: 12px;}.card.flipped .card-inner {transform: rotateY(180deg);}.card-face {position: absolute;width: 100%;height: 100%;backface-visibility: hidden;display: flex;align-items: center;justify-content: center;border-radius: 12px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}.front {background: #ffffff;transform: rotateY(180deg);border: 3px solid #f8f9fa;}.front span {font-size: 2.8em;filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.1));}.back {background: linear-gradient(45deg, #ff6b6b 0%, #ff9f43 20%, #feca57 40%, #2ecc71 60%, #54a0ff 80%, #5f27cd 100%);background-size: 600% 600%;animation: gradientBG 15s ease infinite;}@keyframes gradientBG {0% { background-position: 0% 50%; }50% { background-position: 100% 50%; }100% { background-position: 0% 50%; }}.attempts-bar {width: 300px;height: 12px;background: #e0e0e0;border-radius: 6px;margin: 10px 0;overflow: hidden;}.attempts-progress {height: 100%;background: linear-gradient(90deg, #2ecc71, #3498db);transition: width 0.3s ease;}</style>
</head>
<body><div class="game-info"><div>积分: <span id="score">0</span></div><div>剩余尝试次数: <span id="attempts"></span></div><div class="attempts-bar"><div class="attempts-progress" style="width: 100%"></div></div></div><div class="game-container" id="gameContainer"></div><script>//可以自己新增emojis表情const EMOJIS = ['🎮','🎲','🎯','🎨','🎭','🎪','🎫','🎬','🎤','🎧','🎹','🎷','🎸','🎺','🎻','🥁','📱','📷','🎥','📺','🕹️','👾','♟️','🖼️','🎡','🎢','🎠','🏟️','🎆','🎇','🧨','✨','🎈','🎉','🎊','🎁','🎂','🍰','🧁','🎃','🎄','🎋','🎍','🎎','🎏','🎐','🎑','🧧','🎀','🎁','🪀','🪁','🧿','🪄','🪅','🪆','🧸','🧩','♠️','♥️','♦️','♣️','🃏','🀄','🎴','🎭','🖍️','🖌️','📝','🎐','🎿','🛷','🥌','🎯','🪀','🏓','🥏','🎳','🏏','🏸',''];class MemoryGame {constructor() {this.container = document.getElementById('gameContainer');this.scoreElement = document.getElementById('score');this.attemptsElement = document.getElementById('attempts');this.attemptsProgress = document.querySelector('.attempts-progress');this.cards = [];this.flippedCards = [];this.matchedCount = 0;this.level = 2;this.score = 0;this.maxAttempts = 0;this.remainingAttempts = 0;this.init();}init() {this.createCards();this.updateAttempts();this.renderGrid();this.showCardsTemporarily();}createCards() {const pairs = this.level;const availableEmojis = this.shuffle([...EMOJIS]).slice(0, pairs);this.cards = [];availableEmojis.forEach(emoji => {this.cards.push(emoji, emoji);});this.cards = this.shuffle(this.cards);this.maxAttempts = pairs * 2;this.remainingAttempts = this.maxAttempts;}shuffle(array) {return array.sort(() => Math.random() - 0.5);}renderGrid() {const columns = Math.ceil(Math.sqrt(this.level * 2));this.container.style.gridTemplateColumns = `repeat(${columns}, 1fr)`;this.container.innerHTML = this.cards.map((emoji, index) => `<div class="card" data-value="${emoji}" data-index="${index}"><div class="card-inner"><div class="card-face front"><span>${emoji}</span></div><div class="card-face back"></div></div></div>`).join('');this.addEventListeners();}updateAttempts() {this.attemptsElement.textContent = `${this.remainingAttempts}/${this.maxAttempts}`;const progress = (this.remainingAttempts / this.maxAttempts) * 100;this.attemptsProgress.style.width = `${progress}%`;}showCardsTemporarily() {document.querySelectorAll('.card').forEach(card => {card.classList.add('flipped');});setTimeout(() => {document.querySelectorAll('.card').forEach(card => {card.classList.remove('flipped');});this.enableGame();}, 3000);}addEventListeners() {document.querySelectorAll('.card').forEach(card => {card.addEventListener('click', () => this.handleCardClick(card));});}handleCardClick(card) {if (this.remainingAttempts <= 0) return;if (this.flippedCards.length < 2 && !card.classList.contains('flipped') &&!this.flippedCards.includes(card)) {card.classList.add('flipped');this.flippedCards.push(card);if (this.flippedCards.length === 2) {this.remainingAttempts--;this.updateAttempts();this.checkMatch();}}}checkMatch() {const [card1, card2] = this.flippedCards;const match = card1.dataset.value === card2.dataset.value;if (match) {this.score += 100;this.matchedCount += 2;this.scoreElement.textContent = this.score;if (this.matchedCount === this.cards.length) {this.score += this.remainingAttempts * 50;this.scoreElement.textContent = this.score;this.levelUp();}this.flippedCards = [];} else {setTimeout(() => {card1.classList.remove('flipped');card2.classList.remove('flipped');this.flippedCards = [];if (this.remainingAttempts <= 0) {alert(`游戏结束！最终得分：${this.score}`);this.resetGame();}}, 1000);}}levelUp() {this.level++;this.matchedCount = 0;this.createCards();this.updateAttempts();this.renderGrid();this.showCardsTemporarily();}resetGame() {this.level = 2;this.score = 0;this.scoreElement.textContent = 0;this.init();}enableGame() {document.querySelectorAll('.card').forEach(card => {card.style.pointerEvents = 'auto';});}}// 初始化游戏new MemoryGame();</script>
</body>
</html>
3、打开方式选择浏览器打开，或者打开浏览器直接拖动到里面即可。如果后缀名修改html后，图标显示的是浏览器的图标，直接双击打开即可。
4、游戏效果如下：
