“Syrch” is a Word Search Game

Matti Bar-Zeev - Apr 8 '22 - - Dev Community

I’m really thrilled to introduce Syrch - a word search game I’ve created 🤗

https://syrch.netlify.app/

Image description

If you’re following my writing here and on Twitter, you are probably already familiar with my battered side-project, which is the word search game. This game started out as my sandbox for React studying back in 2018 and later as a ground for experimenting with new technologies, the most recent one being Vitest (which you can read about here).
My kids were happy to QA and learn from this game, I was happy experimenting over it. All good :)

Amazed by the recent fascination over word games, a thought struck me - “hey, I got this thing right here, why not take it to the next level and make it interesting?”.
Alas, it lacked one significant feature - it didn’t work on mobile, and for good reasons too.

How do you make a word search game work on mobile?

I first started sketching how I would like it to look like. Here you can see a first pencil draft of the interface, and I’m pleased to say that the final outcome is not far from it -

Image description

I obviously needed to figure out how to keep the board and letters so that you can see and collect them, but then also make sure that you can scroll around the board with ease.
I started with having 2 fingers drag for scrolling while 1 finger was for collecting, but that sucked. I then moved to 2 fingers tap to toggle scrolling or collecting modes… but that didn’t feel right too.

In the end I’ve decided that a long tap will toggle the collecting mode. You scroll around and when you find a word you long-tap and drag to collect it!
Yeah, that felt much much better, but was it enough? No.

I thought the game could benefit from some levels progress, and so I baked in the levels which pretty much say that you get more words to find as you succeed, but still I needed something to add a little “kick” to it, you know?

So one morning I woke up with the idea to add timing to it all. The game will initiate a timer and when you have found all the words, the timer will stop and you will get to know how much time it took for you. You can also share it with your friends.
I was very pleased with that until I sent it to my friend to play with it…

She said that it was pretty cool, but “why the hell is the time going forward? It should go backwards!” - dang, she was absolutely right!
A few tweaks here, and a few modifications there with the good chance of breaking it all and there! a new timer was born -

Image description

And now, my friends, you can all play Syrch!

I hope you will enjoy it as much as I enjoyed building and playing with it. If you have any comments, questions or you found an annoying bug (which I’m sure is lurking there) be sure to share them here or contact me on Twitter @mattibarzeev :)

Cheers!

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .