A fully playable Battleship game, built entirely in HTML and CSS. Eight columns. Eight rows. Five ships hiding in the grid. Fire your torpedoes and sink them all. Every shot counts.
This work uses custom HTML and CSS formatting. For the intended experience, please enable Creator's Style (or ensure workskins are turned on in your AO3 preferences). The game board, fleet status panel, and hit/miss indicators are all part of the work itself.
This work is interactive — it's not a fic you read passively, it's a game you play. It's built entirely out of HTML disclosure elements, with no JavaScript whatsoever. That means:
• It works in any browser, on desktop or mobile
• Your progress isn't saved — refreshing the page resets everything
• Click a cell to fire a torpedo. A • means you missed. A ✕ means you hit something
• The fleet status panel at the bottom updates automatically as you sink each ship
• Sink all five ships to winFive ships. Sixty-four squares. Good luck, Admiral.
(See the end of the work for more notes.)
⚓ BATTLESHIP ⚓
Click a cell to fire a torpedo · Sink all five ships to win
| A | B | C | D | E | F | G | H | |
|---|---|---|---|---|---|---|---|---|
| 1 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
| 2 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
| 3 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
| 4 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
| 5 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
| 6 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
| 7 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
| 8 | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ | ≈ |
— ENEMY FLEET STATUS —
Carrier ■■■■■ AFLOAT✕ SUNKBattleship ■■■■ AFLOAT✕ SUNKCruiser ■■■ AFLOAT✕ SUNKDestroyer ■■ AFLOAT✕ SUNKPatrol ■ AFLOAT✕ SUNK
★ ALL SHIPS SUNK — MISSION COMPLETE ★
≈ unknown · • miss · ✕ hit
Hope you enjoyed! If you're curious how this works: HTML has a native element called details, which toggles open and closed when you click it. That's the only "interactivity" in this entire game. The trick is CSS :has(), a selector that lets a parent element react to the state of its children. So when you click a cell, its details opens, and CSS detects whether that cell has the ship class — if it does, it shows a ✕ and a red background; if not, it shows a • and a dark background. The fleet status panel watches for all cells belonging to a given ship being open simultaneously, and flips that ship's status from AFLOAT to SUNK. The win condition works the same way: once all fifteen ship cells are open, the victory banner appears and a transparent overlay locks the board.
---
If this moved you, even a little, please consider leaving a kudos or some feedback. I’ve poured a lot of time, love, and late-night tinkering into this. It's part of a new fixation, and I would love to hear everyone's thoughts.
Lately, I’ve realized: I have free will. Which means I’ve been joyfully and chaotically experimenting with HTML formatting and custom workskins.
Please stay tuned for the next HTML piece! I will post/update something in this series weekly OR biweekly; if you want to stay updated on this HTML series, please consider subscribing or bookmarking.
You can find me on Bluesky ( @the_wild_poet25 ) and on Twitter (the_tamed_poet) if you want to connect. I'm also on Discord too!
The comment section also works—feel free to leave a comment! :)
clovis_unleashed, Lurker247, PLEASE_REC_SOME_FICS, That_0ne_Weird_A1ien, Anza_Mir, GumbaBunny, NiDusty, Charles_Rockafellor, ZanderAlex_Questionable, Mousing, the_words_we_lost_in_the_edit, asteraceaefaerie, foRon, DarkLuminosity, Voidal_Abyss, 17_Lions, VivianLuo, SmallWinterChild, thirteenth_floor, MightBeASyren, Minonaise, Heleonora, lovedbyajester, K1ller_HarleQuinn, AltraMe, LiulfrLokison, and Bxdbre as well as 5 guests left kudos on this work!