A Sliding Number Puzzle in JQuery

I’ve never really been a huge javascript fan. I learned to program using an interpreted, weakly-typed language called BASIC. It was fun, interactive, stream-of-consciousness, creative, and a great way to learn the, um, basics. It was also pretty hard to write big, complicated programs in it. I happened to learn the language back in the mid-70’s on an HP3000 mainframe. We had access to two CRT and two teletype terminals. I recall that there was a pecking order in the student computer room, and it was awhile before I worked my way up to getting time on a CRT. Up to that point I had to print out every run and save my programs on punch tape, so my efforts were somewhat confined. Once on the CRT I began to scale up, and one of my aspirations was to write a space game. But this was pre-procedural BASIC, all gotos and gosubs, and it was only a few ten thousands of lines long when its complexity outstripped my structural abilities and it collapsed into a heap.

I still have a prejudice in favor of strongly-typed, compiled languages, but I also think scripting is the future of the bulk of development. And it’s still fun. Working with javascript or php today is the equivalent, for me, of loading up the BASIC interpreter and making stuff happen. It’s relaxing after spending my professional day wrangling huge .net solutions across multiple servers and staring at .configs until my eyes water. And just as I did back in the day, I still turn to games when I want to learn something new. They’re fun to program and they cover pretty much every aspect of a language. When I wanted to learn Silverlight I wrote GMemory, a deservedly unheralded accomplishment, but still fun to do. Recently I desired to get up to speed on JQuery, so once again I created a dumb game.

The sliding number puzzle has been around since the mid-nineteenth century. I remember my parents bought them for us to play with on long family car trips, which probably explains a lot about me. They come in various sizes, with the most standard being the fifteen-puzzle, so named because it is a 4 x 4 grid of sliding tiles with one empty spot. I didn’t know this when I started working on mine, so mine is a 35-puzzle, implemented entirely in javascript using JQuery. JQuery is brilliant, for a lot of reasons, but that’s another post. Suffice it to say that it was a lot of fun to work with, and the puzzle itself is interesting. It turns out that the mathematics of the sliding number puzzle have been studied for a long time, and it has proven to be an interesting problem for computer scientists as well, in terms of its inherent properties and the challenges of solving it.

However, before you spend much time trying to solve mine, I should mention that half the puzzles it generates cannot be solved. This is some mathematical property of the puzzle itself which was discovered by some guys named Johnson and Story back in 1879. Unfortunately you can’t tell if you are working on an unsolvable puzzle unto you get to the last number. Muwaahahahahaha. There’s a test to detect an unsolvable configuration, but I haven’t implemented it yet. I also haven’t implemented a solver. There are both search-based and pattern-based approaches to solving the sliding number puzzle, and I wanted to implement one and animate the solution, but I haven’t had the time. If you feel like trying, there’s a link to download the source files on the demo page.

Leave a Reply

Your email address will not be published. Required fields are marked *