Игра «Найди пару» – это популярная и простая веб-игра, которая помогает развивать внимание и память. Она состоит из поля с рядом перевёрнутых карт, каждая из которых имеет пару. Задача игрока – находить парные карты за наименьшее количество попыток. В этой статье мы подробно рассмотрим процесс создания такой игры с использованием HTML, CSS и JavaScript.

Основы игры

Игра базируется на несложных принципах, но требует внимания к деталям в реализации. Она включает в себя генерацию игрового поля, размещение на нём карт с изображениями, обработку кликов по картам и логику нахождения пар.

ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросети DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
  • Где и как применять? Потестируем модель после установки на разных задачах
  • Как дообучить модель под себя?
Участвовать бесплатно

Технологический стек

  • HTML: структура игры.
  • CSS: стилизация элементов игры.
  • JavaScript (JS): логика игры, взаимодействие с пользователем.

Разработка игры

Перейдем к пошаговому созданию всей внешней и внутренней логики игры.

Шаг 1. создание структуры страницы

Создаем базовый HTML-документ, включая DOCTYPE, head и body. В head добавляем ссылку на CSS-файл, а также подключаем JS-файл перед закрывающим тегом body.

<!DOCTYPE html>

<html lang="ru">

<head>

<meta charset="UTF-8">

<title>Найди Пару</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div id="game"></div>

<script src="script.js"></script>

</body>

</html>

Шаг 2. Стилизация

В файле style.css задаем основные стили: фон страницы, стили для игрового поля и карт.

body {

font-family: Arial, sans-serif;

background: #f0f0f0;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

margin: 0;

}

#game {

width: 600px;

display: grid;

grid-template-columns: repeat(4, 1fr);

gap: 10px;

}

.card {

background: #009688;

height: 150px;

display: flex;

justify-content: center;

align-items: center;

color: #fff;

font-size: 24px;

cursor: pointer;

}

Шаг 3. Логика игры на JavaScript

В script.js начинаем с создания массива карт и функции для их перемешивания. Каждая карта представлена объектом со свойствами id и image, где image — путь к изображению.

let cards = [

{ id: 1, image: 'image1.png' },

{ id: 1, image: 'image1.png' },

// Добавить все карты по аналогии

];

cards = shuffle(cards);

function shuffle(array) {

array.sort(() => Math.random() - 0.5);

}

Затем добавляем функцию для отображения карт на странице и обработчики клика, чтобы реализовать логику сравнения выбранных карт.

function renderCards(cards) {

const gameContainer = document.getElementById('game');

cards.forEach(card => {

const cardElement = document.createElement('div');

cardElement.classList.add('card');

// Добавление обработчика клика

cardElement.addEventListener('click', () => handleCardClick(card));

gameContainer.appendChild(cardElement);

});

}

function handleCardClick(card) {

console.log(card);

// Реализация логики выбора карты и проверки на совпадение

}

renderCards(cards);

Шаг 4. Обработка выбора карты и поиска пары

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

let hasFlippedCard = false;

let lockBoard = false;

let firstCard, secondCard;

function flipCard(card) {

if (lockBoard) return;

if (card === firstCard) return;

card.classList.add('flip');

if (!hasFlippedCard) {

hasFlippedCard = true;

firstCard = card;

return;

}

secondCard = card;

checkForMatch();

}

function checkForMatch() {

let isMatch = firstCard.dataset.id === secondCard.dataset.id;

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();

}, 1000);

}

function resetBoard() {

[hasFlippedCard, lockBoard] = [false, false];

[firstCard, secondCard] = [null, null];

}

Шаг 5. Добавление изображений на карты

Вам нужно добавить изображения на карты. Можете использовать любые изображения в формате PNG или JPEG. Не забудьте добавить атрибут data-id к каждой карте для проверки совпадения.

<div class="card" data-id="1"><img src="image1.png" alt="Image 1"></div>

<div class="card" data-id="1"><img src="image1.png" alt="Image 1"></div>

<!-- Добавьте остальные карты с изображениями и уникальными data-id -->

Шаг 6. Завершение логики игры

Дополним логику игры функцией для проверки завершения игры и обработчиком для перезапуска игры после завершения.

function checkWin() {

if (document.querySelectorAll('.card.flip').length === cards.length) {

setTimeout(() => {

alert('Поздравляем! Вы нашли все пары!');

resetGame();

}, 500);

}

}

function resetGame() {

document.getElementById('game').innerHTML = '';

cards = shuffle(cards);

renderCards(cards);

}

Заключение

Разработка игры «Найди пару» на HTML, CSS и JavaScript — это увлекательный и образовательный процесс. Она не только позволяет попрактиковаться в освоении основных веб-технологий, но и дает возможность создать увлекательное приложение для тренировки памяти и внимания. Используйте этот проект как основу для экспериментов и улучшения — добавьте новые функции, улучшите дизайн или оптимизируйте производительность. Все это поможет вам стать лучшим веб-разработчиком и создать еще более захватывающие проекты в будущем.

Большой практикум
ЗАМЕНИ ВСЕ НЕЙРОСЕТИ НА ОДНУ — PERPLEXITY
ПОКАЖЕМ НА КОНКРЕТНЫХ КЕЙСАХ
  • Освой нейросеть Perplexity и узнай, как пользоваться функционалом остальных ИИ в одном
  • УЧАСТВОВАТЬ ЗА 0 РУБ.
  • Расскажем, как получить подписку
Участвовать бесплатно
ОНЛАЙН-ПРАКТИКУМ
ЗАПУСК нейросети DEEPSEEK R1 ЛОКАЛЬНО НА СВОЕМ КОМПЬЮТЕРЕ
ЧТО БУДЕТ НА ОБУЧЕНИИ?
  • ПОКАЖЕМ, КАК РАЗВЕРНУТЬ МОДЕЛЬ нейросеть DEEPSEEK R1 ПРЯМО НА СВОЁМ КОМПЬЮТЕРЕ
Участвовать бесплатно