Не могу открыть одновременно две карточки в игре "Пары"

Question

На данный момент в коде открывается одна карточка, которая сразу закрывается, если пара не совпала. А нужно так - открыл по клику одну карточку, потом открыл по клику вторую, далее обе закрываются, если пары не совпадали, или обе остались если пара совпала.

let input = document.querySelector('.input');
let button = document.querySelector('.button');
let wrapperCards = document.querySelector('.wrapper-cards');
let time = document.querySelector('.time');

let buttonGame = document.createElement("button");
let modalEnd = document.createElement("div");
let timeInterval

let arrCardOpen = [];

// создаем масив
let result = 4
let newArr = new Array();


button.onclick = function() {

  let value = +input.value;

  // очищаем .wrapper-cards
  if (document.querySelector(".card")) {
    wrapperCards.innerHTML = ''
  }

  button.disabled = true;

  // проверяем введеное число
  if (value % 2 == 0 && value <= 10 && value >= 4) {
    result = value;
  } else {
    result = 4;
    input.value = 4
    alert('Введите четное число от 4 до 10')
  }
  // задаем ширину .wrapper-cards
  wrapperCards.style.width = (160 * result) + 'px';
  // создаем новый масив
  for (let i = 0; i < result * result; i++) {
    newArr[i] = Math.trunc(i / 2) + 1
  }
  // перемешиваем масив
  function shuffle(array) {
    array.sort(() => Math.random() - 0.5);
  }
  shuffle(newArr);

  // создаем div .card
  function getListContent() {
    let fragment = new DocumentFragment();
    for (let i = 0; i < result * result; i++) {
      let card = document.createElement("div");
      card.classList.add('card');
      card.dataset.number = newArr[i];
      fragment.append(card);
    }
    return fragment;
  }
  wrapperCards.append(getListContent()); // (*)


  // находим .card
  let cardInDom = document.querySelectorAll(".card");

  // вызываем функцию по клику на .card и показываем цифру
  let temp;
  for (let card of cardInDom) {
    card.onclick = () => {
      if (card.classList.contains("open")) return;
      let cardValue = card.dataset.number;
      card.innerHTML = cardValue;
      if (temp && temp != card) {
        if (temp.dataset.number == cardValue) {
          temp.classList.add("open");
          card.classList.add("open");
          temp = null;
          if (document.querySelectorAll(".card.open").length === result * result) {
            andGame();
            clearInterval(interval);
          }
        } else {
          temp.innerHTML = "";
          temp = card;
        }
      } else temp = card;
    };
  };

  let interval = setInterval(function() {
    timeInterval = parseFloat(time.textContent)
    if (timeInterval <= 0) {
      clearInterval(interval);
      andGame();
    } else {
      time.textContent = timeInterval - 1
    };
  }, 1000);
};

// закнчиваем игру

const andGame = function() {

  modalEnd.classList.add('modal-end');
  document.body.append(modalEnd);
  buttonGame.classList.add('button-game');
  modalEnd.append(buttonGame);
  buttonGame.append(document.createTextNode("Начать заново"));
}

// начинаеем игру  

