Урок 3: JavaScript основы для игры Memory

🎯 Цели урока

Понять переменные и их типы в JavaScript
Изучить работу с массивами
Создать массив данных для игры
Получить ссылки на DOM элементы
Написать функцию инициализации игры

🔨 Что мы создаем

Основу JavaScript кода для игры Memory: переменные состояния игры, массив картинок, функции получения DOM элементов и инициализации.

1. Переменные в JavaScript

💡 Что такое переменные?

Переменные - это контейнеры для хранения данных. В игре Memory нам нужно хранить информацию о карточках, счете, попытках и состоянии игры.

Шаг 1

Объявление переменных

// Переменные для хранения элементов DOM
const gameBoard = document.getElementById('game-board');
const scoreElement = document.getElementById('score');
const attemptsElement = document.getElementById('attempts');
const totalPairsElement = document.getElementById('total-pairs');
const restartButton = document.getElementById('restart-btn');

const - создает константу, которую нельзя изменить

document.getElementById() - получает элемент по ID из HTML

Эти переменные хранят ссылки на HTML элементы, с которыми мы будем работать. Мы используем const, потому что ссылки на элементы не изменятся.

Шаг 2

Переменные состояния игры

// Переменные состояния игры
let cards = [];           // Массив всех карточек
let flippedCards = [];    // Перевернутые карточки
let matchedPairs = 0;     // Найденные пары
let attempts = 0;         // Количество попыток
let canFlip = true;       // Можно ли переворачивать карточки

let - создает переменную, которую можно изменять

[] - пустой массив для хранения нескольких значений

0 - числовое значение

true - логическое значение (boolean)

Эти переменные будут изменяться в процессе игры, поэтому используем let.

2. Массивы в JavaScript

💡 Что такое массив?

Массив - это список значений. В нашей игре массив будет содержать пути к картинкам животных.

Шаг 3

Массив картинок для игры

// Картинки для игры (из папки img)
const cardImages = [
    'img/dog.png',
    'img/kat.png',
    'img/rabbit.png',
    'img/fox.png',
    'img/bear.png',
    'img/panda.png',
    'img/koala.png',
    'img/lion.png'
];

Массив cardImages содержит 8 путей к картинкам. Каждый элемент массива - это строка с путем к файлу.

Как работать с массивами:

// Получить первую картинку
console.log(cardImages[0]); // 'img/dog.png'

// Получить количество элементов
console.log(cardImages.length); // 8

// Создать копию массива
const gameCards = [...cardImages, ...cardImages]; // 16 элементов

[0] - индекс первого элемента (счет начинается с 0)

.length - свойство, возвращающее количество элементов

... - spread operator, "разворачивает" массив

3. Функция инициализации игры

Шаг 4

Создание функции initGame

// Инициализация игры
function initGame() {
    // Очищаем доску
    gameBoard.innerHTML = '';
    
    // Сбрасываем переменные
    cards = [];
    flippedCards = [];
    matchedPairs = 0;
    attempts = 0;
    canFlip = true;
    
    // Обновляем счетчики на экране
    scoreElement.textContent = matchedPairs;
    attemptsElement.textContent = attempts;
    
    // Создаем пары карточек (8 картинок × 2 = 16 карточек)
    const gameCards = [...cardImages, ...cardImages];
    totalPairsElement.textContent = cardImages.length;
    
    console.log('Игра инициализирована!');
    console.log('Всего карточек:', gameCards.length);
}

Функция initGame подготавливает игру к началу:

Очищает игровое поле
Сбрасывает все переменные в начальное состояние
Обновляет информацию на экране
Создает массив из 16 карточек (по 2 каждой картинки)

4. Подключение к HTML

Шаг 5

Запуск игры при загрузке страницы

// Запуск игры при загрузке страницы
document.addEventListener('DOMContentLoaded', initGame);

// Обработчик кнопки перезапуска
restartButton.addEventListener('click', initGame);

Эти строки кода:

DOMContentLoaded - событие, когда HTML полностью загружен
addEventListener - добавляет обработчик события
click - событие клика по кнопке

5. Полный код основ

Шаг 6

Итоговый код script.js (часть 1)

// Элементы на странице
const gameBoard = document.getElementById('game-board');
const scoreElement = document.getElementById('score');
const attemptsElement = document.getElementById('attempts');
const totalPairsElement = document.getElementById('total-pairs');
const restartButton = document.getElementById('restart-btn');

// Картинки для игры (из папки img)
const cardImages = [
    'img/dog.png',
    'img/kat.png',
    'img/rabbit.png',
    'img/fox.png',
    'img/bear.png',
    'img/panda.png',
    'img/koala.png',
    'img/lion.png'
];

// Переменные состояния игры
let cards = [];
let flippedCards = [];
let matchedPairs = 0;
let attempts = 0;
let canFlip = true;

// Инициализация игры
function initGame() {
    // Очищаем доску
    gameBoard.innerHTML = '';
    cards = [];
    flippedCards = [];
    matchedPairs = 0;
    attempts = 0;
    canFlip = true;
    
    // Обновляем счетчики
    scoreElement.textContent = matchedPairs;
    attemptsElement.textContent = attempts;
    
    // Создаем пары карточек
    const gameCards = [...cardImages, ...cardImages];
    totalPairsElement.textContent = cardImages.length;
    
    console.log('Игра инициализирована! Карточек:', gameCards.length);
}

// Запуск игры при загрузке страницы
document.addEventListener('DOMContentLoaded', initGame);

// Обработчик кнопки перезапуска
restartButton.addEventListener('click', initGame);

6. Ключевые концепции JavaScript

DOM (Document Object Model)

DOM - это представление HTML страницы в JavaScript. Мы используем document.getElementById для получения элементов и изменения их содержимого.

Функции

Функции - это блоки кода, которые можно вызывать многократно. Функция initGame подготавливает игру к запуску.

События

События позволяют реагировать на действия пользователя. Мы используем событие click для кнопки и DOMContentLoaded для загрузки страницы.

Типы данных

String - текстовые данные ('img/dog.png')
Number - числовые данные (0, 8, 16)
Boolean - логические данные (true, false)
Array - массивы данных ([1, 2, 3])
Object - объекты с свойствами

7. Проверка работы кода

🔧 Как проверить, что код работает:

Откройте HTML файл в браузере
Нажмите F12 для открытия инструментов разработчика
Перейдите на вкладку "Console" (Консоль)
При загрузке страницы должно появиться сообщение: "Игра инициализирована! Карточек: 16"
При нажатии на кнопку "Начать новую игру" сообщение должно появляться снова

Если сообщения появляются в консоли, значит JavaScript работает правильно! В следующем уроке мы добавим создание карточек и их отображение на экране.

← Урок 2: CSS стили Урок 4: JavaScript функции →

⚙️ Урок 3: JavaScript основы