A fully playable Hangman game, built entirely in HTML and CSS. Four words. Twenty-six keys. Six wrong guesses before it's over. You know how this works—but do you know the phrase?
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 letter tiles, word display, and hangman figure 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 letter to guess it. Correct guesses reveal their position in the word. Wrong guesses add a body part to the figure.
• Once a letter is clicked it can't be unclicked, so choose carefully
• Six wrong guesses and it's game overThe phrase is an Enies Lobby quote. That's your only hint.
Good luck.
(See the end of the work for more notes.)
| +---+ |
| | | |
| | O |
| | /|\ |
| | / \ |
| | |
| ------- |
I_ W_A_N_T_ T_O_ L_I_V_E_!
Wrong: B C D F G H J K M P Q R S U X Y Z
★ YOU WIN! ★
✕ GAME OVER. The phrase was: I want to live! ✕
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
Hope you enjoyed! If you have a word, phrase, or line you'd like to see as a Hangman game, leave it in the comments! Fandom terms, character names, iconic quotes, etc — anything goes, as long as I can make it work.
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 letter, its details opens, and CSS detects .hg:has(.gl-k[open]) and uses that to reveal the letter in the word display, update the wrong guesses list, draw the next part of the hangman figure, and check for a win or loss.
The figure itself is built from span elements set to visibility:hidden by default. Each wrong guess reveals the next body part. The "can't click a used letter" effect works by hiding the details element once it's open (but keeping it in the DOM so its state is preserved), and showing a plain greyed-out span in its place. The game-over lock is a transparent absolutely-positioned div that covers the keyboard the moment the win or lose condition is met.
I'll be posting a new Hangman game weekly! Now that I’ve built my own personal web app/generator to generate the entire HTML/CSS with right/wrong letters and difficulty after I input a word or phrase, each new game takes me less than five minutes to create. Which means this chaotic little HTML experiment has officially evolved yet again, and I can keep feeding it your fandom terms, iconic quotes, and increasingly unhinged suggestions.
---
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! :)
ForkNKnives, Lollifeislife, beefbiffboeuf, Chloeandmax, Toby_Arthur, That_0ne_Weird_A1ien, AiryLightning, NiDusty, MossEatingDemon, RammBook, the_words_we_lost_in_the_edit, asteraceaefaerie, Phyllophaga, Marz__Barz, and LiulfrLokison as well as 4 guests left kudos on this work!