玩记忆力游戏：JS + CSS 趣味实现

记忆纸牌游戏：挑战你的记忆力，享受纸牌的乐趣

纸牌游戏一直是我们生活中不可或缺的消遣方式，它们不仅能打发时间，还能锻炼我们的记忆力和专注力。记忆纸牌游戏 就是一款经典的配对游戏，玩法简单易懂，却能带来无穷的乐趣。下面，我们就来详细了解一下如何用 JavaScript 和 CSS 创建一个记忆纸牌游戏，让你随时随地享受这款益智游戏。

创建游戏画布

首先，我们需要创建一个游戏画布。使用 HTML，我们可以创建一个容器来放置卡片，并添加一个按钮来开始游戏：

<div id="game-container"></div>
<button id="start-button">开始游戏</button>

布局卡片

接下来，我们需要使用 CSS 来布局卡片。我们可以设置卡片的尺寸、颜色和背面设计，让它们看起来美观且易于识别：

#game-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.card {
  width: 100px;
  height: 100px;
  background-color: #000;
  backface-visibility: hidden;
}

.card-back {
  background-image: url(card-back.png);
}

实现游戏逻辑

现在，我们来编写 JavaScript 代码来实现游戏逻辑，包括创建卡片数组、洗牌、翻开和匹配卡片，以及检测游戏是否结束。

创建卡片数组

首先，我们需要创建一个包含卡片信息的数组。我们可以将卡片设计为成对出现，这样玩家需要匹配相同图案或符号的卡片：

const cards = [
  '1', '1', '2', '2', '3', '3', '4', '4', '5', '5', '6', '6'
];

洗牌

为了增加游戏的挑战性，我们需要对卡片进行洗牌，使它们随机排列：

function shuffle() {
  for (let i = cards.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [cards[i], cards[j]] = [cards[j], cards[i]];
  }
}

翻开和匹配卡片

玩家点击卡片时，需要将它们翻开以查看其图案。如果翻开的两张卡片图案相同，则表示匹配成功，两张卡片将保持翻开状态。否则，两张卡片将在一段时间后自动翻回背面：

function flipCard(card) {
  card.classList.toggle('flipped');
  flippedCards.push(card);

  if (flippedCards.length === 2) {
    checkMatch();
  }
}

function checkMatch() {
  const card1 = flippedCards[0];
  const card2 = flippedCards[1];

  if (card1.innerHTML === card2.innerHTML) {
    matchedCards.push(card1, card2);
    flippedCards = [];
  } else {
    setTimeout(() => {
      card1.classList.toggle('flipped');
      card2.classList.toggle('flipped');
      flippedCards = [];
    }, 1000);
  }

  if (matchedCards.length === cards.length) {
    alert('游戏结束！');
  }
}

检测游戏是否结束

当玩家成功匹配所有卡片时，游戏即宣告结束。我们可以通过检查已匹配卡片的数量来检测这一点：

if (matchedCards.length === cards.length) {
  alert('游戏结束！');
}

常见问题解答

1. 如何开始游戏？

点击“开始游戏”按钮即可开始游戏。

2. 如何翻开卡片？

点击卡片即可将其翻开。

3. 如何匹配卡片？

如果翻开的两张卡片图案相同，则表示匹配成功，两张卡片将保持翻开状态。

4. 如果卡片不匹配怎么办？

如果翻开的两张卡片图案不同，两张卡片将在一段时间后自动翻回背面。

5. 如何知道游戏是否结束？

当所有卡片都匹配成功时，游戏即宣告结束，系统会弹出提示框通知你。

总结

记忆纸牌游戏是一款经典的配对游戏，不仅能打发时间，还能锻炼我们的记忆力和专注力。通过使用 JavaScript 和 CSS，我们可以轻松创建自己的记忆纸牌游戏，随时随地享受这款益智游戏的乐趣。如果你喜欢这款游戏，别忘了分享给你的朋友，让他们也来体验一下！