多主题记忆游戏

动画记忆游戏

玩家 1

玩家 2

${icon}

`; if (icon === '⭐') { card.addEventListener('click', function () { if (lockBoard || this.classList.contains('flipped')) return; this.classList.add('flipped'); setTimeout(() => { this.classList.add('matched'); // 奖励：找到星星的玩家得分？ // 或者直接移除它。就当它是免费奖励吧。 scores[currentPlayer]++; updateUI(); // 如果这是剩下的唯一一张牌，游戏可能结束？ // 但通常它只是一张“找到了”的牌。 // 我们不会增加 matchedPairs，因为它不是一对。 // 但我们需要检查游戏是否结束。 checkGameOver(); }, 600); }); } else { card.addEventListener('click', flipCard); } grid.appendChild(card); }); } function flipCard() { if (lockBoard) return; if (this.classList.contains('flipped')) return; if (this.classList.contains('matched')) return; this.classList.add('flipped'); flippedCards.push(this); if (flippedCards.length === 2) { checkMatch(); } } function checkMatch() { lockBoard = true; const [card1, card2] = flippedCards; const isMatch = card1.dataset.icon === card2.dataset.icon; if (isMatch) { handleMatch(card1, card2); } else { unflipCards(card1, card2); } } function handleMatch(card1, card2) { scores[currentPlayer]++; matchedPairs++; updateUI(); card1.classList.add('matched'); card2.classList.add('matched'); flippedCards = []; lockBoard = false; checkGameOver(); } function checkGameOver() { const totalNeeded = totalPairs; const matchedCards = document.querySelectorAll('.card.matched').length; const totalCards = gridSize * gridSize; if (matchedCards === totalCards) { showWinner(); } } function unflipCards(card1, card2) { setTimeout(() => { card1.classList.remove('flipped'); card2.classList.remove('flipped'); switchPlayer(); flippedCards = []; lockBoard = false; }, 800); } function switchPlayer() { currentPlayer = currentPlayer === 0 ? 1 : 0; p1Area.classList.toggle('active-player'); p2Area.classList.toggle('active-player'); } function updateUI() { p1ScoreDisplay.innerText = scores[0]; p2ScoreDisplay.innerText = scores[1]; } function showWinner() { let msg = ""; if (scores[0] > scores[1]) { msg = "玩家 1 获胜！ 🏆"; } else if (scores[1] > scores[0]) { msg = "玩家 2 获胜！ 🏆"; } else { msg = "平局！ 🤝"; } winnerText.innerText = msg; modal.classList.remove('hidden'); } function resetGame() { scores = [0, 0]; currentPlayer = 0; matchedPairs = 0; flippedCards = []; lockBoard = false; p1Area.classList.add('active-player'); p2Area.classList.remove('active-player'); modal.classList.add('hidden'); updateUI(); createBoard(); } // 游戏启动时等待通过默认显示的模态框选择主题

动画记忆游戏

游戏设置

🎉

玩家 1 获胜！