基于HTML+CSS+JS实现纸牌记忆游戏

基于HTML+CSS+JS实现纸牌记忆游戏攻略

1. 游戏规则

本纸牌记忆游戏将一副扑克牌（去掉大小王）随机排列，然后翻开第一张牌，玩家需要记住翻开的牌的花色和数字，然后依次翻开其余牌的牌面，若与之前翻开的牌相同则不算成对，若与之前翻开的牌不同则不成对。当所有牌都被翻开后，游戏结束。

2. 实现步骤

2.1 编写HTML

首先需要创建一张牌的HTML结构模板，包含一个div用来存放花色和数字，以及另一个div用来翻转牌面。由于需要将每张牌与其他牌区分开，为每张牌都添加一个唯一的id。

示例代码：

<div class="card" id="card1">
  <div class="front">
    <div class="suit">♥</div>
    <div class="number">A</div>
  </div>
  <div class="back"></div>
</div>

2.2 CSS样式

接下来需要使用CSS样式来对牌进行布局和美化，包括对牌的位置、大小、背景、字体以及动画效果的设置。这里以示例代码的样式为例:

.card {
  width: 120px;
  height: 170px;
  margin: 5px;
  position: relative;
}
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.front {
  background-color: white;
  transform: rotateY(180deg);
}
.back {
  background-color: dodgerblue;
}
.suit, .number {
  font-size: 50px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

2.3 JS脚本

最后使用JS脚本对牌进行翻转和匹配操作。具体实现步骤如下：

2.3.1 翻牌

使用事件监听器对牌进行点击事件的监听，当牌被点击时，将其翻转，并获取该牌的唯一id值。示例代码如下：

function flipCard() {
  this.classList.toggle('flip');
  var cardId = this.getAttribute('id');
  // 更多操作...
}

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

2.3.2 匹配

使用数组tempCards来存储玩家所翻开的牌，当玩家完成一次翻牌操作后，利用JS逻辑判断是否匹配，并将tempCards清空即可。示例代码如下：

// 玩家所翻开的牌
var tempCards = [];

function matchCards(card) {
  tempCards.push(card);
  var len = tempCards.length;
  if(len === 2) {
    // 获取所翻开的牌的id属性
    var cardId1 = tempCards[0].getAttribute('id');
    var cardId2 = tempCards[1].getAttribute('id');

    // 判断两张牌的花色和数字是否相同
    if(cardId1 === cardId2) {
      alert("You found a match!");
    } else {
      // 未匹配则重新翻牌
      setTimeout(() => {
        tempCards.forEach(card => card.classList.remove('flip'));
        tempCards = [];
      }, 1000);
    }
  }
}

3. 示例说明

示例1：创建一张纸牌并使其翻转

<div class="card" id="card1">
  <div class="front">
    <div class="suit">♠️</div>
    <div class="number">5</div>
  </div>
  <div class="back"></div>
</div>

.card {
  width: 120px;
  height: 170px;
  margin: 5px;
  position: relative;
}
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.front {
  background-color: white;
  transform: rotateY(180deg);
}
.back {
  background-color: dodgerblue;
}
.suit, .number {
  font-size: 50px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 翻转动画 */
.flip {
  transform: rotateY(180deg);
}

function flipCard() {
  this.classList.toggle('flip');
}

var card = document.getElementById('card1');
card.addEventListener('click', flipCard);

示例2：实现两张牌的匹配

<div class="card" id="card1">
  <div class="front">
    <div class="suit">♣️</div>
    <div class="number">7</div>
  </div>
  <div class="back"></div>
</div>
<div class="card" id="card2">
  <div class="front">
    <div class="suit">♠️</div>
    <div class="number">7</div>
  </div>
  <div class="back"></div>
</div>

.card {
  width: 120px;
  height: 170px;
  margin: 5px;
  position: relative;
}
.front, .back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
.front {
  background-color: white;
  transform: rotateY(180deg);
}
.back {
  background-color: dodgerblue;
}
.suit, .number {
  font-size: 50px;
  font-weight: bold;
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 翻转动画 */
.flip {
  transform: rotateY(180deg);
}

// 玩家所翻开的牌
var tempCards = [];

function flipCard() {
  this.classList.add('flip');
  tempCards.push(this);
  var len = tempCards.length;
  if(len === 2) {
    var cardId1 = tempCards[0].getAttribute('id');
    var cardId2 = tempCards[1].getAttribute('id');
    if(cardId1 === cardId2) {
      alert("You found a match!");
    } else {
      setTimeout(() => {
        tempCards.forEach(card => card.classList.remove('flip'));
        tempCards = [];
      }, 1000);
    }
  }
}

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

4. 结语

通过以上的步骤，就可以实现一个简单的纸牌记忆游戏。当然，这只是一个非常基础的实现方式，还有很多优化需要进行。例如，增加计时器、显示错误次数、判断游戏结束等等。总之，希望这篇攻略能够对有需要的读者有所帮助。