Гра «Морський бій» (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
Це сучасна реалізація класичної гри «Морський бій», створена за допомогою 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