Как сделать меню в игре "пары" на Java Script

Question

Подскажите пожалуйста как в игре в пары сделать так чтобы перед игрой можно было настроить количество карточек на поле (по вертикали и по горизонтали).И чтобы после открытия всех карточек или по истечению таймера например 1 минуты можно было выйти в главное меню и начать заново.

document.addEventListener('DOMContentLoaded', function () {
  const cards = document.querySelectorAll('.card');

  let hasFlippedCard = false;
  let lockBoard = false;
  let firstCard, secondCard;

  // Переворачивание карт
  function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;

    this.classList.add('flip');

    if (!hasFlippedCard) {
      hasFlippedCard = true;
      firstCard = this;

      return;
    }

    secondCard = this;

    checkForMatch();
  }

  // Сравнение карт
  function checkForMatch() {
    let isMatch = firstCard.dataset.card === secondCard.dataset.card;

    isMatch ? disableCards() : unflipCards();
  }

  // Если карты совпали
  function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);

    resetBoard();
  }

  // Если карты не совпали
  function unflipCards() {
    lockBoard = true;

    setTimeout(() => {
      firstCard.classList.remove('flip');
      secondCard.classList.remove('flip');

      resetBoard();
    }, 1500);
  }

  // Сброс карт
  function resetBoard() {
    [hasFlippedCard, lockBoard] = [false, false];
    [firstCard, secondCard] = [null, null];
  }

  // Перемешивание
  (function shuffle() {
    cards.forEach(card => {
      let randomPos = Math.floor(Math.random() * 12);
      card.style.order = randomPos;
    });
  })();

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

});

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

body {
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #ebb914; }

.game {
  width: 640px;
  height: 640px;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-perspective: 1000px;
          perspective: 1000px; }

.card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  -webkit-transform: scale(1);
          transform: scale(1);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform .5s;
  transition: -webkit-transform .5s;
  transition: transform .5s;
  transition: transform .5s, -webkit-transform .5s;
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
          box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); }
  .card:active {
    -webkit-transform: scale(0.97);
            transform: scale(0.97);
    -webkit-transition: -webkit-transform .2s;
    transition: -webkit-transform .2s;
    transition: transform .2s;
    transition: transform .2s, -webkit-transform .2s; }
  .card.flip {
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg); }

.front__face,
.back__face {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: absolute;
  border-radius: 5px;
  background: #cf8a0a;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden; }

.front__face {
  -webkit-transform: rotateY(180deg);
          transform: rotateY(180deg); }

/*# sourceMappingURL=style.css.map */

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

<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">
  <title>Couples</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <section class="game">
    <div class="card" data-card="code">
      <img class="front__face" src="../img/code.svg" alt="code" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>
    <div class="card" data-card="code">
      <img class="front__face" src="../img/code.svg" alt="code" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>

    <div class="card" data-card="icog">
      <img class="front__face" src="../img/icog.svg" alt="icog" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>
    <div class="card" data-card="icog">
      <img class="front__face" src="../img/icog.svg" alt="icog" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>

    <div class="card" data-card="loop">
      <img class="front__face" src="../img/loop.svg" alt="loop" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>
    <div class="card" data-card="loop">
      <img class="front__face" src="../img/loop.svg" alt="loop" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>

    <div class="card" data-card="pacage">
      <img class="front__face" src="../img/pacage.svg" alt="pacage" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>
    <div class="card" data-card="pacage">
      <img class="front__face" src="../img/pacage.svg" alt="pacage" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>

    <div class="card" data-card="registry">
      <img class="front__face" src="../img/registry.svg" alt="registry" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>
    <div class="card" data-card="registry">
      <img class="front__face" src="../img/registry.svg" alt="registry" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>

    <div class="card" data-card="virus">
      <img class="front__face" src="../img/virus.svg" alt="virus" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>
    <div class="card" data-card="virus">
      <img class="front__face" src="../img/virus.svg" alt="virus" />
      <img class="back__face" src="../img/diamond.svg" alt="diamond" />
    </div>
  </section>

  <script defer src="main.js"></script>
</body>

</html>

БЛОГ НА HUSL

Как сделать меню в игре "пары" на Java Script

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