Как я могу хранить и сравнивать два элемента по клику для соответствующей игры?

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;

Если они совпадают, удалите прослушиватель события click:

  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>

Answer 2

поиск в Google, но вы можете использовать localStorage: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Потому что вы можете установить и получить это то, что вы хотите?