javascript - 如何在点击匹配游戏时存储和比较两个元素？

Question

在这里，我正在尝试构建一个内存游戏。在这个游戏中，我想为卡片匹配建立逻辑。逻辑就像我想将第一次点击和第二次点击存储在两个变量中，然后检查用户何时点击第一张卡片以及是否 它将与第二张卡片匹配，然后用户将无法再次单击这些卡片并且它不会翻转。如果不匹配，用户可以再次单击这些卡片。试了一个小时还是解决不了。我应该怎么办？有人帮忙吗？

// Declaring variable  

 const cardClass = ["fa-diamond", "fa-paper-plane-o", "fa-anchor", "fa-bolt"];
 const firstClick, secondClick;
 const card = document.querySelectorAll('.deck li ');

//for loop

 for(let i=0;i<card.length;i++){
     card[i].addEventListener('click', flipOver);
 }



 // flipOver function

 function flipOver(e){

    let element = e.currentTarget;
   e.target.classList.toggle("open");

}

// Card Matching logic

for(let i=0; i<cardClass.length; i++){

    if(e.target.classList.contains(cardClass[i])){
        this.click = firstClick;
    }

}

.deck .card {
    height: 125px;
    width: 125px;
    background: #2e3d49;
    font-size: 0;
    color: #ffffff;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
    transform: rotateY(180deg);
    /* transform: rotateX(180deg); */
    background: #02b3e4;
    cursor: pointer;
    transition-timing-function: linear;
    transition: .2s;
    font-size: 33px;
}

<ul class="deck">
    <li class="card">
        <i class="fa fa-diamond"></i>
    </li>
    <li class="card ">
        <i class="fa fa-paper-plane-o"></i>
    </li>
    <li class="card ">
        <i class="fa fa-diamond"></i>
    </li>
    <li class="card">
        <i class="fa fa-bolt"></i>
    </li>
</u>

Answer 1

首先，您需要一个计数器来记录打开的卡片数量 -> 如果是两张卡片，则需要比较它们。 为了知道点击了哪张卡片，我们分别在 firstclick 和 secondClick 中存储了一个引用。 例如

let element = e.currentTarget;
firstClick = element;

为了比较两张卡片是否属于同一类型，我们使用它的 className ("fa-diamond", "fa-paper-plane-o"...) 我们可以通过调用获得:

var card1Type = firstClick.getElementsByTagName("i")[0].className;
var card2Type = secondClick.getElementsByTagName("i")[0].className;

如果匹配，移除它的点击事件监听器:

  firstClick.removeEventListener("click", flipOver);
  secondClick.removeEventListener("click", flipOver);

如果没有，我们需要重新将它们翻过来。

整个例子:

// Declaring variable  

const cardClass = ["fa-diamond", "fa-paper-plane-o", "fa-anchor", "fa-bolt"];
var firstClick, secondClick;
var counter = 1;
var wrong = false;
const card = document.querySelectorAll('.deck li ');

//for loop

for (let i = 0; i < card.length; i++) {
  card[i].addEventListener('click', flipOver);
}


function proceed() {
  firstClick.classList.toggle("open");
  secondClick.classList.toggle("open");
  wrong = false;
}

function flipOver(e) {
  if (!wrong) {
    let element = e.currentTarget;
    e.target.classList.toggle("open");
    if (counter == 1) {
      firstClick = element;
      counter = 2;
    } else if (counter == 2) {
      secondClick = element;
      var card1Type = firstClick.getElementsByTagName("i")[0].className;
      var card2Type = secondClick.getElementsByTagName("i")[0].className;
      if (card1Type == card2Type) {
        firstClick.removeEventListener("click", flipOver);
        secondClick.removeEventListener("click", flipOver);
      } else {
        wrong = true;
        setTimeout(proceed, 1000);
      }
      counter = 1;
    }
  }
}

.deck .card {
  height: 125px;
  width: 125px;
  background: #2e3d49;
  font-size: 0;
  color: #ffffff;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 5px 2px 20px 0 rgba(46, 61, 73, 0.5);
}

.deck .card.open {
  transform: rotateY(180deg);
  background: #02b3e4;
  cursor: pointer;
  transition-timing-function: linear;
  transition: 0.2s;
  font-size: 33px;
}

<ul class="deck">
  <li class="card">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card ">
    <i class="fa fa-paper-plane-o"></i>
  </li>
  <li class="card ">
    <i class="fa fa-diamond"></i>
  </li>
  <li class="card">
    <i class="fa fa-bolt"></i>
  </li>
</ul>