利用JavaScript写一个简单的卡片匹配游戏

在JavaScript中创建一个简单的卡片匹配游戏，通常涉及到HTML结构、CSS样式以及JavaScript交互。以下是一个基础的步骤示例：

**1. HTML结构**
首先，我们需要创建两个div元素，每个包含多个card容器，用来显示一对对的隐藏卡片。

<div id="cards">
  <div class="card-container" style="display: none;">
    <!-- 卡片内容 -->
  </div>
  <!-- ...重复上面的结构... -->
</div>

**2. CSS样式**
设置一些基本的卡片样式，包括位置、大小、颜色等。

.card {
  width: 100px;
  height: 150px;
  border: 1px solid #ccc;
  cursor: pointer;
}

.matched {
  background-color: lightgreen;
}

**3. JavaScript交互**
利用JavaScript获取卡片元素，并添加点击事件监听器。当两张相同的卡片被点击时，它们会被标记为已匹配并显示匹配状态。

const cards = document.querySelectorAll('.card');
let pairs = [];
// 初始化所有卡片的索引
cards.forEach((card, index) => {
  card.id = `card-${index}`;
  pairs.push({ id: card.id, flipped: false });
});

function flipCard(card) {
  card.classList.toggle('flipped');
  const pairIndex = parseInt(card.id.slice(-1));
  if (pairs[pairIndex].flipped === true && pairs[(pairIndex + 1) % pairs.length].flipped === true) {
    // 检查是否形成匹配对
    pairs[pairIndex].matched = true;
    pairs[(pairIndex + 1) % pairs.length].matched = true;
    if (pairs.every(pair => pair.matched)) {
      alert('恭喜，你全部匹配成功！');
    }
  } else {
    pairs[pairIndex].flipped = !pairs[pairIndex].flipped;
  }
}

cards.forEach(card => card.addEventListener('click', flipCard));