js 翻牌两两消除

您好，我可以为您提供一种简单的实现方法。首先，我们需要准备一些牌的图片，并将它们放在网页上。然后，我们可以使用 JavaScript 来添加交互和动画效果。

以下是实现的基本思路：

1. 创建一个数组来存储所有牌的状态和位置信息。
2. 监听用户点击事件，当用户点击一张牌时，将其状态设为已翻开，并显示对应的图片。
3. 当用户点击另一张牌时，比较这两张牌的图片是否相同。如果相同，则将其状态设为已消除，并移除对应的 DOM 元素。如果不相同，则将所有已翻开的牌状态设为未翻开，并隐藏对应的图片。
4. 在每次操作后，检查是否还有未消除的牌。如果没有，则游戏结束。

下面是一个简单的示例代码，供参考：

HTML:

<div class="card" data-id="1"><img src="card1.png"></div>
<div class="card" data-id="2"><img src="card2.png"></div>
<div class="card" data-id="3"><img src="card3.png"></div>
<!-- 更多牌的代码... -->

CSS:

.card {
  width: 100px;
  height: 100px;
  background-color: #eee;
  border: 1px solid #ccc;
  display: inline-block;
  margin: 10px;
  cursor: pointer;
  text-align: center;
  line-height: 100px;
}

.card img {
  max-width: 100%;
  max-height: 100%;
}

JavaScript:

var cards = [
  { id: 1, flipped: false, matched: false },
  { id: 2, flipped: false, matched: false },
  { id: 3, flipped: false, matched: false },
  // 更多牌的信息...
];

var flippedCards = [];

function flipCard(card) {
  if (!card.flipped && flippedCards.length < 2) {
    card.flipped = true;
    card.element.classList.add('flipped');
    flippedCards.push(card);
  }
}

function checkForMatch() {
  if (flippedCards.length === 2) {
    if (flippedCards[0].id === flippedCards[1].id) {
      flippedCards.forEach(function(card) {
        card.matched = true;
        card.element.classList.add('matched');
      });
    } else {
      flippedCards.forEach(function(card) {
        card.flipped = false;
        card.element.classList.remove('flipped');
      });
    }
    flippedCards = [];
  }
}

function checkForEndGame() {
  if (cards.every(function(card) { return card.matched; })) {
    alert('游戏结束！');
  }
}

cards.forEach(function(card) {
  card.element = document.querySelector('[data-id="' + card.id + '"]');
  card.element.addEventListener('click', function() {
    flipCard(card);
    checkForMatch();
    checkForEndGame();
  });
});

在这个示例中，我们将每张牌的状态存储在一个对象中，并使用一个数组来存储所有牌的信息。当用户点击一张牌时，我们会将其状态设为已翻开，并将其添加到一个已翻开的牌的数组中。如果已翻开的牌的数量达到了两张，则比较这两张牌的图片是否相同。如果相同，将其状态设为已消除，并移除对应的 DOM 元素。如果不相同，将所有已翻开的牌状态设为未翻开，并隐藏对应的图片。在每次操作后，我们会检查是否还有未消除的牌。如果没有，则游戏结束。

当然，这只是一个简单的示例，您可以根据自己的需求进行修改和扩展，例如添加计时器、计分系统等等。希望能帮到您！