Морський бій 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