Sea Battle | HTML5 Battleship Game on a Radar Scope

SEA BATTLE – the classic paper battleship game played on a CRT radar scope. Deploy your fleet on the grid, sweep the enemy waters and sink all ten hulls before the enemy sinks yours. Adaptive: Mobile, Tablet, Desktop.

How to play: Place your ten hulls on your own grid – click to set, R to rotate, or hit AUTO to scatter the whole fleet at once. Press ENGAGE and start firing at the enemy grid. A hit earns you another shot; a sunk hull automatically marks the water around it, because ships can never touch. Lose your last hull and the match is over.

Used technology: HTML5, CSS3, JavaScript (no libraries, no dependencies)

Compatible Browsers: Firefox, Safari, Opera, Chrome, Edge

Features

• Radar scope aesthetic – every graphic is drawn in code on the HTML5 Canvas, no sprite images
• Two grids side by side: your own waters and the enemy’s, each with its own sweeping radar beam
• Cinematic radar sweep – the beam fades up, carries one full turn around the scope, fades out and rests, lighting up contacts as it passes
• Two ways to draw a hull, switchable in-game: detailed vessel profiles (bow, bridge, funnel, twin gun mounts) or plain radar returns
• Full paper rules: 10×10 grid, a fleet of 1×4, 2×3, 3×2 and 4×1 hulls, ships may never touch – not even diagonally
• Hunting AI – searches on a checkerboard pattern no hull can hide from, then locks onto a wounded ship and works along its axis
• Manual deployment with rotation and pick-up-to-move, or one-click auto-scatter
• Animated torpedo runs with wake, bubbles and a launch flash, plus detonation rings and spark bursts
• Live telemetry: shots, hits, accuracy and hulls sunk, with a scrolling command log
• Escalating alarms as your fleet thins out – one warning when three hulls remain, a second pulse underneath at the last one
• Adjustable scope: sweep speed, gain and grid brightness
• Sound design: recorded gun, splash, explosion, reload, sonar ping, bell and underwater ambience, plus synthesized interface clicks
• Adaptive: Mobile, Tablet, Desktop – the layout rebuilds itself for each, and the panels never shift the boards
• Mouse, Keyboard and Touch controls – on touch the first tap aims and the second fires, so a scroll never costs you a shot
• Clean, separated HTML / CSS / JS – no dependencies, easy to customize

File Included

• Game source: HTML, CSS and JS files
• Documentation
• Sound effects and ambience MP3