War Tanks II - Тактическая танковая игра

Полноценная игра "War Tanks II" - тактическая танковая игра с продвинутым ИИ, системой тумана войны и ретро-стилистикой.

🎮 Основные системы

Игровой процесс

• Управление: WASD/стрелки (движение), мышь (прицеливание), Пробел (стрельба)
• Физика: Реалистичная инерция движения, замедленный поворот корпуса и башни.
• Прицеливание: Динамический прицел-перекрестие. Чем быстрее крутится башня, тем больше разлет и ниже точность.
• 3 типа танков: Tiger MK-II, Phantom X, Crusher 88 (разные характеристики)
• 3 карты: Desert Strike, Frozen Front, Urban Siege

Система тумана войны

• Двухуровневая видимость: внутренний радиус (240px) и внешний (336px)
• Плавный переход между радиусами через сетку 16×16px
• Автоматическое восстановление тумана через 3 секунды
• Умная система: противник убирает туман только когда виден игроку

Продвинутый ИИ противника

• Режим "атака": преследование и стрельба по игроку
• Режим "поиск": патрулирование и исследование последней известной позиции
• Реакция на потерю цели: переход в режим поиска с задержкой
• Адаптивное поведение: разные скорости поворота и движения

Система камеры

• Плавное следование за игроком с мертвой зоной
• Ограничения движения по границам карты
• Автоматическое масштабирование карты (187.5%)
• Поддержка перетаскивания фона для навигации

🎨 Интерфейс и стиль

Ретро-дизайн

• Пиксельный шрифт: Press Start 2P
• Адаптивный дизайн с градиентами и эффектами
• Анимации: перезарядка, здоровье, движение танков
• Визуальные эффекты: тени, свечение, переходы

Звуковое сопровождение

• Фоновая музыка: зацикленная тема
• Звуки интерфейса: наведение и выбор в меню
• Игровые звуки: выстрелы танков
• Автоматическое воспроизведение после первого взаимодействия

🔧 Технические особенности

Архитектура

• Чистый HTML/CSS/JS без внешних зависимостей
• Canvas для тумана войны с оптимизированным рендерингом
• Система событий с обработкой клавиатуры и мыши
• Модульная структура кода с разделением логики

Производительность

• Оптимизированный рендеринг тумана через Float32Array
• Эффективная система коллизий с проверкой расстояний
• Плавная анимация через requestAnimationFrame
• Умное обновление только измененных областей

Сохранение данных

• localStorage для настроек танков
• SessionStorage для временных данных
• Автоматическое восстановление настроек при загрузке

📁 Структура проекта

game_02/
├── index.html          # Ввод имени игрока
├── menu.html           # Главное меню
├── select.html         # Выбор танка и карты
├── play.html           # Игровой экран
├── app.js              # Основная игровая логика (1749 строк)
├── menu.css            # Стили интерфейса (780 строк)
├── audio/              # Звуковые файлы
│   ├── background-themes.mp3
│   ├── menu-hover.mp3
│   ├── menu-hover_2.mp3
│   ├── menu-select.mp3
│   └── tank-shot.wav
├── video/              # Видеофайлы (кат-сцены/брీఫинги)
│   ├── brifing_1_002.mp4
│   └── mission_complet_02.mp4
└── images/             # Игровые ресурсы
    ├── map-01.png      # Карта Desert Strike
    └── README.txt

🚀 Запуск и развертывание

Локальный запуск

1. Клонируйте репозиторий
2. Откройте директорию в терминале
3. Запустите локальный сервер (например, через расширение "Live Server" или npx serve .)
4. Откройте index.html в браузере
5. Игра готова к запуску!

Important

Из-за использования ES6 модулей игра не будет работать при прямом открытии файла через file://. Обязательно используйте локальный веб-сервер.

GitHub Pages

Проект полностью готов для развертывания на GitHub Pages:

• Все ресурсы используют относительные пути
• Нет внешних зависимостей
• Оптимизирован для статического хостинга

🎯 Игровые характеристики

Танки

