|
|
@@ -1,170 +0,0 @@
|
|
|
-
|
|
|
-
|
|
|
-{# 📋 Отчёт о проделанной работе: Проект «MiniGames Hub»
|
|
|
-
|
|
|
-> **Автор:** Ескин Владислав Игоревич
|
|
|
-> **Дата:** 22 июня 2026 г.
|
|
|
-> **Ссылка на проект:** [http://vladeskd.beget.tech/](http://vladeskd.beget.tech/)
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 1. Введение
|
|
|
-
|
|
|
-Проект **MiniGames Hub** — это современная веб-платформа, объединяющая коллекцию из десяти классических мини-игр с единой системой аккаунтов, бонусной экономикой и магазином внутриигровых улучшений.
|
|
|
-
|
|
|
-* **Актуальность:** Растущий спрос на браузерные развлечения без необходимости установки дополнительного ПО.
|
|
|
-* **Цель:** Создать мотивирующее игровое пространство с элементами персонализации и социальными функциями.
|
|
|
-* **Ключевое преимущество:** Полный отказ от внешних библиотек позволил сохранить минимальный вес проекта (единый HTML-файл) и добиться мгновенной загрузки (< 0.5 сек).
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 2. Технологический стек
|
|
|
-
|
|
|
-| Технология | Назначение |
|
|
|
-| :--- | :--- |
|
|
|
-| **HTML5** | Структура страниц, семантическая разметка |
|
|
|
-| **CSS3** | Адаптивная вёрстка, анимации, поддержка тем |
|
|
|
-| **Vanilla JavaScript** | Игровая логика, управление состоянием приложения |
|
|
|
-| **Canvas API** | Высокопроизводительный рендеринг динамических игр |
|
|
|
-| **LocalStorage** | Локальное хранение данных пользователей и прогресса |
|
|
|
-| **CSS Custom Properties** | Гибкое управление темами оформления |
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 3. Реализованный функционал
|
|
|
-
|
|
|
-### 3.1 🕹️ Игровой модуль (10 игр)
|
|
|
-Для каждой игры предусмотрены три уровня сложности, сохранение личных рекордов, спецэффекты и полноценное клавиатурное управление. Каждая игра интегрирована с общей бонусной системой.
|
|
|
-
|
|
|
-| № | Игра | Жанр | Ключевые особенности |
|
|
|
-| :-: | :--- | :--- | :--- |
|
|
|
-| 1 | **Snake** 🐍 | Аркада | Регулировка скорости, магнит, золотая змейка |
|
|
|
-| 2 | **Тетрис** 🧱 | Головоломка | Предпросмотр следующей фигуры, удвоение очков |
|
|
|
-| 3 | **Пинг-Понг** 🏓 | Аркада | Умный AI-противник, регулируемая скорость мяча |
|
|
|
-| 4 | **Cookie Clicker** 🍪 | Кликер | Система улучшений, пассивный доход |
|
|
|
-| 5 | **Камень-Ножницы-Бумага** ✂️ | Vs ИИ | Механика подглядывания за ходом ИИ |
|
|
|
-| 6 | **Memory** 🃏 | Память | Подсказка, увеличенное время показа карт |
|
|
|
-| 7 | **Колесо Фортуны** 🎡 | Бонус | Вращение доступно 1 раз в час |
|
|
|
-| 8 | **Пятнашки** 🔢 | Головоломка | Подсказка решения, возможность отмены хода |
|
|
|
-| 9 | **2048** 🔲 | Головоломка | Удвоение очков за комбо, отмена хода |
|
|
|
-| 10 | *(Доп. игра)* | *Разное* | *Интеграция в общую систему* |
|
|
|
-
|
|
|
-### 3.2 👤 Система пользователей
|
|
|
-Реализована полная система регистрации и авторизации с сохранением данных в `LocalStorage`. Поддерживается автоматическое восстановление сессии при перезагрузке страницы.
|
|
|
-
|
|
|
-**Структура профиля пользователя:**
|
|
|
-```javascript
|
|
|
-{
|
|
|
- firstName: String, // Имя
|
|
|
- lastName: String, // Фамилия
|
|
|
- username: String, // Логин
|
|
|
- email: String, // Email
|
|
|
- password: String, // Хэш пароля
|
|
|
- bonusPoints: Number, // Баланс бонусов
|
|
|
- ownedItems: Array, // Купленные предметы
|
|
|
- scores: Object, // Рекорды по играм
|
|
|
- activeBonuses: Object, // Активные баффы
|
|
|
- createdAt: Date // Дата регистрации
|
|
|
-
|
|
|
-
|
|
|
-### 3.3 🎁 Магазин и бонусы
|
|
|
-Магазин предлагает **24 уникальных предмета**.
|
|
|
-
|
|
|
-**Способы заработка бонусов:**
|
|
|
-
|
|
|
-| Действие | Награда |
|
|
|
-| :--- | :--- |
|
|
|
-| Запуск любой игры | **+10** бонусов |
|
|
|
-| Установка нового рекорда | **+50** бонусов |
|
|
|
-| Донат (10₽ = 1 б.) | **+N** бонусов |
|
|
|
-| Написание отзыва | **+20** бонусов |
|
|
|
-| Вращение Колеса Фортуны | **5–200** бонусов |
|
|
|
-
|
|
|
-**Категории товаров:**
|
|
|
-* 🚀 Улучшения для конкретных игр
|
|
|
-* 🎨 Темы оформления
|
|
|
-* 💎 Универсальные бонусы (x2 очки, VIP-статус)
|
|
|
-
|
|
|
-### 3.4 💬 Система отзывов
|
|
|
-Пользователи могут оставлять отзывы с рейтингом от ⭐ до ⭐⭐⭐⭐⭐.
|
|
|
-* За каждый оставленный отзыв начисляется **+20 бонусов**.
|
|
|
-* Отзывы публичны и видны всем посетителям платформы.
|
|
|
-
|
|
|
-### 3.5 🏆 Таблица рекордов (Leaderboard)
|
|
|
-Глобальная таблица лидеров с сортировкой пользователей по суммарному игровому счёту.
|
|
|
-* 🥇 **1 место**
|
|
|
-* 🥈 **2 место**
|
|
|
-* 🥉 **3 место**
|
|
|
-
|
|
|
-### 3.6 🎨 Темы оформления
|
|
|
-Доступно **8 уникальных тем**, динамически меняющих фон и цветовую палитру интерфейса:
|
|
|
-1. 🌟 Неоновая
|
|
|
-2. 🪐 Космическая
|
|
|
-3. 🖥️ Матрица
|
|
|
-4. ☀️ Светлая
|
|
|
-5. 🌊 Океан
|
|
|
-6. 🌅 Закат
|
|
|
-7. 🌲 Лес
|
|
|
-8. 🌃 Ночной город
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 4. Архитектура проекта
|
|
|
-
|
|
|
-Проект построен как **Single Page Application (SPA)**.
|
|
|
-
|
|
|
-**Хранение данных (LocalStorage Keys):**
|
|
|
-* `mgh_users` — массив всех зарегистрированных пользователей
|
|
|
-* `mgh_currentUser` — данные текущей активной сессии
|
|
|
-* `mgh_reviews` — массив всех отзывов
|
|
|
-* `mgh_wheel_last_spin` — timestamp последнего вращения колеса
|
|
|
-
|
|
|
-Модульная структура JavaScript-кода обеспечивает лёгкость поддержки и масштабирования.
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 5. Пользовательский интерфейс
|
|
|
-
|
|
|
-* **Навигация:** Удобная шапка с отображением текущего баланса, сетка карточек игр с превью.
|
|
|
-* **Адаптивность:** Интерфейс полностью перестраивается под мобильные устройства и планшеты.
|
|
|
-* **Визуальные эффекты:** Использование частиц (particles), свечения элементов и плавных анимаций появления.
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 6. Тестирование и обеспечение качества
|
|
|
-
|
|
|
-| Вид тестирования | Результат | Статус |
|
|
|
-| :--- | :--- | :---: |
|
|
|
-| Кросс-браузерность | Chrome, Firefox, Safari, Edge | ✅ |
|
|
|
-| Адаптивность | Mobile, Tablet, Desktop | ✅ |
|
|
|
-| Функциональность игр | Все механики работают корректно | ✅ |
|
|
|
-| Авторизация | Регистрация, вход, выход, восстановление | ✅ |
|
|
|
-| Производительность (FPS) | Стабильные 60 FPS в играх на Canvas | ✅ |
|
|
|
-| Безопасность | Валидация ввода, защита LocalStorage | ✅ |
|
|
|
-
|
|
|
-*Устранены потенциальные конфликты клавиш и проблемы с потерей прогресса при внезапном закрытии вкладки.*
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 7. Результаты работы
|
|
|
-
|
|
|
-| Показатель | Значение |
|
|
|
-| :--- | :--- |
|
|
|
-| Количество игр | **10** |
|
|
|
-| Предметов в магазине | **24** |
|
|
|
-| Тем оформления | **8** |
|
|
|
-| Объём JS-кода | ~2500 строк |
|
|
|
-| Время загрузки | **< 0.5 с** |
|
|
|
-| Размер файла | **~110 КБ** |
|
|
|
-
|
|
|
-Создана полноценная экосистема с глубокой кастомизацией и элементами социального взаимодействия.
|
|
|
-
|
|
|
----
|
|
|
-
|
|
|
-## 8. Заключение
|
|
|
-
|
|
|
-Все поставленные задачи выполнены в полном объеме. Проект стабилен, оптимизирован и готов к публичному размещению.
|
|
|
-
|
|
|
-***
|
|
|
-
|
|
|
-🔚 **Конец отчета**}
|
