🎯 О курсе
В этих уроках вы создадите полнофункциональную игру Memory (найди пары) с нуля. Изучите HTML структуру, CSS стилизацию, JavaScript логику и современные подходы к веб-разработке. Каждый урок содержит подробные объяснения, примеры кода и практические задания.
1
HTML структура
Создаем базовую HTML разметку для игры Memory с семантическими
элементами.
Изучаем:
- Структура HTML документа
- Семантическая разметка
- ID и классы элементов
- Подготовка к JavaScript
2
CSS стилизация
Создаем красивые стили для карточек, анимации и адаптивный дизайн.
Изучаем:
- CSS Grid для игрового поля
- Flexbox для центрирования
- Анимации и переходы
- Состояния карточек
3
JavaScript основы
Изучаем переменные, массивы и инициализацию игры.
Изучаем:
- Переменные и типы данных
- Работа с массивами
- DOM элементы
- Функции и события
4
JavaScript функции
Создаем функции для карточек, перемешивания и обработки кликов.
Изучаем:
- Создание функций
- Алгоритм перемешивания
- Динамическое создание HTML
- Обработка событий
5
Игровая логика
Завершаем игру: проверка совпадений, подсчет очков и условие
победы.
Изучаем:
- Логика проверки совпадений
- Управление состоянием игры
- Условие завершения
- Обратная связь с игроком
📁 Дополнительные ресурсы
Для работы игры вам понадобятся картинки животных. Скачайте архив и распакуйте в директорию с игрой.
💾 Скачать картинки (img.zip)