В этой статье мы разберем, как создать простую игру на память, используя HTML, CSS и JavaScript. Мы шаг за шагом объясним каждый фрагмент кода, чтобы даже те, кто впервые видит программирование, смогли понять и повторить результат. Мы рассмотрим, как создать структуру страницы, стилизовать ее и добавить логику игры, чтобы ваши карты ожили. Давайте начнем! 🚀
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. Не бойтесь экспериментировать и добавлять новые фичи, такие как счетчик очков или таймер! 😊
Проходи практические уроки!
Получи сертификат!
28 окт. 2024
Что такое Grid CSS?
Вы узнаете, что такое CSS Grid, зачем он нужен и как с ним работать. Простые примеры и советы по началу работы с грид-сеткой.
16 нояб. 2024
Создаем игру Крестики-нолики на JS, HTML, CSS
Подробное руководство по созданию игры Крестики-нолики с использованием HTML, CSS и JavaScript. Идеально подходит для начинающих разработчиков, желающих научиться программировать и создавать свои первые проекты. Узнайте, как сделать игру интерактивной и стильной!
18 нояб. 2024
Приложение с заметками на JavaScript
Пошаговое руководство по созданию приложения с заметками на JavaScript с использованием HTML и CSS. Урок включает работу с localStorage для хранения данных, а также подробное объяснение кода. В конце ссылка на GitHub с готовым проектом.
Не нашли нужной статьи?
Напишите нам и ее сделаем!
Проходи практические уроки!
Получи сертификат!