Battleship Game

Overview

A digital replacement for a physical Battleship pegboard. Each player opens this application on their own device. There is no network connection required. Players communicate their shots verbally (e.g., "B5", "Hit!"), and use the web interface to track their own ships and the shots they've fired at their opponent.

Game Flow & Features

1. Setup Phase

   • The player selects the board size using a slider (minimum 10x10, up to 20x20).
   • The fleet size scales dynamically based on the chosen board size.
   • Ship Formula: multiplier = Math.max(1, Math.floor((size * size) / 100))
     • Carrier (Size 5): 1 * multiplier
     • Battleship (Size 4): 1 * multiplier
     • Destroyer (Size 3): 1 * multiplier
     • Submarine (Size 3): 1 * multiplier
     • Patrol Boat (Size 2): 1 * multiplier

2. Ship Placement Phase

   • Manual Placement: Hover over the grid to preview ship positions. Left-click to deploy.
   • Rotation: Right-click anywhere on the board during placement to toggle between horizontal and vertical orientation.
   • Auto Place Remaining: Instantly deploy all unplaced ships randomly across the board.
   • Undo: Instantly pick up the last placed ship to reposition it.
   • Reset Board: Clear the board entirely with a confirmation modal.
   • Spacing Rules Enforced: Ships cannot touch each other. The game strictly enforces a minimum 1-cell buffer (including diagonals) between all ships, for both manual and auto placement.

3. Battle Phase

   • The screen presents two distinct radars:
     1. Your Fleet (Own Board): Displays your fleet. Track your opponent's shots here:
        • Click an empty water cell to record a Miss (Blue). Click again to clear.
        • Click one of your ship cells to record a Hit (Orange). Click again to clear.
     2. Target Radar (Opponent's Board): A blank radar to track the shots you fire:
        • Left Click: Places a Blue Circle (Miss). Left click again to clear it.
        • Right Click: Places an Orange Circle (Hit). Right click again to clear it.
   • Both boards feature coordinate labels (e.g., A-J, 1-10) for easy verbal communication.
   • The game continues until a player's entire fleet is sunk!

Technical Details

• Tech Stack: HTML5, CSS3 (Tailwind CSS 3.4 for styling), and Vanilla JavaScript.
• UI/UX: Features a highly responsive, premium glassmorphism design with fluid micro-animations.
• State Management: Runs entirely client-side as an in-memory state-tracker. No backend server or network connection required.

📸 Screenshots