Project-BattleShip

🚢 BattleShip

A fully playable Battleship game built in the browser.
Drag and drop your fleet, randomize your formation, then battle a CPU opponent — all powered by OOP JavaScript, Webpack, and tested with Jest.

🎮 PLAY NOW

---

✨ Features

• 🖱️ Drag & Drop Placement: Drag ships from the fleet panel onto your board — rotate between horizontal and vertical with one click.
• 🎲 Randomize Fleet: Instantly place all ships in valid random positions with a single button.
• 🤖 CPU Opponent: The computer attacks with a random valid move each turn, never hitting the same square twice.
• 💬 Dynamic Messages: Hit and miss messages are pulled randomly from a pool — each battle feels different.
• 🔄 Soft Reset: Full game reset without reloading the page — restores the board, UI, and drag & drop in one click.
• 🎨 Naval Dark UI: Neon blue/red on deep navy with glowing cells, hit/miss markers, and ship counters per side.

---

🧠 Architecture

The game is split into three independent classes and a set of UI modules, keeping game logic completely separate from the DOM.

Ship — Tracks damage

hit()        // increments hits, checks if sunk
isSunk()     // returns true when hits >= length

Gameboard — Manages the 10×10 grid

placeShip(length, row, col, isVertical)  // places a ship on the board
receiveAttack(row, col)                  // returns "hit", "miss", or "already_attacked"
canPlaceShip(...)                        // validates position + 1-cell gap between ships
placeShipsRandomly()                     // fills the board with a valid random fleet
areAllShipsSunk()                        // checks win condition

Player — Human or CPU

attack(enemyBoard, row, col)   // delegates to receiveAttack
randomAttack(enemyBoard)       // loops until a valid square is found

Drag & Drop (dragDrop.js)

Ships are rendered as draggable elements. On drop, canPlaceShip() validates the target square before committing — invalid placements are silently rejected.

---

📁 Project Structure

Project-BattleShip/
├── src/
│   ├── classes/
│   │   ├── Ship.js           # Ship class — hit tracking & sunk status
│   │   ├── Gameboard.js      # Board logic — placement, attacks, validation
│   │   └── Player.js         # Player & CPU logic
│   ├── dom.js                # Renders boards & updates status display
│   ├── dragDrop.js           # Drag & drop ship placement logic
│   ├── messages.js           # Random hit/miss message pools
│   ├── index.js              # App entry — event listeners & game loop
│   ├── index.html            # HTML shell
│   └── style.css             # Dark naval theme
├── tests/
│   ├── Ship.test.js
│   ├── Gameboard.test.js
│   └── Player.test.js
├── webpack.config.js
├── babel.config.js
├── package.json
└── README.md

---

🧪 Tests

Unit tests cover all three core classes using Jest:

Class	What's tested
Ship	Hit tracking, sunk detection
Gameboard	Ship placement, hit/miss recording, win condition
Player	Gameboard ownership, CPU random valid move

Run them with:

npm test

---

🚀 Getting Started

1. Clone the repository:

   git clone https://github.com/AndrewTechTips/Project-BattleShip.git
   cd Project-BattleShip

2. Install dependencies:

   npm install

3. Start the dev server:

   npm start

---

📬 Contact

• LinkedIn: Andrei Condrea
• Email: condrea.andrey777@gmail.com

"All ships are visible on the radar — except the ones that matter." 🎯