Battleship Game vs Computer – Free HTML, CSS & JS Snippet

Battleship is a game of hidden information: two fleets on two grids, and each player only sees the shots they have fired. This version is a full game against a computer captain, not just a ship-finding puzzle. You place your own fleet, take turns firing with an opponent that really hunts you, and can use special weapons. It has 12 levels, a Daily Fleet with a streak, stars, saved progress and synthesized sound, in plain HTML, CSS and JavaScript with no libraries, images or audio files.

Two fleets, one model

Each side is a small object made by makeSide(): a grid of ship indexes (occ), a grid of shots fired at it (fired: 0 untouched, 1 miss, 2 hit) and a list of ships with their cells, hits and sunk flag. Your side and the enemy side use exactly the same functions, so resolve() can fire at either one, and the win test is the same allSunk() call. The boards themselves are plain CSS grids with an animated water background, and every ship is one absolutely positioned hull element sized in percentages of the board, so the same code draws an 8x8 and a 10x10 grid.

Placing your fleet

Your fleet starts randomly placed, and you can rearrange it: choose a ship in the dock, hover the grid to see a ghost hull that turns red if it would overlap another ship, and click to place it. R or a right click rotates, clicking a placed ship picks it up again, and Randomize and Clear are one click away. Ships are clamped so they always stay on the board. The enemy fleet is placed with the same randomFleet(), and for the Daily Fleet it uses a seeded random generator (mulberry32), so every player gets the same enemy layout on the same day.

An enemy captain with four levels of skill

aiPick(skill) is the opponent. Skill 0 fires at random and follows up a hit. Skill 1 hunts on a checkerboard pattern (every ship is at least two cells long, so half the cells are enough to find it) and extends lines of hits. Skills 2 and 3 use a probability map: for every ship still afloat, the AI counts every position and direction where it could still fit given the misses and the sunk ships, adds that weight to each open cell, and gives a big bonus to placements that cover a known hit. Skill 2 picks randomly among the three best cells, skill 3 always takes the best one. The AI only uses information a real player would have: hits, misses and which ships have been sunk.

Special weapons that cost a turn

Sonar pings a cell and shows how many hidden ship parts are within one square, without firing. The cross strike fires at a cell and its four neighbours in one turn. Both are limited per level, and the later levels give you fewer of them, down to none on the final level. Hovering previews exactly which cells a weapon will touch.

Levels, stars and the daily fleet

The LEVELS array holds 12 levels in four tiers (Recruit, Officer, Captain, Admiral) with the grid size, the enemy skill, the number of sonar pings and strikes, and two par values. Three stars for sinking the enemy fleet within the first par, two within the second, one for any win. Winning a level unlocks the next. Stars, best shot counts and the Daily Fleet streak are saved to localStorage inside try/catch, so the game also runs in a sandboxed iframe.

Feel

Shells splash with a ripple, hits explode into flames and turn into smoke when the ship sinks, your panel shakes when the enemy hits you, and a battle log tells you what just happened. Explosions and splashes are generated as filtered noise with the Web Audio API. The whole game scales to the space it is given, and on phones the boards stack and the page scrolls.