Игра Морской бой Battleship Game (Next.js)

Игра «Морской бой» (Next.js)
Это современная реализация классической игры "Морской бой", созданная с помощью Next.js, React, TypeScript и Tailwind CSS.

Описание игры
"Морской бой" - это стратегическая игра для двух игроков, где каждый игрок размещает флот кораблей на сетке 10x10, а затем поочередно пытается угадать расположение кораблей соперника. Первый игрок, потопивший все корабли соперника, побеждает.

Функции
Современный пользовательский интерфейс: Адаптивный, чистый интерфейс с использованием Tailwind CSS.

Размещение кораблей: Размещайте корабли разных размеров (включая 6-палубные, 5-палубные, 4-палубные, 3-палубные, 2-палубные и однопалубные корабли) на своем поле. Корабли не могут прикасаться друг к другу, даже по диагонали.

Режимы игры: Играйте против бота (ИИ) или локально против другого человека (режим «горячего места»).

Пошаговая игра: Игроки поочередно атакуют доску соперника. Попадания и промахи сказываются визуально.

Эффекты победы и поражения: После завершения игры отображается анимация конфетти и сообщения («ВЫ ВЫГРАЛИ!» или «ВЫ ВЫГРАЛИ!»). Эффект можно выключить вручную или исчезнет через несколько секунд.

Счетчик бревна: Отображает количество оставшихся сегментов кораблей (бревен) для каждого игрока.

Переключатель ориентации: Выберите расположение кораблей вертикально или горизонтально.

Вариант перезапуска: Начните новую игру в любое время.

Как играть
Выбор режима игры: Выберите игру против бота или другого человека.

Размещение кораблей Выберите корабль и разместите его на своей доске. Для переключения между вертикальным и горизонтальным расположением используйте кнопку ориентации. Корабли не могут быть рядом друг с другом.

Начало битвы: После того как все корабли размещены, начинается фаза атаки.

Нажмите на доску соперника, чтобы атаковать. Игра обозначает попадание (X) и промахи (•).

Победа или поражение: Игра заканчивается, когда все корабли одного игрока утоплены. Появится праздничный или пораженный эффект.

Перезапуск: Нажмите кнопку перезапуска, чтобы играть снова.

Использованные технологии
Next.js (App Router)

React (с хуками)

TypeScript

Tailwind CSS

Демо
Играйте в игру онлайн: battle-ship-next-js.vercel.app