# Battleship

Classic Battleship against the computer, in the browser. Plain HTML, CSS and JavaScript: no build step, no dependencies, no asset files.

## Run it

Open `index.html` in any modern browser. It also works straight from `file://`. You can serve the folder instead if you like:

```sh
python3 -m http.server 8000   # then visit http://localhost:8000
```

## How to play

1. **Deploy your fleet** on the left grid: Carrier (5), Battleship (4), Cruiser (3), Submarine (3), Destroyer (2).
   - **Drag** a ship from the dock onto the grid (mouse or touch). You can also **tap a ship** in the dock and then tap a cell. The next ship is selected automatically, so you can place the whole fleet with five taps.
   - **Rotate** with the Rotate button, the <kbd>R</kbd> key (this also works mid-drag) or a right-click on the grid.
   - **Tap a placed ship** to rotate it where it sits, or **drag** it to a new spot. Tapping a placed ship in the dock picks it back up.
   - **Random** deploys the whole fleet for you and **Clear** starts over.
2. Press **Start battle**. You and the computer take turns firing one shot each. Click or tap a cell in *Enemy waters*. You can also use the arrow keys and Enter.
3. Hits burn, misses splash, and a sunk ship is announced and revealed. The fleet lists show what's left on each side, and the computer's last shot is outlined on your grid.
4. Sink all five enemy ships to win. The end screen shows your shots, hits and accuracy, and **Play again** starts a new game.

## Computer difficulty

Choose it from the dropdown in the header. The setting is saved and takes effect when the next battle starts.

| Level  | Strategy | Avg. shots to sink your fleet* |
|--------|----------|------|
| Easy   | Random shots; follows up on hits only some of the time | ~66 |
| Normal | Hunt/target: checkerboard hunting based on the smallest ship still afloat, then probes around hits and follows the line once two hits align | ~50 |
| Hard   | Probability density: each turn it counts every way the remaining ships could still fit, weights placements through unresolved hits heavily, and fires at the likeliest cell | ~44 |

\*Measured over 400 simulated games per level.

As in the board game, a sunk ship is announced, so the computer knows which cells it occupied.

## Features

- Responsive layout. On desktop the two grids sit side by side. On phones the enemy grid comes first and your own grid shrinks next to your fleet status.
- Pointer Events drive both mouse and touch dragging, with live green/red placement previews that snap onto the grid.
- Animations for targeting reticles, splash ripples, explosions, board shake, sinking ships, toasts and confetti. They are reduced when the OS asks for reduced motion.
- Sound effects are synthesized with the Web Audio API, and the mute button remembers your choice. Phones that support it vibrate on hits.
- A turn indicator shows whose turn it is, and a log line reports every shot.

## Files

```
index.html      markup
css/style.css   all styling and animation
js/audio.js     Web Audio sound effects (window.Sfx)
js/ai.js        computer opponent (window.createAI)
js/game.js      game state, rendering, input and turn flow
```