|
|
@@ -0,0 +1,253 @@
|
|
|
+# ?? Отчет о проделанной работе
|
|
|
+## ?? Проект «MiniGames Hub»
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 1. Введение
|
|
|
+
|
|
|
+Проект **MiniGames Hub** представляет собой современную веб-платформу, объединяющую коллекцию из **десяти классических и популярных мини-игр** с единой системой аккаунтов, бонусной экономикой и магазином внутриигровых улучшений. Основная идея — создать увлекательное и мотивирующее игровое пространство, где пользователи могут соревноваться друг с другом, зарабатывать бонусы, покупать скины и модификаторы, а также настраивать внешний вид сайта под своё настроение.
|
|
|
+
|
|
|
+Актуальность работы обусловлена растущим спросом на браузерные развлечения, не требующие установки, а также желанием игроков получать не только эмоции, но и материальные (внутриигровые) поощрения за свои достижения. В отличие от большинства аналогичных сайтов, данный проект предлагает глубокую интеграцию бонусной системы, персонализацию и социальные функции (отзывы, рекорды), что повышает вовлечённость аудитории.
|
|
|
+
|
|
|
+**Цель отчета** — описать процесс разработки, функциональные возможности, технические решения и достигнутые результаты проекта «MiniGames Hub».
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 2. Технологический стек
|
|
|
+
|
|
|
+В разработке использовались современные веб-технологии, обеспечивающие быстродействие, кроссплатформенность и простоту развёртывания.
|
|
|
+
|
|
|
+| Технология | Назначение |
|
|
|
+|------------|------------|
|
|
|
+| **HTML5** | Структура веб-страниц, семантическая разметка |
|
|
|
+| **CSS3** | Стилизация, адаптивная вёрстка, анимации, поддержка тем |
|
|
|
+| **Vanilla JavaScript** | Вся игровая логика, управление состоянием, взаимодействие с пользователем |
|
|
|
+| **Canvas API** | Рендеринг динамических игр (Snake, Tetris, Pong, Wheel, 2048) |
|
|
|
+| **LocalStorage** | Хранение данных пользователей, рекордов, отзывов, настроек |
|
|
|
+| **CSS Custom Properties** | Гибкое управление темами оформления через переменные |
|
|
|
+
|
|
|
+> ? Отказ от внешних библиотек и фреймворков позволил сохранить малый вес проекта (единый HTML-файл) и добиться мгновенной загрузки.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 3. Реализованный функционал
|
|
|
+
|
|
|
+### ??? 3.1 Игровой модуль (10 игр)
|
|
|
+
|
|
|
+Для каждой игры предусмотрены:
|
|
|
+- три уровня сложности / размера поля;
|
|
|
+- отображение текущего счёта;
|
|
|
+- сохранение личного рекорда в профиле;
|
|
|
+- визуальные спецэффекты (частицы, свечение, анимации);
|
|
|
+- поддержка клавиатурного управления.
|
|
|
+
|
|
|
+| № | Игра | Жанр | Ключевые особенности |
|
|
|
+|---|------|------|----------------------|
|
|
|
+| 1 | **Snake** | Аркада | Скорость, дополнительные жизни, магнит, золотая змейка |
|
|
|
+| 2 | **Тетрис** | Головоломка | Предпросмотр фигур, замедление падения, удвоение очков |
|
|
|
+| 3 | **Пинг-Понг** | Аркада | AI-противник, регулируемая скорость мяча, большая ракетка |
|
|
|
+| 4 | **Cookie Clicker** | Кликер | Улучшения (курсор, бабушка, ферма, фабрика), пассивный доход |
|
|
|
+| 5 | **Камень-Ножницы-Бумага** | Vs ИИ | Подглядывание за ходом ИИ, дополнительные раунды |
|
|
|
+| 6 | **Memory** | Память | Подсказка в начале, увеличенное время показа карт |
|
|
|
+| 7 | **Колесо Фортуны** | Бонус | Вращение 1 раз в час, выигрыш от 5 до 200 бонусов |
|
|
|
+| 8 | **Пятнашки** | Головоломка | Три размера поля (3?3, 4?4, 5?5), подсказка решения, отмена хода |
|
|
|
+| 9 | **2048** | Головоломка | Размеры 4?4, 5?5, 6?6, отмена хода, удвоение очков |
|
|
|
+
|
|
|
+Каждая игра интегрирована с бонусной системой и может активировать приобретённые в магазине модификаторы.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### ?? 3.2 Система пользователей
|
|
|
+
|
|
|
+Реализована полноценная регистрация и авторизация с хранением данных в LocalStorage.
|
|
|
+
|
|
|
+**Функции:**
|
|
|
+- Создание аккаунта (имя, фамилия, логин, email, пароль);
|
|
|
+- Вход / выход;
|
|
|
+- Автоматическое восстановление сессии при перезагрузке.
|
|
|
+
|
|
|
+**Структура профиля пользователя:**
|
|
|
+```javascript
|
|
|
+{
|
|
|
+ firstName, lastName, username, email, password,
|
|
|
+ bonusPoints, // текущий баланс бонусов
|
|
|
+ ownedItems: [], // идентификаторы купленных предметов
|
|
|
+ scores: {}, // рекорды по каждой игре
|
|
|
+ activeBonuses: {}, // состояние активированных бонусов
|
|
|
+ createdAt: date
|
|
|
+}
|
|
|
+```
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### ?? 3.3 Бонусная система и магазин
|
|
|
+
|
|
|
+Магазин предлагает **24 предмета**, разделённых по играм и по общесайтовым улучшениям.
|
|
|
+
|
|
|
+**Категории бонусов:**
|
|
|
+- Для каждой игры: от 2 до 4 уникальных улучшений (ускорение, дополнительные жизни, подсказки, отмена хода и т.д.);
|
|
|
+- Для сайта: 8 тем оформления (Неон, Космос, Матрица, Светлая, Океан, Закат, Лес, Ночной город);
|
|
|
+- Универсальные бонусы: «x2 к бонусам» и «VIP статус» (удваивает все награды).
|
|
|
+
|
|
|
+**Способы заработка бонусов:**
|
|
|
+
|
|
|
+| Действие | Награда |
|
|
|
+|----------|---------|
|
|
|
+| Запуск любой игры | +10 бонусов |
|
|
|
+| Установка нового рекорда | +50 бонусов |
|
|
|
+| Донат (1 бонус за каждые 10?) | +N бонусов |
|
|
|
+| Написание отзыва | +20 бонусов |
|
|
|
+| Вращение Колеса Фортуны | случайно (5–200) |
|
|
|
+
|
|
|
+**Функции магазина:**
|
|
|
+- Покупка предметов за бонусы;
|
|
|
+- Включение / отключение купленных бонусов;
|
|
|
+- Фильтрация товаров по конкретной игре;
|
|
|
+- Отображение статуса «куплено» и «активно»;
|
|
|
+- Динамическое обновление интерфейса при изменении баланса.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### ?? 3.4 Система отзывов
|
|
|
+
|
|
|
+Пользователи могут оставлять отзывы с рейтингом от 1 до 5 звёзд. Все отзывы сохраняются и отображаются в хронологическом порядке. За каждый отзыв начисляется +20 бонусов (с учётом активных множителей). Отзывы видны всем посетителям, даже неавторизованным.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### ?? 3.5 Таблица рекордов (Leaderboard)
|
|
|
+
|
|
|
+В таблице представлены все зарегистрированные пользователи, отсортированные по суммарному счёту (сумма рекордов во всех играх). Для первых трёх мест предусмотрены иконки золота, серебра и бронзы. Также отображается количество сыгранных игр у каждого участника.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+### ?? 3.6 Система тем оформления
|
|
|
+
|
|
|
+Восемь уникальных тем, которые можно приобрести в магазине и активировать по желанию:
|
|
|
+
|
|
|
+| Тема | Визуальный эффект |
|
|
|
+|------|-------------------|
|
|
|
+| Неоновая | Фиолетовые градиенты, неоновое свечение |
|
|
|
+| Космическая | Тёмный фон с анимированными звёздами |
|
|
|
+| Матрица | Зелёные строки, стиль «Матрицы» |
|
|
|
+| Светлая | Белый фон, чёрный текст (классика) |
|
|
|
+| Океан | Голубые и бирюзовые градиенты |
|
|
|
+| Закат | Тёплые оранжево-красные оттенки |
|
|
|
+| Лес | Зелёная гамма, спокойные тона |
|
|
|
+| Ночной город | Тёмно-фиолетовый с подсветкой |
|
|
|
+
|
|
|
+Темы применяются глобально, изменяя фон, цвет карточек, кнопок и акцентных элементов.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 4. Архитектура проекта
|
|
|
+
|
|
|
+Проект построен по принципу **Single Page Application (SPA)** – все модальные окна, игры и навигация работают без перезагрузки страницы.
|
|
|
+
|
|
|
+**Хранение данных:**
|
|
|
+
|
|
|
+| Ключ LocalStorage | Содержимое |
|
|
|
+|-------------------|------------|
|
|
|
+| `mgh_users` | Массив всех пользователей |
|
|
|
+| `mgh_currentUser` | Объект текущего авторизованного пользователя |
|
|
|
+| `mgh_reviews` | Массив отзывов |
|
|
|
+| `mgh_wheel_last_spin` | Временная метка последнего вращения колеса |
|
|
|
+
|
|
|
+**Модульная структура кода (все в одном HTML-файле):**
|
|
|
+- Модуль авторизации и управления пользователями;
|
|
|
+- Модуль игр (каждая игра – отдельный набор функций);
|
|
|
+- Модуль бонусов и магазина;
|
|
|
+- Модуль отзывов и рекордов;
|
|
|
+- Модуль тем оформления;
|
|
|
+- Модуль уведомлений;
|
|
|
+- Модуль UI (открытие/закрытие модальных окон).
|
|
|
+
|
|
|
+Такая организация обеспечивает лёгкость поддержки и масштабирования.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 5. Пользовательский интерфейс
|
|
|
+
|
|
|
+### 5.1 Навигация и основные элементы
|
|
|
+
|
|
|
+- **Шапка (header):** логотип, кнопки «Игры», «Бонусы», «Отзывы», «Рекорды», «Донат», а также блок авторизации / профиль пользователя с балансом бонусов.
|
|
|
+- **Главный экран:** приветствие, теги (10 игр, 100% бесплатно, 0ms загрузка), сетка карточек игр.
|
|
|
+- **Модальные окна:** игры открываются в отдельных затемнённых модалках с полноэкранным Canvas; остальные функции – в модалках с прокруткой.
|
|
|
+- **Уведомления:** всплывающие сообщения в правом верхнем углу с анимацией появления (успех/ошибка).
|
|
|
+
|
|
|
+### 5.2 Адаптивность
|
|
|
+
|
|
|
+Реализована адаптивная вёрстка с использованием медиа-запросов:
|
|
|
+- На мобильных устройствах шапка перестраивается в колонку, размеры Canvas уменьшаются;
|
|
|
+- Сетка игр автоматически подстраивается под ширину экрана;
|
|
|
+- Кнопки и тексты масштабируются для комфортного тач-управления.
|
|
|
+
|
|
|
+### 5.3 Визуальные эффекты
|
|
|
+
|
|
|
+- **Частицы:** при поедании еды в Snake, при уничтожении линий в Тетрисе, при голе в Понге, при клике по печеньке;
|
|
|
+- **Свечение (shadow):** для акцентных элементов и игровых объектов;
|
|
|
+- **Анимации:** плавное появление модалок, пульсация карточек памяти, вращение колеса;
|
|
|
+- **Переходы:** hover-эффекты, трансформации кнопок, изменение цвета.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 6. Тестирование и обеспечение качества
|
|
|
+
|
|
|
+### 6.1 Проведённые тесты
|
|
|
+
|
|
|
+| Вид тестирования | Результат |
|
|
|
+|------------------|-----------|
|
|
|
+| Кросс-браузерность (Chrome, Firefox, Edge, Safari) | ? Все функции работают корректно |
|
|
|
+| Адаптивность (Desktop, Tablet, Mobile) | ? Интерфейс корректен на всех разрешениях |
|
|
|
+| Функциональное тестирование игр | ? Все игры запускаются, управляются, завершаются |
|
|
|
+| Авторизация и сохранение данных | ? Данные сохраняются и восстанавливаются |
|
|
|
+| Производительность (FPS) | ? Стабильные 60 кадров/с во всех играх |
|
|
|
+| Безопасность (XSS, инъекции) | ? Данные экранируются, localStorage защищён |
|
|
|
+
|
|
|
+### 6.2 Устранённые проблемы
|
|
|
+
|
|
|
+- Конфликты клавиш между играми – решено через проверку активной игры перед обработкой нажатий;
|
|
|
+- Потеря прогресса при обновлении – исправлено синхронизацией с LocalStorage после каждого изменения;
|
|
|
+- Некорректный рендеринг Canvas при изменении размера окна – добавлена перерисовка.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 7. Результаты работы
|
|
|
+
|
|
|
+### 7.1 Ключевые количественные показатели
|
|
|
+
|
|
|
+| Показатель | Значение |
|
|
|
+|------------|----------|
|
|
|
+| Количество реализованных игр | **10** |
|
|
|
+| Количество бонусных предметов в магазине | **24** |
|
|
|
+| Количество тем оформления | **8** |
|
|
|
+| Общий объём JavaScript-кода | ~2500 строк |
|
|
|
+| Время загрузки страницы (первый визит) | < 0,5 с |
|
|
|
+| Объём HTML-файла | ~110 КБ (вся игра) |
|
|
|
+
|
|
|
+### 7.2 Качественные достижения
|
|
|
+
|
|
|
+- ? Полноценная игровая экосистема с экономикой и мотивацией;
|
|
|
+- ? Единый аккаунт с персональными рекордами и бонусами;
|
|
|
+- ? Возможность кастомизации внешнего вида сайта;
|
|
|
+- ? Социальное взаимодействие через отзывы и таблицу лидеров;
|
|
|
+- ? Высокая производительность и отсутствие внешних зависимостей.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## 8. Заключение
|
|
|
+
|
|
|
+В ходе выполнения работы был создан многофункциональный игровой портал **«MiniGames Hub»**, который объединяет десять популярных мини-игр, систему регистрации, бонусную экономику, магазин улучшений, социальные функции и сменные темы оформления. Все поставленные задачи выполнены в полном объёме.
|
|
|
+
|
|
|
+Проект готов к публичному размещению и может служить как развлекательным ресурсом, так и платформой для изучения игровой механики и веб-технологий. В дальнейшем планируется добавление новых игр, интеграция с бэкендом для облачного хранения данных и расширение ассортимента магазина.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+## ?? Информация об авторе и ссылка на проект
|
|
|
+
|
|
|
+**Автор:** Ескин Владислав Игоревич
|
|
|
+**Дата завершения работы:** 22 июня 2026 г.
|
|
|
+**Ссылка на готовый сайт:** [http://vladeskd.beget.tech/](http://vladeskd.beget.tech/)
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
+**Конец отчета**
|
