Battleship Game

A browser-based implementation of the classic Battleship game, built as part of The Odin Project's JavaScript curriculum. This project demonstrates object-oriented programming principles, test-driven development, and DOM manipulation.

🎮 Game Features

• Single Player vs AI: Play against a computer opponent with random move generation
• Two Player Mode: Pass-and-play functionality for local multiplayer
• Interactive Ship Placement: Click to place ships manually or use random placement
• Visual Feedback: Animations and color-coded feedback for hits, misses, and sunk ships
• Responsive Design: Clean, ocean-themed interface that works on various screen sizes

🚀 Live Demo

Play the game here (Update with your actual GitHub Pages URL)

🛠️ Technologies Used

• JavaScript (ES6+): Core game logic and DOM manipulation
• HTML5: Semantic markup structure
• CSS3: Styling with animations and responsive design
• Webpack: Module bundling and build process
• Jest: Unit testing framework
• ESLint: Code linting and style enforcement
• Babel: JavaScript transpilation

📋 Game Rules

1. Each player has a 10x10 grid to place their fleet of ships
2. Fleet consists of:
   • 1 Carrier (5 squares)
   • 1 Battleship (4 squares)
   • 2 Cruisers (3 squares each)
   • 1 Destroyer (2 squares)
3. Ships can be placed horizontally or vertically
4. Players take turns attacking coordinates on the opponent's grid
5. First player to sink all enemy ships wins

🎯 Installation & Setup

Prerequisites

• Node.js (v14 or higher)
• npm

Local Development

1. Clone the repository

   git clone https://github.com/your-username/battle-ship.git
   cd battle-ship

2. Install dependencies

   npm install

3. Start development server

   npm start

   The game will open in your browser at http://localhost:8080

4. Run tests

   npm test

5. Build for production

   npm run build

🏗️ Project Structure

battle-ship/
├── src/
│   └── myComponents/
│       ├── classes/
│       │   ├── shipClass.js          # Ship object with hit/sunk logic
│       │   ├── gameBoardClass.js     # Game board management
│       │   └── playerClass.js        # Player and AI logic
│       ├── display/
│       │   └── display.js            # DOM manipulation and UI
│       ├── test/
│       │   ├── shipClass.test.js     # Ship class tests
│       │   ├── gameBoardClass.test.js # GameBoard tests
│       │   └── playerClass.test.js   # Player class tests
│       ├── images/                   # Game assets
│       ├── style.css                 # Main stylesheet
│       ├── gameLoop.js              # Game flow control
│       ├── index.html               # HTML template
│       └── index.js                 # Entry point
├── dist/                            # Built files
├── webpack.common.js                # Webpack base config
├── webpack.dev.js                   # Development config
├── webpack.prod.js                  # Production config
└── package.json

🧪 Testing

The project uses Test-Driven Development (TDD) with Jest. Tests cover:

• Ship Class: Hit detection, sinking logic
• GameBoard Class: Ship placement, attack handling, win conditions
• Player Class: Turn management, AI behavior

Run tests with:

npm test

🎨 Key Implementation Details

Object-Oriented Design

• Ship Class: Manages individual ship state (hits, sunk status)
• GameBoard Class: Handles ship placement, attack processing, and board state
• Player Class: Manages player actions, turns, and AI logic

AI Implementation

• Random coordinate selection from available moves
• Prevents duplicate attacks by maintaining a list of possible coordinates
• Simple but effective opponent for single-player mode

DOM Interaction

• Dynamic board generation and rendering
• Event-driven gameplay with custom events
• Smooth animations for game state changes
• Responsive design adapting to different screen sizes

🔧 Development Scripts

• npm start: Start development server with hot reload
• npm test: Run test suite in watch mode
• npm run build: Create production build
• npm run push: Deploy to GitHub Pages

📚 Learning Objectives Met

This project demonstrates mastery of:

• ✅ Test-Driven Development: Comprehensive test coverage for core logic
• ✅ Object-Oriented Programming: Clean class structure and encapsulation
• ✅ DOM Manipulation: Dynamic UI updates without frameworks
• ✅ Event-Driven Programming: Custom events and user interactions
• ✅ Module Bundling: Webpack configuration and optimization
• ✅ Code Quality: ESLint configuration and consistent style

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is part of The Odin Project curriculum and is available under the ISC License.

🙏 Acknowledgments

• The Odin Project for the excellent curriculum
• Classic Battleship game for inspiration
• Background image generated with DALL-E

---

Note: This project was built as a learning exercise. The focus is on demonstrating JavaScript fundamentals, testing practices, and clean code architecture rather than advanced game features.