当前位置：首页 > JavaScript

js实现翻牌游戏

2026-03-16 07:57:43JavaScript

实现翻牌游戏的基本思路

翻牌游戏通常涉及一组卡片，玩家点击卡片后翻转显示内容，匹配相同卡片得分。使用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实现计时功能，并在游戏结束时显示分数：

js实现翻牌游戏

let time = 0;
let timerInterval;

function startTimer() {
  timerInterval = setInterval(() => {
    time++;
    document.getElementById('timer').textContent = time;
  }, 1000);
}

function stopTimer() {
  clearInterval(timerInterval);
}

初始化时调用startTimer()，游戏结束时调用stopTimer()。