Отчет Ескин.md 8.1 KB
{
📄 Отчёт о проекте «MiniGames Hub»
Общая информация
| Поле | Значение |
|---|---|
| Название проекта | MiniGames Hub |
| Автор | Ескин Владислав Игоревич |
| Дата создания | 23.06.2026 |
| Ссылка на готовый сайт | http://vladeskd.beget.tech/ |
| Тип проекта | Веб-приложение (HTML/CSS/JS, Single Page Application) |
| Использованные ИИ-ассистенты | Qwen, DeepSeek, Claude |
🎯 Цель проекта
Создание интерактивной игровой платформы в браузере, объединяющей 9 мини-игр различного жанра с единой системой аккаунтов, бонусов, рекордов и магазином кастомизации. Проект демонстрирует навыки фронтенд-разработки, работы с localStorage, Canvas API и игровыми механиками.
🎮 Список реализованных игр
| № | Игра | Жанр | Управление |
|---|---|---|---|
| 1 | Snake | Аркада | Стрелки / WASD |
| 2 | 🟦 Тетрис | Головоломка | ← → движение, ↑ поворот, ↓ ускорение |
| 3 | Пинг-Понг | Аркада / Vs ИИ | Мышь или W/S |
| 4 | 🍪 Cookie Clicker | Кликер / Idle | Клик мышью |
| 5 | Камень-Ножницы-Бумага | Vs ИИ | Клик по кнопкам |
| 6 | 🎴 Memory | Память | Клик по картам |
| 7 | 🎡 Колесо Фортуны | Бонусная | Клик по кнопке |
| 8 | 🧩 Пятнашки | Головоломка | Клик по плиткам |
| 9 | 🔢 2048 | Головоломка | Стрелки / WASD / свайпы |
️ Реализованный функционал
🔐 Система аккаунтов
- Регистрация и авторизация пользователей
- Хранение данных в
localStorage - Персональный профиль с балансом бонусов
Магазин бонусов (12 фонов + 9 скинов/бустов)
- Фоны сайта: Неоновый, Матрица, Закат, Океан, Галактика, Северное сияние, Огонь, Лёд, Лес, Пустыня, Ночь, Киберпанк
- Скины для игр: Золотая змейка, Неон Тетрис, Огненный мяч, Алмазные карты, Деревянные плитки, Светящиеся 2048
- Бусты: x2 Кликер, Подсказка в RPS
- Эффекты сайта: Тёмная тема, Анимированные частицы
Система рекордов
- Сохранение личных рекордов по каждой игре
- Глобальная таблица лидеров
- Начисление +50 бонусов за новый рекорд
💰 Система бонусов
- +10 бонусов за каждую игру
- +50 бонусов за рекорд
- +20 бонусов за отзыв
- +1 бонус за каждые 10₽ доната
- Случайные бонусы с Колеса Фортуны
💬 Отзывы игроков
- Форма с оценкой (1–5 звёзд)
- Модерация через экранирование HTML (защита от XSS)
💎 Донат-система
- Калькулятор бонусов в реальном времени
- Визуальный предпросмотр суммы
Исправленные баги
| № | Описание бага | Решение |
|---|---|---|
| 1 | Критический: при отключении фона сайт переставал реагировать на клики | Создан отдельный #bg-overlay с pointer-events: none и z-index: -1 |
| 2 | Следующая фигура в Тетрисе отображалась не по центру | Добавлен расчёт offsetX/offsetY для центрирования |
| 3 | Рекорды не сохранялись после выхода из игры | Функция saveRecord() теперь всегда вызывает updateRecordDisplay() |
| 4 | Змейка могла развернуться на 180° и мгновенно проиграть | Введён буфер направления nextDx/nextDy |
| 5 | Утечка event listeners при закрытии модалок | Реализована функция cleanupGame() |
| 6 | Пятнашки могли генерироваться нерешаемыми | Добавлена проверка isSolvable() |
| 7 | Колесо Фортуны позволяло множественные спины | Флаг wheelSpinning + cooldown по timestamp |
| 8 | Memory позволяла кликать во время анимации | Флаг memoryLocked |
✨ Визуальные эффекты
- Snake: неоновое свечение еды и головы змейки
- Тетрис: «призрачная фигура» (показывает место падения блока)
- Пинг-Понг: шлейф за мячом
- 2048: анимация появления (
popIn) и пульсации при слиянии (pulseMerge) - Memory: 3D-переворот карточек (
rotateY) - Частицы: анимированные светящиеся точки на фоне сайта
🛠 Технологии
- HTML5 — семантическая разметка, Canvas API
- CSS3 — переменные (
:root), Grid/Flexbox, анимации (@keyframes),backdrop-filter, адаптивность (@media) - Vanilla JavaScript — без фреймворков, работа с DOM,
localStorage,requestAnimationFrame - ИИ-ассистенты: Qwen, DeepSeek, Claude — помощь в разработке, отладке и оптимизации кода
📁 Структура проекта
MiniGames Hub/
├── index.html # Основной файл (SPA)
├── тест.html # Тестовая версия
── README.md # Данный отчёт
Проект реализован в виде одного HTML-файла (Single File Application) — все стили и скрипты встроены, что упрощает деплой на любой хостинг.
🚀 Деплой
Сайт размещён на хостинге Beget:
- URL: http://vladeskd.beget.tech/
- Тип хостинга: Shared hosting
- Протокол: HTTPS
📊 Итоги
Проект MiniGames Hub успешно реализован и опубликован. В ходе разработки были решены ключевые задачи:
✅ Создано 9 полноценных мини-игр
✅ Реализована система аккаунтов и рекордов
✅ Разработан магазин с 21 предметом кастомизации
✅ Исправлено 8 критических и некритических багов
✅ Добавлены визуальные эффекты для каждой игры
✅ Сайт адаптирован под мобильные устройства
✅ Обеспечена защита от XSS в отзывах
Проект демонстрирует владение современным стеком веб-разработки и умение применять ИИ-инструменты для ускорения и улучшения качества кода.
Автор: Ескин Владислав Игоревич
Дата: 23.06.2026
}