js实现翻牌游戏

翻牌游戏的基本实现思路

翻牌游戏通常涉及一组卡片，玩家需要翻开两张卡片，如果匹配则保留翻开状态，否则翻回背面。以下是使用JavaScript实现翻牌游戏的核心步骤：

创建HTML结构

<div id="game-board" class="game-board"></div>

添加CSS样式

.game-board {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  gap: 10px;
}

.card {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.3s;
}

.card.flipped {
  transform: rotateY(180deg);
  background-color: white;
}

JavaScript核心逻辑

document.addEventListener('DOMContentLoaded', () => {
  const cards = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D'];
  let flippedCards = [];
  let matchedPairs = 0;

  // 洗牌函数
  function shuffleArray(array) {
    return array.sort(() => Math.random() - 0.5);
  }

  // 初始化游戏板
  function initGame() {
    const gameBoard = document.getElementById('game-board');
    gameBoard.innerHTML = '';
    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.addEventListener('click', flipCard);
      gameBoard.appendChild(cardElement);
    });
  }

  // 翻牌函数
  function flipCard() {
    if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
      this.classList.add('flipped');
      this.textContent = this.dataset.value;
      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');
        card1.textContent = '';
        card2.textContent = '';
        flippedCards = [];
      }, 1000);
    }
  }

  initGame();
});

功能扩展建议

1. 计时功能：添加游戏计时器，记录玩家完成游戏所用时间
2. 计步功能：统计玩家翻牌的次数
3. 难度选择：提供不同大小的游戏板（4x4、6x6等）
4. 动画效果：为卡片翻转添加更流畅的动画
5. 音效：为翻牌和匹配成功添加音效反馈

性能优化考虑

1. 使用事件委托代替为每张卡片单独添加事件监听
2. 避免频繁的DOM操作，可以缓存DOM元素
3. 对于大型游戏板，考虑虚拟滚动技术

以上代码提供了翻牌游戏的基本实现框架，可以根据具体需求进一步扩展和完善功能。