Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2020, 16:51
Интересующийся
Отправить личное сообщение для Rudman Посмотреть профиль Найти все сообщения от Rudman
 
Регистрация: 25.03.2020
Сообщений: 17

Игра найди пару на JQuery
Есть игра "Найди пару" (искать одинаковые картинки)
Помогите написать функцию которая определит окончание игры и выведет ("You win!!")
Я так понимаю окончание игры должно быть когда найдены все пары...как можно это реализовать?

JS
var cards = document.querySelectorAll('.card');

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

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

  this.classList.add('flip');

  if (!FlippCard) {
    FlippCard = true;
    firstCard = this;
    return;
  }

  secondCard = this;
  check();
}

//проверка совпадения двух карт 
function check() {
  let isMatch = firstCard.dataset.framework === secondCard.dataset.framework;

  isMatch ? disableCards() : unflip();
}

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

  reset();
}

//обратный переворот карт 
function unflip() {
  lockBoard = true;

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

    reset();
  }, 1250);
}

//обновление карт после выбора
function reset() {
  [FlippCard, lockBoard] = [false, false];
  [firstCard, secondCard] = [null, null];
}

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

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


HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Memory</title>
  <link rel="stylesheet" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
  <h5>Game: "Memory"</h5>
  <button class="button">Start</button>
  <section class="contGame">

    <div class="card" data-framework="1">
      <img class="front" src="img/1.png" alt="1" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

    <div class="card" data-framework="1">
      <img class="front" src="img/1.png" alt="1" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

    <div class="card" data-framework="2">
      <img class="front" src="img/2.png" alt="2" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

     <div class="card" data-framework="2">
      <img class="front" src="img/2.png" alt="2" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

    <div class="card" data-framework="3">
      <img class="front" src="img/3.png" alt="3" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

     <div class="card" data-framework="3">
      <img class="front" src="img/3.png" alt="3" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

    <div class="card" data-framework="4">
      <img class="front" src="img/4.png" alt="4" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

    <div class="card" data-framework="4">
      <img class="front" src="img/4.png" alt="4" />

      <img class="back" src="img/background.jpg" alt="background" />
    </div>

  </section>

  <script src="js/script.js"></script>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2020, 17:24
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 28,802

Rudman,
https://javascript.ru/forum/events/7...tml#post508261

https://javascript.ru/forum/project/...tml#post475885
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 07:01
jquery is not defined - странный случай tarya jQuery 2 16.07.2012 13:27
JQuery и Opera 12 demoni2004 jQuery 13 21.06.2012 13:32
2 разных модуля на jQuery - как подключить? finder jQuery 4 23.03.2012 20:29
JQuery CSS анализатор javascript jQuery 2 15.08.2010 20:27