buttonGame.onclick = function() {
  modalEnd.remove();
  buttonGame.innerHTML = ''
  time.textContent = 60
  timeInterval = parseFloat(time.textContent)
  button.onclick()
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="style.css"> -->
  <title>Document</title>
  <style>
    .wrapper-cards {
      display: flex;
      flex-wrap: wrap;
      margin-top: 40px;
    }
    
    .card {
      width: 120px;
      height: 120px;
      margin-right: 35px;
      margin-bottom: 35px;
      border: 2px solid black;
      text-align: center;
      font-size: 128px;
      cursor: pointer;
    }
    
    .card:hover {
      box-shadow: 0 0 5px #2f2d2d;
    }
    
    .modal-end {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 100;
    }
    
    .button-game {
      background-color: sandybrown;
      padding: 20px;
      border-radius: 30px;
      cursor: pointer;
    }
    
    .button-game:hover {
      background-color: rgb(173, 133, 98);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <input class="input" value="4" type="number" min="4" max="10">
    <button class="button">Начать игру</button>

  </div>
  <h2 class="">Время игры <span class="time">60</span> сек</h2>
  <div class="wrapper-cards">
    <!-- <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div> -->
  </div>
  <script src="main.js"></script>
</body>

</html>

Answer 1

Во-первых, вы очищали только одну карточку, во-вторых, не обнуляли temp. Соответственно следующая проверка проходила некорректно.

temp.innerHTML = "";
temp = card;

Очищаем обе карточки, обнуляем темп, добавляем таймаут, и можно еще блокировать нажатие на карточку на время таймаута

     document.querySelector('.wrapper-cards').classList.add('disabled');
     setTimeout(()=>{
            card.innerHTML = "";
            temp.innerHTML = "";
            temp = null;
            document.querySelector('.wrapper-cards').classList.remove('disabled');},
            500); 
     }

добавим в css

.wrapper-cards.disabled * {
      pointer-events: none;
    }

let input = document.querySelector('.input');
let button = document.querySelector('.button');
let wrapperCards = document.querySelector('.wrapper-cards');
let time = document.querySelector('.time');

let buttonGame = document.createElement("button");
let modalEnd = document.createElement("div");
let timeInterval

let arrCardOpen = [];

// создаем масив
let result = 4
let newArr = new Array();


button.onclick = function() {

  let value = +input.value;

  // очищаем .wrapper-cards
  if (document.querySelector(".card")) {
    wrapperCards.innerHTML = ''
  }

  button.disabled = true;

  // проверяем введеное число
  if (value % 2 == 0 && value <= 10 && value >= 4) {
    result = value;
  } else {
    result = 4;
    input.value = 4
    alert('Введите четное число от 4 до 10')
  }
  // задаем ширину .wrapper-cards
  wrapperCards.style.width = (160 * result) + 'px';
  // создаем новый масив
  for (let i = 0; i < result * result; i++) {
    newArr[i] = Math.trunc(i / 2) + 1
  }
  // перемешиваем масив
  function shuffle(array) {
    array.sort(() => Math.random() - 0.5);
  }
  shuffle(newArr);

  // создаем div .card
  function getListContent() {
    let fragment = new DocumentFragment();
    for (let i = 0; i < result * result; i++) {
      let card = document.createElement("div");
      card.classList.add('card');
      card.dataset.number = newArr[i];
      fragment.append(card);
    }
    return fragment;
  }
  wrapperCards.append(getListContent()); // (*)


  // находим .card
  let cardInDom = document.querySelectorAll(".card");

  // вызываем функцию по клику на .card и показываем цифру
  let temp;
  for (let card of cardInDom) {
    card.onclick = () => {
      if (card.classList.contains("open")) return;
      let cardValue = card.dataset.number;
      card.innerHTML = cardValue;
      if (temp && temp != card) {
        if (temp.dataset.number == cardValue) {
          temp.classList.add("open");
          card.classList.add("open");
          temp = null;
          if (document.querySelectorAll(".card.open").length === result * result) {
            andGame();
            clearInterval(interval);
          }
        } else { 
            document.querySelector('.wrapper-cards').classList.add('disabled');
          setTimeout(()=>{
          card.innerHTML = "";
          temp.innerHTML = "";
          temp = null;
          document.querySelector('.wrapper-cards').classList.remove('disabled');},
          500); 
          
        }
      } else temp = card;
    };
  };

  let interval = setInterval(function() {
    timeInterval = parseFloat(time.textContent)
    if (timeInterval <= 0) {
      clearInterval(interval);
      andGame();
    } else {
      time.textContent = timeInterval - 1
    };
  }, 1000);
};

// закнчиваем игру

const andGame = function() {

  modalEnd.classList.add('modal-end');
  document.body.append(modalEnd);
  buttonGame.classList.add('button-game');
  modalEnd.append(buttonGame);
  buttonGame.append(document.createTextNode("Начать заново"));
}

// начинаеем игру  

buttonGame.onclick = function() {
  modalEnd.remove();
  buttonGame.innerHTML = ''
  time.textContent = 60
  timeInterval = parseFloat(time.textContent)
  button.onclick()
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- <link rel="stylesheet" href="style.css"> -->
  <title>Document</title>
  <style>
    .wrapper-cards {
      display: flex;
      flex-wrap: wrap;
      margin-top: 40px;
    }
    
    .wrapper-cards.disabled * {
      pointer-events: none;
    }
    
    .card {
      width: 120px;
      height: 120px;
      margin-right: 35px;
      margin-bottom: 35px;
      border: 2px solid black;
      text-align: center;
      font-size: 128px;
      cursor: pointer;
    }
    
    .card:hover {
      box-shadow: 0 0 5px #2f2d2d;
    }
    
    .modal-end {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.9);
      z-index: 100;
    }
    
    .button-game {
      background-color: sandybrown;
      padding: 20px;
      border-radius: 30px;
      cursor: pointer;
    }
    
    .button-game:hover {
      background-color: rgb(173, 133, 98);
    }
  </style>
</head>

<body>
  <div class="wrapper">
    <input class="input" value="4" type="number" min="4" max="10">
    <button class="button">Начать игру</button>

  </div>
  <h2 class="">Время игры <span class="time">60</span> сек</h2>
  <div class="wrapper-cards">
    <!-- <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div>
            <div class="card"></div> -->
  </div>
  <script src="main.js"></script>
</body>

</html>

БЛОГ НА HUSL

Не могу открыть одновременно две карточки в игре "Пары"

Ответы (1 шт):