Flood Game

A colour-flooding puzzle with move budgets, four boards including a date-seeded Daily, and a colour-blind-safe palette

πŸ“… January 2025πŸ’» TypeScript
React 18TypeScriptViteTailwind CSSGitHub Pages
reacttypescriptgame-developmentpuzzlealgorithmsstrategyfrontendresponsive-design

A colour-flooding puzzle. You own the top-left corner of the board; each move floods your territory with a chosen colour and absorbs every adjacent cell of that colour. Fill the whole board before the moves run out.

A fresh medium board

The interesting work was turning a toy into a game. Early versions let you click forever; without a budget there is nothing at stake. The current design anchors on the classic ratio β€” a 14Γ—14 board in 25 moves β€” with Easy, Medium, and Hard boards on a slightly kinder ladder, and a Daily board seeded from the date, so everyone who plays it that day gets the identical puzzle at the strict budget. Best scores are remembered per difficulty.

The palette is Okabe–Ito, chosen because its six colours remain distinguishable with the common forms of colour-vision deficiency, and every swatch carries its own glyph so colour is never the only signal. Keys 1–6 play, and the game core is a small pure TypeScript module β€” flood fill by breadth-first search over immutable state β€” with React doing nothing but painting it.