js实现翻牌游戏
实现翻牌游戏的基本思路
翻牌游戏通常涉及一组卡片，玩家点击卡片后翻转显示内容，匹配相同卡片得分。使用JavaScript实现需要处理卡片布局、点击事件、匹配逻辑和计时功能。
HTML结构设计
创建卡片容器和卡片元素，使用CSS控制样式和翻转效果。HTML结构示例如下：
<div id="game-board" class="game-board"></div>CSS样式设置
通过CSS实现卡片的翻转动画效果。关键点包括卡片尺寸、背面和正面的样式以及过渡效果：
.card {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
transition: transform 0.5s;
}
.card.flipped {
transform: rotateY(180deg);
}
.card-face {
position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;
}
.card-front {
background-color: #f0f0f0;
}
.card-back {
background-color: #333;
transform: rotateY(180deg);
}JavaScript逻辑实现
初始化游戏板，创建卡片数组并随机排列。为每张卡片添加点击事件监听器：
const cards = ['A', 'B', 'C', 'D', 'E', 'F', 'A', 'B', 'C', 'D', 'E', 'F'];
let flippedCards = [];
let matchedPairs = 0;
function initGame() {
const gameBoard = document.getElementById('game-board');
const shuffledCards = shuffleArray([...cards]);
shuffledCards.forEach((card, index) => {
const cardElement = document.createElement('div');
cardElement.classList.add('card');
cardElement.dataset.value = card;
cardElement.dataset.index = index;
cardElement.innerHTML = `
<div class="card-face card-front"></div>
<div class="card-face card-back">${card}</div>
`;
cardElement.addEventListener('click', flipCard);
gameBoard.appendChild(cardElement);
});
}
function shuffleArray(array) {
return array.sort(() => Math.random() - 0.5);
}卡片翻转逻辑
处理卡片点击事件，控制同时翻转的卡片数量并检查匹配：
function flipCard() {
if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
this.classList.add('flipped');
flippedCards.push(this);
if (flippedCards.length === 2) {
checkForMatch();
}
}
}
function checkForMatch() {
const [card1, card2] = flippedCards;
if (card1.dataset.value === card2.dataset.value) {
matchedPairs++;
flippedCards = [];
if (matchedPairs === cards.length / 2) {
setTimeout(() => alert('恭喜你赢了！'), 500);
}
} else {
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
flippedCards = [];
}, 1000);
}
}游戏初始化
在页面加载时调用初始化函数开始游戏：
document.addEventListener('DOMContentLoaded', initGame);扩展功能建议
增加计时器和计分系统提升游戏体验。使用setInterval实现计时功能，并在游戏结束时显示分数：
let time = 0;
let timerInterval;
function startTimer() {
timerInterval = setInterval(() => {
time++;
document.getElementById('timer').textContent = time;
}, 1000);
}
function stopTimer() {
clearInterval(timerInterval);
}初始化时调用startTimer()，游戏结束时调用stopTimer()。
