js翻牌小游戏

以下是一个简单的JS翻牌小游戏的代码示例：

HTML代码：

<div id="game">
  <div class="card" onclick="flipCard(this)">
    <div class="front">A</div>
    <div class="back">1</div>
  </div>
  <div class="card" onclick="flipCard(this)">
    <div class="front">B</div>
    <div class="back">2</div>
  </div>
  <div class="card" onclick="flipCard(this)">
    <div class="front">C</div>
    <div class="back">3</div>
  </div>
  <div class="card" onclick="flipCard(this)">
    <div class="front">D</div>
    <div class="back">4</div>
  </div>
</div>

CSS代码：

.card {
  width: 100px;
  height: 100px;
  margin-right: 10px;
  display: inline-block;
  position: relative;
}

.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  font-size: 50px;
  line-height: 100px;
}

.front {
  background-color: #ccc;
  z-index: 2;
}

.back {
  background-color: #333;
  color: #fff;
  transform: rotateY(180deg);
}

.flipped {
  transform: rotateY(180deg);
}

JS代码：

var flippedCards = [];

function flipCard(card) {
  if (flippedCards.length < 2) {
    card.classList.add("flipped");
    flippedCards.push(card);
    if (flippedCards.length == 2) {
      setTimeout(checkMatch, 1000);
    }
  }
}

function checkMatch() {
  if (flippedCards[0].querySelector(".back").textContent == flippedCards[1].querySelector(".back").textContent) {
    flippedCards[0].classList.add("matched");
    flippedCards[1].classList.add("matched");
  } else {
    flippedCards[0].classList.remove("flipped");
    flippedCards[1].classList.remove("flipped");
  }
  flippedCards = [];
}

在这个示例中，我们创建了一个包含4张牌的简单的HTML结构。每张牌都有一个前面和一个后面，我们使用CSS中的transform属性来实现翻牌效果。

在JS代码中，我们使用一个数组来跟踪已经翻过的牌。当玩家点击一张牌时，我们将其添加到数组中并检查是否已经翻过了两张牌。如果是，则调用checkMatch函数来检查这两张牌是否匹配。如果匹配，则将它们标记为已匹配，否则将它们翻回去。最后，我们将数组重置为一个空数组，以便可以翻下一组牌。

这只是一个简单的示例，您可以根据需要进行修改和扩展。