A React Native implementation of the classic Battleship game. The player fires at a 10x10 board trying to sink all enemy ships.
Note: built with the help of the AI Agent. See the prompts used in the promt.txt file.
battleship.demo.mov
- The computer has positioned 5 ships on a 10x10 board
- Ships are placed horizontally or vertically without overlapping
- The player fires at board positions to find and sink ships
- Each shot results in a "hit" (red) or "miss" (gray)
- When all tiles of a ship are hit, the ship is sunk
- The game ends when all ships are sunk
| Ship | Size |
|---|---|
| Carrier | 5 |
| Battleship | 4 |
| Cruiser | 3 |
| Submarine | 3 |
| Destroyer | 2 |
- React Native - Mobile framework
- TypeScript - Type safety
- Redux Toolkit - State management
- React Native Safe Area Context - Safe area handling
src/
├── App.tsx # Main app entry point
├── assets/ # Game images (ships, hit/miss icons)
├── components/
│ ├── board/ # 10x10 grid of cells
│ ├── cell/ # Individual board cell
│ ├── columns-panel/ # Column labels (A-J)
│ ├── game-board/ # Board container with labels
│ ├── game-content/ # Main game layout
│ ├── game-stats/ # Stats display (shots, hits, sunk)
│ ├── header/ # Game header with title and stats
│ ├── rows-panel/ # Row labels (1-10)
│ ├── ship-status/ # Single ship status display
│ └── ship-status-panel/ # Enemy fleet status panel
├── data/
│ └── ships.ts # Ship configuration and layout
├── store/
│ ├── hooks/ # Typed Redux hooks
│ ├── index.ts # Store configuration
│ └── slices/game/
│ ├── helpers/ # Game logic helpers
│ ├── index.ts # Game slice (actions, reducer)
│ └── selectors.ts # Game state selectors
├── theme/
│ └── colors.ts # Color constants
└── types/
└── index.ts # TypeScript type definitions
Make sure you have completed the React Native Environment Setup.
# Install dependencies
npm install
# iOS only: Install CocoaPods
cd ios && pod install && cd ..# Start Metro bundler
npm start
# Run on iOS
npm run ios
# Run on Android
npm run android- Responsive layout (portrait and landscape modes)
- Visual hit/miss feedback with icons
- Ship status tracking panel
- Game statistics (shots, hits, ships sunk)
- Victory screen with play again option
The game displays a 10x10 grid where players can tap to fire. The right panel (landscape) or bottom section (portrait) shows the status of enemy ships.
This project is private and confidential.