Actions

Work Header

Rating:
Archive Warning:
Fandom:
Character:
Additional Tags:
Language:
English
Series:
Part 72 of Izzy's HTML & CSS Experiments , Part 56 of HTML & CSS Games , Part 2 of Word Search Games, Part 9 of One Piece Games
Stats:
Published:
2026-09-15
Words:
250
Chapters:
1/1
Comments:
15
Kudos:
33
Bookmarks:
3
Hits:
140

One Piece Word Search Game (Straw Hats Version)

Summary:

A fully playable One Piece-themed word search, built entirely in HTML and CSS. Twelve names from the Straw Hat crew and their ships are hidden across the grid horizontally, vertically, and diagonally. Click the letters as you find them, mark off the word bank, and see if you can clear the board.

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 word-search grid, selected letters, word bank, and completion banner are all part of the work itself.

This work is interactive — it isn't 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
• Words can appear horizontally, vertically, or diagonally
• Click each letter of a hidden word to mark it as found
• Find all twelve words to reveal the completion message

Twelve words, one grid, and however sharp your word-search skills happen to be. Good luck.

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

Work Text:

☠ ONE PIECE WORD SEARCH 1 ☠

Find the hidden names. Words may run horizontally, vertically, or diagonally. Click each letter to mark your finds.

K
S
S
U
U
N
N
N
N
Y
Y		EMUBCR
D
M
M		LSB
L
L
U
U
F
F
F
F
Y
Y		QG
B
E
E		CNN
S
S		C
R
R
O
O
B
B
I
I
N
N
B
B
R
R		HCRN
A
A
A
A		BSDH
U
R
R
Z
Z
U
U		US
C
C
N
N		BSSM
B
Y
Y
O
O
S
S		H
H
H		B
K
K
J
J		R
J
J		E
JN
R
R
O
O
O
O		ER
Y
Y		D
I
I		SJ
RV
O
O
P
P
K
K		FDS
N
N
A
A
M
M
I
I
SU
P
P
P
P		GLD
B
B		RWCS
B
E
E		TGPV
E
E		RNYKO
R
R		SOLJHZFWYHC
SJQPKXOJTCDQ

LUFFYLUFFY ✓ZOROZORO ✓NAMINAMI ✓SANJISANJI ✓USOPPUSOPP ✓CHOPPERCHOPPER ✓ROBINROBIN ✓BROOKBROOK ✓MERRYMERRY ✓SUNNYSUNNY ✓FRANKYFRANKY ✓JINBEJINBE ✓

★ ALL WORDS FOUND — THE CREW IS COMPLETE ★

Notes:

Hope you enjoyed! I actually started building this One Piece version before I made the AO3/fandom word search, but the AO3 one ended up getting finished and posted first. This one has been sitting in the background waiting for me to come back and finish it properly.

If you're curious how this works: HTML has a native element called details, which can toggle between open and closed when clicked. Every selectable letter in the puzzle is one of those elements. Once you click it, CSS detects that open state with :has() and swaps the plain letter for the highlighted version.

The filler letters aren't interactive at all, so only the letters that actually belong to hidden words can be selected. Each word in the word bank watches for all of its corresponding letters to be open at the same time. Once you've found the full word, its label changes to show that it's complete. The final banner does essentially the same thing on a much larger scale: it waits until every hidden word has been completed before revealing itself.

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