Battleship Game (Next.js)
Sea Battle Game (Next.js)
This is a modern implementation of the classic Sea Battle game, built using Next.js, React, TypeScript, and Tailwind CSS.
Game Description
Sea Battle is a two-player strategy game where each player places a fleet of ships on a 10x10 grid and then takes turns trying to guess the location of their opponent's ships. The first player to sink all of their opponent's ships wins.
Features
Modern UI: Responsive, clean interface using Tailwind CSS.
Ship Placement: Place ships of various sizes (including 6-deck, 5-deck, 4-deck, 3-deck, 2-deck, and single-deck ships) on your board. Ships cannot touch each other, even diagonally.
Game Modes: Play against a bot (AI) or locally against another human (hot spot mode).
Turn-based game: Players take turns attacking the opponent's board. Hits and misses are visually indicated.
Victory and defeat effects: A confetti animation and message ("YOU WON!" or "YOU LOST!") are displayed when the game is over. The effect can be turned off manually or it will disappear after a few seconds.
Deck counter: Displays the number of ship segments (decks) remaining for each player.
Orientation switch: Choose to place ships vertically or horizontally.
Restart option: Start a new game at any time.
How to play
Select game mode: Choose to play against a bot or another human.
Ship placement: Select a ship and place it on your board. Use the orientation button to switch between vertical and horizontal placement. Ships cannot be next to each other.
Battle Start: Once all ships are placed, the attack phase begins.
Take turns: Click on the opponent's board to attack. The game will mark hits (X) and misses (•).
Win or lose: The game ends when all of one player's ships are sunk. A celebration or defeat effect will appear.
Restart: Click the restart button to play again.
Technologies Used
Next.js (App Router)
React (with hooks)
TypeScript
Tailwind CSS
Demo
Play the game online: battle-ship-next-js.vercel.app
This is a modern implementation of the classic Sea Battle game, built using Next.js, React, TypeScript, and Tailwind CSS.
Game Description
Sea Battle is a two-player strategy game where each player places a fleet of ships on a 10x10 grid and then takes turns trying to guess the location of their opponent's ships. The first player to sink all of their opponent's ships wins.
Features
Modern UI: Responsive, clean interface using Tailwind CSS.
Ship Placement: Place ships of various sizes (including 6-deck, 5-deck, 4-deck, 3-deck, 2-deck, and single-deck ships) on your board. Ships cannot touch each other, even diagonally.
Game Modes: Play against a bot (AI) or locally against another human (hot spot mode).
Turn-based game: Players take turns attacking the opponent's board. Hits and misses are visually indicated.
Victory and defeat effects: A confetti animation and message ("YOU WON!" or "YOU LOST!") are displayed when the game is over. The effect can be turned off manually or it will disappear after a few seconds.
Deck counter: Displays the number of ship segments (decks) remaining for each player.
Orientation switch: Choose to place ships vertically or horizontally.
Restart option: Start a new game at any time.
How to play
Select game mode: Choose to play against a bot or another human.
Ship placement: Select a ship and place it on your board. Use the orientation button to switch between vertical and horizontal placement. Ships cannot be next to each other.
Battle Start: Once all ships are placed, the attack phase begins.
Take turns: Click on the opponent's board to attack. The game will mark hits (X) and misses (•).
Win or lose: The game ends when all of one player's ships are sunk. A celebration or defeat effect will appear.
Restart: Click the restart button to play again.
Technologies Used
Next.js (App Router)
React (with hooks)
TypeScript
Tailwind CSS
Demo
Play the game online: battle-ship-next-js.vercel.app
Lvov 
Available for hire
Offer work