Создание простой игры на JavaScript: "Игра на память" 🃏

Узнайте, как создать простую игру на память с использованием HTML, CSS и JavaScript. Пошаговое руководство с подробными объяснениями кода и практическими примерами.

В этой статье мы разберем, как создать простую игру на память, используя HTML, CSS и JavaScript. Мы шаг за шагом объясним каждый фрагмент кода, чтобы даже те, кто впервые видит программирование, смогли понять и повторить результат. Мы рассмотрим, как создать структуру страницы, стилизовать ее и добавить логику игры, чтобы ваши карты ожили. Давайте начнем! 🚀

Cкачать код игры

1. Что такое игра на память? 🧠

Игра на память (или "Memory Game") — это классическая игра, в которой игрок должен найти пары одинаковых карт, открывая их по очереди. Главная задача — запомнить местоположение каждой карты, чтобы успешно находить пары. Это отличное упражнение для тренировки памяти и концентрации.

2. Структура проекта 📁

Наш проект состоит из трех основных файлов:

  • index.html: структура игры, то, что видит пользователь.

  • style.css: стили, делающие игру красивой и приятной на вид.

  • script.js: логика игры, определяющая поведение карт при взаимодействии с пользователем.

Также у нас есть папка images, содержащая изображения карт, которые будут использоваться в игре.

3. HTML: создаем основу страницы 📝

Начнем с HTML-файла. Он содержит базовую структуру нашей игры, которая представляет собой игровую доску и подключенные файлы стилей и скриптов:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Игра на память</title>
</head>
<body>
    <div class="game-board">
        <!-- Карты будут генерироваться здесь -->
    </div>
    <script src="script.js"></script>
</body>
</html>

Объяснение кода

  • <div class="game-board">: Это контейнер, в котором будут располагаться все карты. Позже мы добавим их динамически с помощью JavaScript. Это основное место для взаимодействия пользователя с игрой.

  • <link rel="stylesheet" href="style.css">: Подключаем файл CSS, чтобы стилизовать нашу игру и сделать ее визуально привлекательной.

  • <script src="script.js">: Подключаем JavaScript, чтобы добавить логику игры и сделать игру интерактивной.

4. CSS: добавляем красоту 🎨

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    margin: 0;
}

.game-board {
    display: grid;
    grid-template-columns: repeat(4, 100px);
    grid-gap: 10px;
}

.card {
    width: 100px;
    height: 150px;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card img {
    max-width: 100%;
    max-height: 100%;
    display: none;
}

.card.flipped img {
    display: block;
}

Объяснение кода

  • body: Центрируем весь контент на экране, чтобы игра выглядела симпатично и находилась по центру. Это создаст приятный пользовательский опыт.

  • .game-board: Используем grid layout для организации карт в виде сетки. Это помогает сделать расположение карт аккуратным и равномерным.

  • .card: Стили для карт. Они будут иметь красивый белый фон, тень и закругленные углы, что сделает их визуально привлекательными. Когда пользователь наводит мышку, карта должна казаться интерактивной.

  • .card img: По умолчанию изображения карт скрыты, так как игрок сначала видит только рубашку карты.

  • .flipped: Когда карта переворачивается, мы показываем изображение, чтобы игрок мог видеть, что под ней скрывается.

5. JavaScript: добавляем логику игры 🧩

Теперь самое интересное — добавим логику игры с помощью JavaScript. JavaScript отвечает за взаимодействие игрока с картами, проверку совпадений и управление ходом игры. Давайте разберем каждую функцию:

const cardsArray = [
    { name: 'card1', img: 'images/card1.png' },
    { name: 'card2', img: 'images/card2.png' },
    // Добавьте остальные пары карт
];

let firstCard = null;
let secondCard = null;
let lockBoard = false;

function createBoard() {
    const gameBoard = document.querySelector('.game-board');
    const shuffledCards = [...cardsArray, ...cardsArray].sort(() => 0.5 - Math.random());

    shuffledCards.forEach(card => {
        const cardElement = document.createElement('div');
        cardElement.classList.add('card');
        cardElement.dataset.name = card.name;

        const cardImage = document.createElement('img');
        cardImage.src = card.img;
        cardElement.appendChild(cardImage);

        cardElement.addEventListener('click', flipCard);
        gameBoard.appendChild(cardElement);
    });
}

function flipCard() {
    if (lockBoard) return;
    if (this === firstCard) return;

    this.classList.add('flipped');

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

    secondCard = this;
    checkForMatch();
}

function checkForMatch() {
    if (firstCard.dataset.name === secondCard.dataset.name) {
        disableCards();
    } else {
        unflipCards();
    }
}

function disableCards() {
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    resetBoard();
}

function unflipCards() {
    lockBoard = true;
    setTimeout(() => {
        firstCard.classList.remove('flipped');
        secondCard.classList.remove('flipped');
        resetBoard();
    }, 1000);
}

function resetBoard() {
    [firstCard, secondCard, lockBoard] = [null, null, false];
}

document.addEventListener('DOMContentLoaded', createBoard);

Объяснение кода

  • Массив cardsArray: Содержит объекты с информацией о картах, включая их название и изображение. Мы дублируем каждую карту, чтобы создать пары.

  • Переменные firstCard, secondCard, lockBoard: Эти переменные помогают отслеживать состояние игры. firstCard и secondCard хранят информацию о текущих перевернутых картах, а lockBoard предотвращает переворачивание других карт, пока проверяются совпадения.

  • Функция createBoard(): Создает игровую доску. Мы перемешиваем карты, чтобы каждая игра была уникальной и интересной, а затем добавляем карты на доску.

  • Функция flipCard(): Управляет переворачиванием карты. Если это первая перевернутая карта, она сохраняется в firstCard. Если это вторая карта, проверяем, совпадают ли они.

  • Функция checkForMatch(): Сравнивает две перевернутые карты. Если они совпадают, вызывается disableCards(), чтобы отключить возможность переворота этих карт.

  • Функции disableCards() и unflipCards(): Если карты совпали, мы оставляем их открытыми и отключаем событие клика. Если не совпали — переворачиваем их обратно через секунду.

  • Функция resetBoard(): Сбрасывает значения переменных, чтобы можно было продолжить игру без ошибок.

  • Событие DOMContentLoaded: Гарантирует, что наша функция createBoard() будет вызвана, когда весь HTML будет загружен.

6. Заключение 🎉

Поздравляем! Теперь у вас есть полное понимание того, как создать простую игру на память с помощью HTML, CSS и JavaScript. Мы прошли путь от базовой структуры HTML до сложной логики игры с использованием JavaScript. Эта игра — отличный способ попрактиковаться в основах программирования и улучшить свои навыки работы с DOM. Не бойтесь экспериментировать и добавлять новые фичи, такие как счетчик очков или таймер! 😊

Бесплатно
Кодик: Интерактивное обучение!
Изучай HTML, JavaScript, CSS, Python, PHP, SQL, Git
Проходи практические уроки!
Получи сертификат!
Вам может быть интересно

Не нашли нужной статьи?
Напишите нам и ее сделаем!

Бесплатно
Кодик: Интерактивное обучение!
Изучай HTML, JavaScript, CSS, Python, PHP, SQL, Git
Проходи практические уроки!
Получи сертификат!
Главная
Курсы
Блог
Меню