js翻牌小游戏

好的，我可以为你提供一个简单的js翻牌小游戏的代码示例，你可以参考以下代码：

HTML代码：

<div class="game">
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
  <div class="card">
    <div class="front"></div>
    <div class="back"></div>
  </div>
</div>

CSS代码：

.game {
  display: flex;
  flex-wrap: wrap;
  width: 400px;
  height: 400px;
}

.card {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 10px;
  perspective: 1000px;
}

.front, .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.front {
  background-color: #f2f2f2;
}

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

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

JavaScript代码：

var cards = document.querySelectorAll('.card');
var flipped = false;
var firstCard, secondCard;

function flipCard() {
  this.classList.add('flipped');

  if (!flipped) {
    flipped = true;
    firstCard = this;
  } else {
    flipped = false;
    secondCard = this;
    checkMatch();
  }
}

function checkMatch() {
  if (firstCard.dataset.framework === secondCard.dataset.framework) {
    disableCards();
  } else {
    unflipCards();
  }
}

function disableCards() {
  firstCard.removeEventListener('click', flipCard);
  secondCard.removeEventListener('click', flipCard);
}

function unflipCards() {
  setTimeout(() => {
    firstCard.classList.remove('flipped');
    secondCard.classList.remove('flipped');
  }, 1000);
}

(function shuffle() {
  cards.forEach(card => {
    var randomPos = Math.floor(Math.random() * 16);
    card.style.order = randomPos;
  });
})();

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

这个翻牌小游戏的实现方式是通过JavaScript代码来控制翻转卡牌、检查匹配和卡牌洗牌等操作。你可以根据需求进行修改和优化。