Around Easter I started a personal project on creating a Griddler game (read the post here). The ultimate goal is to develop an Android-based Griddler game, but as for now I want to begin with a web-based version. Since late April I’ve laid the project on pause of several reasons. For one, I got myself a job in May and I no longer have as much free time as I had being a student. I’m also currently busy developing a web site for a school in my free time (more on that later). But this rainy weekend in June the Griddler game project got picked up again.

Deciding to further develop the project is more or less inspired from work, where I’m working with jQuery and was reminded how awesome it is. I also learned a few new things at work, for example how to use Ajax in my scripts. And I also seem to finally be able to adjust to working hours versus free time. But enough talk already, let’s get to the project. Its progress has been rapid, and my brain has been twisted in ways it has never been twisted before. In other words, I’ve learnt alot. And I love that.

The Griddler game started off as using HTML, CSS, PHP, JavaScript and later on much more jQuery (after following Håkon’s tip, thanks!). In the beginning it read puzzles from separate text files on my computer, but I quickly switched over to storing puzzles in a MySQL database. Support for dragging to fill multiple cells, Ctrl-clicking for filling an X (empty cell), and highlighting the clue rows and clue columns the mouse is currently hovering over, were added using jQuery. By clicking buttons the player can check for errors (against the stored solution), fill the grid with the full solution or be given a hint (one random row is being correctly filled). And that’s where I left it in April.

By utilizing Ajax I’ve added a welcome screen where the player can select the puzzle to play, sorted by puzzle size. The greatest improvement is an editor where the player can create a new puzzle just by drawing in a grid. The puzzle editor reads the grid and automatically generate clue rows, clue columns and the solution, and store it in the database – ready to play. Minor fixes and adjustments for cross-browser compability have been added (I’m looking at you, Internet Explorer), and finally I’ve polished the look of the pages.

The next step is quite a big one: the script has to read the playing grid dynamically whenever the mouse-button is released. This will automate several things, such as giving immediate error warnings and striking out clues when the corresponding cells are being placed. Also a thumbnail of the ongoing progress when playing a puzzle can be added. Finally, perhaps a timer and a high score list is in place.

In conclusion I’ve got a well-working web-based Griddler game minus some automatic features. I’ve chosen not to publish it to the public just yet, not until I’ve error-tested it enough. Perhaps I’ll make a log-in feature if someone want to try it. Let me know! View screenshots of the development and the latest version by clicking on the images below.