Javascript — очень мощный язык программирования, который оживляет веб-сайт, добавляя к нему интерактивность. Почти все веб-сайты используют javascript для улучшения взаимодействия с пользователем, когда они его используют.

Javascript также можно использовать для создания интерактивных игр в самом браузере. Одной из таких игр, которую мы собираемся сделать сегодня, является знаменитая игра на память. В этой игре вам нужно следить за картами и выбирать пару карт с одинаковым изображением. Вы можете найти демо-версию игры ниже.

Вы можете найти репозиторий этой игры здесь.

Прежде всего, давайте создадим контейнер, куда мы будем добавлять наши карты.

<div class=”gameContainer”></div>

Теперь давайте создадим саму карту. Я собираюсь использовать icons8 для изображений, но вы можете использовать все, что хотите. Мы будем использовать следующие изображения для нашей игры.

Карточка будет иметь атрибут data-image с соответствующим названием изображения.

<div class=”memoryCard” data-image=”github”><img src=”https://img.icons8.com/fluent/144/000000/github.png" class=”front” alt=”github” /><img src=”https://img.icons8.com/cotton/128/000000/code.png" class=”back” alt=”myLogo” /></div>

Это пример одной из карт, нам нужно сделать две карты для каждого из 8 изображений, таким образом, всего у нас будет 16 карт. Вы можете расположить их в любом порядке, так как мы будем использовать javascript для изменения порядка.

Установите display как flex в gameContainer и обязательно добавьте к нему flex-wrap. Установите для перспективы высокое значение, чтобы перелистывание карты было плавным.

.gameContainer {
  width: 600px;
  height: 600px;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  perspective: 1000px;
}

Установите положение карты памяти как относительное и добавьте к ней переход.

.memoryCard {
 width: 23%;
 height: 23%;
 margin: 5px;
 position: relative; 
 transform-style: preserve-3d;
 transition: transform 0.3s;
 cursor: pointer;
}

Теперь установите положение лицевой и оборотной сторон карты на абсолютное и поверните карту на 180 градусов, чтобы лицевая сторона была скрыта.

.front,
.back {
 background-color: #ffffff;
 width: 100%;
 height: 100%;
 padding: 10px;
 border-radius: 10px;
 position: absolute;
 backface-visibility: hidden;
}.front {
 transform: rotateY(180deg);
}

Мы закончили настраивать карты для нашей игры, но они будут работать, пока мы не добавим функциональность с помощью javascript, так что давайте приступим к делу.

Во-первых, давайте получим все наши карты, используя метод querySelector.

const cards = document.querySelectorAll(".memoryCard");

Нам нужно следить за многими вещами во время игры, такими как первая выбранная карта, вторая выбранная карта, перевернутая карта или нет, и совпадает ли карта или нет. Итак, давайте объявим переменные для него.

let isFlipped = false;let firstCard, secondCard;let lock = false;

Теперь нам нужно переворачивать карты всякий раз, когда игрок нажимает на карту, поэтому давайте создадим функцию переворота и добавим прослушиватель событий, чтобы функция переворачивания вызывалась всякий раз, когда игрок нажимает на нашу карту.

cards.forEach((card) => card.addEventListener(“click”, flip));function flip() {this.classList.add(“flip”);}

Это будет переворачивать нашу карту всякий раз, когда мы нажимаем на нее. Теперь нам нужно сохранить первую карту, на которую нажал пользователь, и нам также нужно знать, была ли уже выбрана карта, чтобы мы могли сохранить вторую карту.

function flip() {this.classList.add(“flip”);if (!isFlipped) {isFlipped = true;firstCard = this;return;}secondCard = this;}

Теперь, когда у нас есть наши карты, нам нужно проверить, являются ли они одной и той же картой, что мы можем проверить, используя атрибут data-image, который мы использовали в карте.

function flip() {this.classList.add(“flip”);if (!isFlipped) {isFlipped = true;firstCard = this;return;}secondCard = this;let isMatch = firstCard.dataset.image === secondCard.dataset.image;}

Если карты совпадают, мы можем удалить прослушиватели событий на карте, так как они нам больше не нужны. Если они не совпадают, нам нужно дать игроку увидеть карту в течение нескольких секунд, прежде чем перевернуть ее обратно. Кроме того, независимо от того, совпадают карты или нет, нам нужно сбросить первую и вторую карты. Мы можем разделить эту логику на три функции.

function flip() {this.classList.add(“flip”);if (!isFlipped) {isFlipped = true;firstCard = this;return;}secondCard = this;let isMatch = firstCard.dataset.image === secondCard.dataset.image;if(isMatch)success();elsefail();}function succes() {firstCard.removeEventListener(“click”, flip);secondCard.removeEventListener(“click”, flip);reset();}function fail() {setTimeout(() => {firstCard.classList.remove(“flip”);secondCard.classList.remove(“flip”);reset();}, 1000);}function reset() {isFlipped = false;firstCard = null;secondCard = null;}

Теперь, когда у нас есть логика успеха и неудачи, нам также нужно перетасовывать карты каждый раз, когда загружается страница.

(function shuffle() {cards.forEach((card) => {var position = Math.floor(Math.random() * 16);card.style.order = position;});})();

Вот и все! Мы закончили нашу игру. Развлекайся !!

Если вам понравилась эта статья, поставьте лайк и поделитесь :)