Chris’ Corner: Word Search

My daughter had a little phase of being into Word Searches. I found it to be a cool dad moment when I was like “I’ll make you a tool to make them!”. That’s what she was into. She liked doing them OK, but she really liked the idea of making them. So my tool starts with a blank grid where you can type in your words, then fill in the blanks with random letters, then print it.

Perhaps unsurprisingly, this type of simple game with simple well-defined interactions is rife for front-end developer experimentation.

Interestingly, I’ve found most takes on HTML/CSS/JavaScript Word Searches to be more about the experience of solving them, which is just as interesting! Let’s look at some.

Christian Collosi’s Version on <canvas>

Canvas is nice here as lines and arcs can be drawn at really specific coordinates to “circle” the words as you interact with it, and stay circled when you find a correct word.

Mads Stoumann’s Pure CSS Version

You click on the letters individually, and if the ones you have clicked on match a word, it changes background to let you know you’ve got it. This all happens with <input type="checkbox">s and simpler-than-you’d-think :has(:checked + :checked ...) selectors.

Kevin Newcombe’s Responsive word search

The responsive-ness of Kevin’s approach here is actually really cool. It doesn’t just scale, it literally changes the columns/rows of the puzzle itself. But I’m actually even more into the SVG-drawn lines where you make guesses and the SVG-drawn circles around the successful guesses. Some sort of similar work here.

Kit Jenson’s Word Search in Color

Gotta love the aesthetics here! Just not a game you usually see a lot of color in, so nice to see some playing in that direction.

Part of what makes me so damn proud of the CodePen community is that this is really the tip of the iceberg of experimentation in this very niche thing. Go around exploring for this sort of thing and you’ll find loads more.