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.


AvalonLife is a pretty complete and full-featured implementation of John Conway’s Game of Life, which I created a couple of years ago as an experiment in WPF programming. I ended up writing a long feature on the creation of the program, which begins here. It has a ton of information on the background of the game, it’s rules, etc., as well as a pretty decent overview of WPF concepts.

The program doesn’t require any installation. Just unzip the package to a folder and run it. You can build and run your own models by clicking to turn cells on or off, or load and experiment with one of the many models included with the program. You can even drag and drop models from the Life Lexicon website and run those.

Downloads: AvalonLife, AvalonLife + Source

GMemory – An Image Search and Match Game

GMemory is a Google-based image search and match game that takes its inspiration from the game of Memory that I used to play with my kids when they were young. The Memory game consists of a number of wooden tiles with images on one side. Each distinct image appears twice in the tile set. The tiles are spread out face down, and the object is to match the pairs by turning over first one tile, and then another. If you match the tiles stay face up and you turn another. Otherwise they are turned face down again and play passes to the other player if there is one.

GMemory works the same way, except that it searches Google Images for the pictures to use, based on search criteria supplied by the player. It’s a simple game that gave me a chance to learn Silverlight and the Google RESTful search API. (For more on that topic see my GSearch post).

You can play the game here, or download the source and project files here.

SilverDraw Library

The SilverDraw library is an update to my ColorTools and GradientEditor projects. It primarily contains the color pickers and gradient editors from those two assemblies, and provides a place for me to hang other classes as I develop them. I produced this in response to a request for access to the GradientEditor application, which I was happy to consent to since I had meant to get to it at some point anyway.

What you get in SilverDraw are the ColorPicker and SimpleColorPicker controls, as well as a utility control for displaying sytem colors, and of course the GradientEditor control, which you can see in action here. Ultimately my plan for this assembly was to add complete support for drawing features, and I may still get to that at some point, but it’s pretty much been on hold for a year now for various reasons. In any case, I hope you find the controls in SilverDraw useful.

Downloads: SilverDraw Assemblies, SilverDraw Source

GSearch for .NET and Silverlight 2

GSearch is a set of class libraries for searching Google from .NET 3.5 and Silverlight 2 managed code. GSearch uses the Google RESTful webservice API to execute searches and receive results, and supports the following search types: blogs, books, images, locations, news, patents, video, and web.

GSearch consists of a core assembly, GSearch.Core.dll, that is approximately 21k in size, along with a set of eight related asemblies that implement the specific search types. These range in size from 9k to 15k, and since an application needs to reference and distribute just the assemblies for the search types it uses, the overhead for adding search to your application is fairly small.

Continue reading