• Tiger MK-II: Броня 5, Скорость 3, Урон 4, Дальность 2
• Phantom X: Броня 3, Скорость 5, Урон 3, Дальность 4
• Crusher 88: Броня 6, Скорость 2, Урон 5, Дальность 3

Карты

• Desert Strike: Открытая пустыня, минимальное укрытие
• Frozen Front: Ледяные переправы, среднее укрытие
• Urban Siege: Городские руины, плотное укрытие

🛠️ Технологии

• IDE: Cursor
• AI-помощник: GPT модели
• Платформа: GitHub Pages
• Языки: HTML5, CSS3, JavaScript ES6+
• API: Canvas 2D, Web Audio, LocalStorage

Версия 2.0 (Multiplayer) — НОВИНКА! 🚀

Теперь в War Tanks II можно сражаться с друзьями онлайн!

Основные фичи:

• Лобби: Список активных игр и создание своих комнат.
• Доступ: Вход по паролю или прямой ссылке.
• Real-time: Синхронизация на базе Supabase.
• PvP: Сражения 1 на 1 до первой победы.

Версия 2.1 (Физика и Прицел) 🎯

• Динамический прицел: Перекрестие расширяется при вращении башни и сходится за 0.5с при остановке.
• Точность: Разлет прицела напрямую влияет на разброс снарядов.
• Реализм: Скорость движения уменьшена в 2.5 раза, скорость поворота — в 3 раза.
• Баланс: Настроено время перезарядки (в 2 раза медленнее).

Версия 2.2 (HUD и Комнаты) 🕹️

• MK-Style HUD: Полоски здоровья и иконки игроков в верхних углах экрана.
• Синхронизация имен: В мультиплеере отображаются реальные имена обоих игроков.
• Удобство: Кнопка копирования ссылки на комнату для быстрого приглашения.
• Чистка: Автоматическое удаление комнат из списка после завершения игры или ухода хоста.

Версия 2.2.1 (Фиксы интерфейса) 🛠️

• Центрирование: HUD теперь выровнен по границам игрового поля (1024px).
• Чистка: Удален лишний текст "рра" из игрового экрана.

Версия 2.3 (Игровое поле и точность) 🎯

• HUD Перезарядки: Под полоской здоровья каждого игрока в HUD добавлена маленькая шкала перезарядки орудия.
• Улучшенная баллистика: Разброс в несведенном состоянии до 30 градусов (±15 градусов).🛡️
• Скорая башня: Скорость поворота башни увеличена до 45 град/с.⚡

Версия 2.4 (Меню и Унификация) 🛠️

• Унификация: Название игры исправлено на "WAR TANKS II" на всех экранах.
• Названия танков: Исправлены расхождения в названиях ("Phantom X", "Tiger MK-II", "Crusher 88").
• Рекорды: Реализован раздел "TOP COMMANDERS" с таблицей лидеров.
• Об авторах: Добавлен раздел "MISSION CONTROL" с информацией о разработчиках и технологиях.
• Навигация: Реализована бесшовная навигация между разделами меню с использованием хэшей URL.

Версия 2.5 (Автоматическая очистка) 🧹

• Beacon API: Использование fetch с keepalive для гарантированного закрытия комнаты при закрытии вкладки или браузера.
• Умная очистка: Система различает переход в бой (комната сохраняется) и выход из игры (комната закрывается).
• Актуальность: Список игр в лобби теперь самоочищается от "мертвых" сессий.

Версия 2.6 (Ручное управление сессиями) 🛠️

• Удаление комнат: Добавлена кнопка "×" в лобби для ручного закрытия комнат.
• Безопасность: Для удаления запароленных комнат требуется ввести корректный пароль.
• Подтверждение: Для публичных комнат добавлено окно подтверждения действия.

Версия 2.7 (Тактический туман войны) 🌫️

• Разделение обзора: Каждый игрок теперь видит только свою область тумана. Вражеский танк не раскрывает туман для игрока.
• Скрытие данных: Если враг находится в тумане (вне зоны видимости), его полоска здоровья в HUD становится полупрозрачной, а значение заменяется на "???".
• Стелс-механика: Игроки могут скрываться за пределами радиуса видимости друг друга, используя туман войны для тактических маневров.

