Table of Contents
Игра "Найди пару" помогает развить способность к запоминанию, внимательность и сообразительность.
Игра доступна онлайн: https://vladamamutova.github.io/find-the-pair/.
Игра состоит из чётного количества карточек, под которыми находятся пары одинаковых картинок. При запуске игры поле с карточками будет показано на несколько секунд и закрыто снова. Постарайся запомнить как можно больше картинок! Кликай по карточкам, запоминай, что изображено с обратной стороны, и ищи пары. Цель игры заключается в том, чтобы за минимальное время и минимальное количество ошибок найти все одинаковые карточки на игровом поле.
Особенности реализации отдельного функционала представлены ниже:
Для создания счётчика времени запускается функция setInterval, в котором каждую секунду проверяется, не поставлена ли игра на паузу, и изменяются значения минут и секунд, которые с помощью экзампляра Vue автоматически обновляют эти данные на странице браузера.
let sec = 0;
let min = 0;
game.timerHandle = setInterval(function() {
if (game.isStarted) {
sec++;
if (sec > 60){
min++;
sec = 0;
}
game.result.min = (min < 10) ? "0" + min : min;
game.result.sec = (sec < 10) ? "0" + sec : sec;
}
}, 1000);
Клик по карточке обрабатывается, если игра не стоит на паузе. В этом случае карточка открывается и добавляется в массив открытых карт. Когда число открытых карточек достигает двух, проверяем картинки на совпадение.
if (!game.isStarted) return;
if (e.target.parentElement.classList.contains("card") &&
e.target.parentElement.classList.contains("close") &&
game.openCards.length < 2){
const card = e.target.parentElement;
card.classList.toggle("close");
game.openCards.push(card);
}
if (game.openCards.length == 2){
checkForMatches();
}
Карточки сравниваются по содержимому внутри этих элементов. При успешном сравнении увеличивается число совпадений, при неуспешном - карточки закрываются.
if (game.openCards[0].innerHTML != game.openCards[1].innerHTML){
game.openCards[0].classList.toggle("close");
game.openCards[1].classList.toggle("close");
} else {
game.matchesNumber += 2;
}
game.openCards = [];
game.result.moves++;
Когда все пары найдены (количество совпадений равно числу карточек), останавливаем игру, обнуляем счётчик времени, показываем поздравление и достигнутый результат.
if (game.matchesNumber == game.cardCount){
clearInterval(game.timerHandle);
game.isStarted = false;
showEndGameModal();
}