A browser-based implementation of the classic Battleship game, where you play against an AI opponent.
Check technical blog here : From Prompt to Play: Battleship Game Tutorial Using Amazon Q, React, and TypeScript
- Classic 10x10 Battleship grid
- Standard ship sizes (5, 4, 3, 3, 2)
- Manual ship placement with horizontal/vertical orientation
- AI opponent with smart targeting logic
- Real-time game state updates without page reloads
- Victory/defeat modal when game ends
- TypeScript
- React
- CSS for styling
-
Place your ships on your board by:
- Selecting a ship from the list
- Choosing horizontal or vertical orientation
- Clicking on your board to place the ship
-
Once all ships are placed, click "Start Game"
-
Take turns with the AI:
- Click on the enemy board to fire at a position
- The AI will automatically take its turn after you
-
The game ends when all ships of one player are sunk
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/yourusername/battleship-game.git
- Navigate to the project directory
cd battleship-game
- Install dependencies
npm install
- Start the development server
npm start
- Open your browser and navigate to
http://localhost:3000
-
Each player has a fleet of 5 ships:
- Carrier (5 cells)
- Battleship (4 cells)
- Cruiser (3 cells)
- Submarine (3 cells)
- Destroyer (2 cells)
-
Ships cannot overlap or be placed diagonally
-
Ships cannot be moved once placed
-
Players take turns firing at the opponent's grid
-
A hit is marked in red, a miss in blue
-
A ship is sunk when all its cells are hit
-
The game ends when all ships of one player are sunk
- Ship placement screen with click-to-place
- Real-time feedback on hits and misses and "You sunk my Battleship!" messages.
- End-of-game modal with reset option.
This project is licensed under the MIT License - see the LICENSE file for details.