Actions

Work Header

Rating:
Archive Warning:
Fandoms:
Additional Tags:
Language:
English
Series:
Part 49 of Izzy's HTML & CSS Experiments , Part 34 of HTML & CSS Games , Part 1 of Bingo Games, Part 1 of Ship Trope Bingo Themed Games
Stats:
Published:
2026-07-14
Words:
195
Chapters:
1/1
Comments:
29
Kudos:
84
Bookmarks:
16
Hits:
637

Ship Trope Bingo Game

Summary:

A fully playable Ship Trope Bingo card, built entirely in HTML and CSS. Twenty-four tropes plus a free space. Click the squares your favorite ship fits and see if you can line one up. Get a line — get a bingo.

Notes:

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 board, the marked squares, and the bingo banner 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 square to mark it as true for your ship
• Get five marked squares in a row (horizontal, vertical, or diagonal) to trigger BINGO

Twenty-four tropes, one free space, and however many ships you want to run through it. Good luck.

(See the end of the work for more notes.)

Work Text:

Ship Trope Bingo

Click the tropes that fit your favorite ship. Five in a row wins.

★ BINGO! Congratulations. Your ship is obsessed with each other and probably making it everyone else’s problem. ★

There Was Only One Bed
❤There Was Only One Bed
Friends to Lovers
❤Friends to Lovers
Mutual Pining
❤Mutual Pining
Idiots in Love
❤Idiots in Love
Height Difference
❤Height Difference
Forced Proximity
❤Forced Proximity
“Who Did This to You?”
❤“Who Did This to You?”
Slow Burn
❤Slow Burn
Jealousy Realization
❤Jealousy Realization
Fake Dating
❤Fake Dating
Rivals to Lovers
❤Rivals to Lovers
Love Confession in the Rain
❤Love Confession in the Rain
★FREE SPACE
Unbearable Sexual Tension
Grumpy / Sunshine
❤Grumpy / Sunshine
Only Soft for Them
❤Only Soft for Them
Hurt / Comfort
❤Hurt / Comfort
Protective Instinct Goes Feral
❤Protective Instinct Goes Feral
Secret Yearning
❤Secret Yearning
Touch-Starved Disaster
❤Touch-Starved Disaster
“Stay.”
❤“Stay.”
Pinning Them Against the Wall
❤Pinning Them Against the Wall
Patch Them Up After Battle
❤Patch Them Up After Battle
Domesticity Sneaks Up on Them
❤Domesticity Sneaks Up on Them
Love Language Is Insults
❤Love Language Is Insults
Happy Ending They Had to Suffer For
❤Happy Ending They Had to Suffer For

Notes:

Hope you enjoyed! This game has actually been finished and sitting in my drafts for ages, quietly collecting dust while I kept telling myself I would post it “soon.” Apparently, “soon” meant after surviving one of the most exhausting weeks I’ve had in a while.

I worked three clopenings this past week, plus a sixteen-hour double shift, and then got called in testify in court as a witness today (I didn't — just sat in the hallway). So, naturally, I decided that my reward for making it through all of that should be finally dusting off an interactive ship trope bingo game and releasing it into the world. It has been waiting patiently in my drafts for far too long, and after the absolute chaos of this week, I wanted to give myself something fun to finish and share. Consider this my tiny victory lap for surviving the past week.

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 square, its details opens, and CSS swaps the trope label for a marked heart square. The win banner watches for all five squares in any of the twelve possible lines (rows, columns, diagonals) being open simultaneously, and reveals itself the moment one is complete.

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! :)