Ship Battle

Seele01-Flash
By
Ship Battle is a classic naval warfare strategy game where you strategically place your fleet and take turns bombing enemy positions. Experience the thrill of tactical combat as you try to sink the opposing navy before they destroy yours.

Prompt

MODEL: Seele01-Flash
Please use Three.js to generate a **mobile-first game** with the theme "Ship Battle" (Classic Naval Strategy). Please read the following detailed game design requirements first, and then generate the code accordingly: ### 1. Assets & Environment * **Visual Style:** Low-poly, stylized 3D aesthetic. * **The Ocean:** Create a dynamic ocean surface using a plane geometry with a custom shader or vertex displacement to simulate gentle waves. The water color should be deep navy blue (`0x001e42`). * **The Grid:** A 10x10 grid projected slightly above the water surface. Grid lines should be semi-transparent white. * **Ships:** Use simple geometric compositions (boxes/cylinders) to represent 5 distinct ship types with varying lengths (Carrier: 5, Battleship: 4, Cruiser: 3, Submarine: 3, Destroyer: 2). Player ships should be grey/blue; Enemy ships (revealed upon destruction) should be dark red/black. * **Particles & Effects:** * **Hit:** Orange/Yellow particle explosion + smoke plume rising from the cell. * **Miss:** White water splash particle effect. * **Projectile:** A simple projectile arc or a low-poly plane model flying over (as seen in reference) to drop the bomb when an attack is made. * **Performance:** Use `InstancedMesh` for grid cells and simple particles to maintain 60FPS on mobile devices. ### 2. Audio Requirements * **BGM:** A suspenseful, rhythmic military-style drum march (low volume loop). * **SFX:** * **Selection:** Mechanical "click" or radar "blip" sound. * **Fire:** Cannon blast or aircraft swooping sound. * **Hit:** Heavy metallic explosion and crumbling sound. * **Miss:** Water splash/plop sound. * **Sinking:** A long, groaning metal sound followed by a bubble effect. ### 3. Gameplay Loop * **State 1: Deployment Phase:** The player sees their own 10x10 grid. They can drag and drop ships onto the grid. Include a "Rotate" button to toggle ship orientation and a "Auto-Place" button for quick setup. * **State 2: Battle Phase (Turn-Based):** * **Player Turn:** The camera switches or pans to the "Enemy Radar Grid" (fog of war). Player taps a cell to fire. * **Animation:** A projectile flies to the target -> Hit or Miss is registered -> Board updates marker (Red peg for hit, White peg for miss). * **Enemy Turn:** Simple AI randomly selects a coordinate (or hunts adjacent cells if a hit was scored previously) and fires at the Player's grid. * **State 3: Victory/Defeat:** The game ends when all ships of one side are sunk. Display a "Mission Accomplished" or "Fleet Destroyed" modal with a "Replay" button. ### 4. Mobile Controls & Interaction * **Orientation:** **Portrait Mode** is preferred to display the Enemy Grid (Target) on the top half and Player Grid (Status) on the bottom half of the screen simultaneously, or use a toggle button to switch views. * **Touch Controls:** * **Raycaster:** Implement precise Raycasting for `touchstart` events to detect grid cell selection. * **Drag & Drop:** For the deployment phase, ensure ships snap to grid cells. * **UI/UX:** * Large, thumb-friendly HTML overlay buttons (minimum 44x44px clickable area) for "Rotate Ship", "Fire", and "Reset". * **Haptic Feedback:** Trigger `navigator.vibrate(200)` on a successful Hit and `navigator.vibrate(50)` on a Miss (if supported). * **Camera Shake:** Add a slight camera shake effect (screenshake) when a ship is hit to enhance impact. Do not ask for clarification. Do not request confirmation. Directly execute the generation task based on the given instructions.

Game Introduction

About the Game

Ship Battle is an engaging online strategy game that brings the classic battleship experience to your browser. This turn-based naval warfare game challenges players to outsmart their opponents through strategic ship placement and calculated bombing runs. With its simple yet addictive gameplay mechanics, Ship Battle offers hours of tactical entertainment for strategy game enthusiasts.

The game features intuitive mouse controls and a clean grid-based interface that makes it accessible to players of all skill levels. Whether you're a seasoned strategist or new to naval combat games, Ship Battle provides an exciting and competitive gaming experience.

Core Features

Strategic Ship Placement

The key to victory lies in clever ship positioning. Before the battle begins, you must strategically place your naval fleet on the grid. Consider different formations and hiding spots to maximize your chances of survival while making it difficult for enemies to locate your vessels.

Turn-Based Combat System

Engage in tactical bombing runs where each move counts. Take turns with your opponent to drop bombs on suspected enemy positions. Use logic, deduction, and strategic thinking to efficiently locate and destroy the enemy fleet.

Multiple Enemy Encounters

Face various opponents with different AI patterns and difficulty levels. Each enemy brings unique challenges, requiring you to adapt your strategy and bombing patterns to achieve victory.

High Score Competition

Track your performance and compete for high scores. The game rewards efficient gameplay, encouraging players to sink enemy fleets with minimal moves and maximum precision.

Browser-Based Convenience

Enjoy instant access without downloads or installations. Ship Battle runs smoothly in any modern web browser, making it perfect for quick gaming sessions during breaks or extended strategic battles.

Game Mechanics

Fleet Management

Start each game by positioning your ships on the battlefield grid. Consider ship sizes, orientations, and spacing to create an optimal defensive formation that's difficult for enemies to predict and destroy.

Bombing Strategy

Develop effective bombing patterns to systematically search for enemy vessels. Use hits and misses to narrow down possible ship locations and plan your next moves accordingly.

Victory Conditions

Win by being the first to completely destroy the enemy fleet. Speed and efficiency matter - the fewer moves you use, the higher your score will be.

Operation Guide

Mouse Controls : All game interactions are handled through simple mouse clicks

Ship Placement Phase : - Click and drag to position your ships on the grid - Rotate ships by clicking on them - Ensure all vessels are properly placed before starting combat

Combat Phase : - Click on enemy grid squares to drop bombs - Observe hit and miss indicators to plan your next moves - Continue bombing until all enemy ships are destroyed

Strategic Tips : - Avoid predictable placement patterns - Use systematic bombing approaches - Pay attention to ship size patterns when you score hits

Why Play Ship Battle

Ship Battle offers the perfect blend of strategy and excitement that appeals to both casual and serious gamers. The game's turn-based nature allows for thoughtful decision-making, while the competitive element keeps you engaged and coming back for more.

This classic naval warfare concept has been enjoyed by generations of players, and this online version maintains all the strategic depth while adding modern conveniences like high score tracking and smooth browser gameplay. It's an ideal choice for players who enjoy:

  • Strategic thinking and planning
  • Turn-based tactical combat
  • Classic board game experiences in digital format
  • Quick, engaging gaming sessions
  • Competitive score-based challenges

The game's accessibility means you can start playing immediately, while its strategic depth ensures long-term replay value. Whether you're looking for a mental challenge or just want to enjoy some nostalgic battleship action, Ship Battle delivers an authentic and entertaining experience.

Frequently Asked Questions (FAQ)