Javascript — очень мощный язык программирования, который оживляет веб-сайт, добавляя к нему интерактивность. Почти все веб-сайты используют javascript для улучшения взаимодействия с пользователем, когда они его используют.
Javascript также можно использовать для создания интерактивных игр в самом браузере. Одной из таких игр, которую мы собираемся сделать сегодня, является знаменитая игра на память. В этой игре вам нужно следить за картами и выбирать пару карт с одинаковым изображением. Вы можете найти демо-версию игры ниже.
Вы можете найти репозиторий этой игры здесь.
Прежде всего, давайте создадим контейнер, куда мы будем добавлять наши карты.
<div class=”gameContainer”></div>
Теперь давайте создадим саму карту. Я собираюсь использовать icons8 для изображений, но вы можете использовать все, что хотите. Мы будем использовать следующие изображения для нашей игры.
- GitHub (https://img.icons8.com/fluent/144/000000/github.png)
- HTML5 (https://img.icons8.com/dusk/128/000000/html-5.png)
- CSS3 (https://img.icons8.com/dusk/128/000000/css3.png)
- JS (https://img.icons8.com/dusk/128/000000/javascript-logo.png)
- Реагировать (https://img.icons8.com/ultraviolet/120/000000/react.png)
- MongoDB (https://img.icons8.com/color/144/000000/mongodb.png)
- Vue (https://img.icons8.com/color/144/000000/vue-js.png)
- Бабель (https://img.icons8.com/dusk/128/000000/babel.png)
Карточка будет иметь атрибут 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;});})();
Вот и все! Мы закончили нашу игру. Развлекайся !!
Если вам понравилась эта статья, поставьте лайк и поделитесь :)