|
|
@@ -0,0 +1,152 @@
|
|
|
+{
|
|
|
+# 📄 Отчёт о проекте «MiniGames Hub»
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## Общая информация
|
|
|
+
|
|
|
+| Поле | Значение |
|
|
|
+|------|----------|
|
|
|
+| **Название проекта** | MiniGames Hub |
|
|
|
+| **Автор** | Ескин Владислав Игоревич |
|
|
|
+| **Дата создания** | 23.06.2026 |
|
|
|
+| **Ссылка на готовый сайт** | [vladeskd.beget.tech](https://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:** [https://vladeskd.beget.tech](https://vladeskd.beget.tech)
|
|
|
+- **Тип хостинга:** Shared hosting
|
|
|
+- **Протокол:** HTTPS
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 📊 Итоги
|
|
|
+
|
|
|
+Проект **MiniGames Hub** успешно реализован и опубликован. В ходе разработки были решены ключевые задачи:
|
|
|
+
|
|
|
+✅ Создано 9 полноценных мини-игр
|
|
|
+✅ Реализована система аккаунтов и рекордов
|
|
|
+✅ Разработан магазин с 21 предметом кастомизации
|
|
|
+✅ Исправлено 8 критических и некритических багов
|
|
|
+✅ Добавлены визуальные эффекты для каждой игры
|
|
|
+✅ Сайт адаптирован под мобильные устройства
|
|
|
+✅ Обеспечена защита от XSS в отзывах
|
|
|
+
|
|
|
+Проект демонстрирует владение современным стеком веб-разработки и умение применять ИИ-инструменты для ускорения и улучшения качества кода.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**Автор:** Ескин Владислав Игоревич
|
|
|
+**Дата:** 23.06.2026
|
|
|
+**Сайт:** [vladeskd.beget.tech](https://vladeskd.beget.tech)
|
|
|
+}
|