Версия 2.8 (Исправление имени игрока) ✅

• Сохранение имени: Исправлена критическая ошибка, из-за которой имя игрока не сохранялось при входе в игру.
• Capture-фаза: Использован addEventListener с флагом capture: true для гарантированного выполнения до перехвата событий в app.js.
• Надежность: Добавлен дополнительный обработчик на кнопку для двойной защиты.
• Отладка: Добавлено логирование в консоль для проверки сохранения имени.

Версия 2.9 (Оптимизация Netcode) 🚀

• Throttling: Снижена частота отправки обновлений с 60 FPS до 10 раз/сек (каждые 100мс).
• Delta Compression: Отправка только изменившихся полей вместо полного состояния танка.
• Приоритизация: Критичные события (выстрелы) отправляются немедленно, позиция - по таймеру.
• Интерполяция: Плавное движение вражеского танка между редкими сетевыми обновлениями.
• Результат: Снижение трафика Realtime Messages в 12-20 раз (с ~1200 до ~60-100 сообщений/сек).

Версия 3.0 (Исправление идентификации игроков) 🔧

• Детерминированные ID: Заменена случайная генерация ID танков на детерминированную систему (хост=player1, гость=player2).
• Стабильные роли: Гарантировано, что роли игроков не меняются местами при старте игры.
• Правильная синхронизация: Исправлена обработка сетевых сообщений - каждый клиент теперь корректно идентифицирует противника.
• Правильные цвета: Исправлена логика назначения цветов - каждый игрок видит себя зеленым танком, а противника коричневым (независимо от роли хост/гость).
• Правильный HUD: Исправлена логика отображения HUD - каждый игрок видит себя слева (P1), а противника справа (P2), независимо от роли.
• Совместимость: Добавлена поддержка детерминированных ID для синглплеера (игрок=player1, AI=ai_enemy).
• Результат: Устранена критическая ошибка, при которой игроки менялись местами, цвета танков и HUD не соответствовали управлению, и второй игрок превращался в AI.

Версия 3.1 (WebRTC P2P Multiplay) 🌐

• WebRTC P2P: Внедрена система прямого соединения между игроками (Browser-to-Browser).
• Безлимитный геймплей: Игровые сообщения (позиция, выстрелы) передаются напрямую, минуя сервер и лимиты Supabase.
• Минимальная задержка: Пинг 10-50мс (в зависимости от удаленности игроков) против 100-300мс через сервер.
• Гибридная система: Supabase используется только для "сигнализации" (установки соединения) и списка комнат.
• Fallback: Автоматический переход на Supabase Broadcast, если P2P соединение не удалось установить (например, из-за корпоративных firewall).
• Настройка: В меню игры теперь можно выбрать предпочтительный режим сети.

Инструкция для настройки своего сервера (Supabase):

1. Создайте проект на Supabase.
2. Выполните SQL-запрос для создания таблиц:

-- Таблица комнат
create table rooms (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  name text not null,
  password text,
  has_password boolean default false,
  status text default 'active',
  host_name text,
  player2_name text
);

-- Таблица сигнализации для WebRTC
create table signaling (
  id uuid default gen_random_uuid() primary key,
  created_at timestamp with time zone default timezone('utc'::text, now()) not null,
  room_id uuid references rooms(id) on delete cascade,
  type text not null,
  data jsonb not null
);

-- Индексы и триггеры очистки (см. migration_webrtc.sql)

-- Включение Realtime
alter publication supabase_realtime add table rooms;
alter publication supabase_realtime add table signaling;

3. Включите Broadcast и Presence в настройках Realtime.
4. Укажите свои SUPABASE_URL и SUPABASE_KEY в файле js/supabase-config.js.

Деплой

Проект полностью готов для деплоя на Vercel как статический сайт.

📈 Статус разработки

✅ Версия 1.0 - ЗАВЕРШЕНА

• Полноценная однопользовательская игра

• Все основные системы реализованы

• Готова к развертыванию

• Онлайн сервер для управления игровыми сессиями

---

Проект полностью готов к использованию и развертыванию!