AS3, UX

How difficult could a jigsaw really be ? That was my initial thought. Ha!

When I was first told of the clients wishes for a jigsaw I succumbed to the thought that it couldn’t be that tricky really, we just needed to drag and drop some masked pieces into a grid and see if they were in place. Presto!

This was not to be the case.

SO, I started brain storming (is it really not PC to say that any more?) which usually involves a quantity of Guinness hovering uncertainly between several and many pints at my local, my MP3 player and some distinctly anti-social behaviour which the locals are used to by now and only requires the occasional snarl to get them to leave me alone. (although, the anti-social behaviour is usually inversely proportional to the Guinness intake, which in itself is inversely proportional to constructive thought processes, thus completing the circle of life)

What I eventually decided was needed was uploaded images resized and centred, jigsaw boards, many more boards, pieces in the boards, drag and drop, depth changes to show active pieces, connecting pieces on the board, connecting pieces off the board which means adjacency of pieces, non-adjacency of pieces, a timer, a prettier timer, a design worthy pretty timer with bells and whistles and a facility that turns it into an egg timer as well (too much Guinness at work here again), randomising board starts, browser resize, sliding pieces, sliding pieces that rebound off the browser walls when you throw them, a hint system, hi-scores tables, showing and setting scores, encrypting sent scores (paranoia 101), MYSQL tables, php triggers, SQL requests, an image upload facility, puzzle close, restart, send-a-friend, auto puzzle starts from site opening, auto select of puzzle board, id and project grouping of images. Phew.
I would guesstimate that the above list took about 4 separate evenings and in some cases far too much Guinness (see: clock timer, above)

Needless to say, the tricky factor was rising exponentially. But at the end of the day, this is what I do, and I love what I do. Its fun in a bizarrely masochistic yet Machiavellian way that only other coders will truly appreciate.

AND while I dont for a minute suggest this is the only way to do a jigsaw, it is a pretty efficient one. Unfortunately, someone also asked if puzzles could be different shapes other than rectangular (which they can), so I guess there’s still some work to do.

For the inquisitive: The puzzle boards themselves are pretty simple – a vector rectangle chopped into 35 shaped pieces which form masks for each piece or collection of off board pieces. Each piece has two frames visible / invisible named a1 – a35 and then you have to manually enter the adjacency arrays for each piece.

Allowing pieces to be connected off the grid means checking the active piece against other pieces on the screen to see if they are in the right place when the piece is dropped. Which theoretically means the top left and bottom right piece might connect if I just happen to drop one of them at the right place on the screen – which is ridiculous. Hence adjacency –¬†this means for piece P20 finding out visually which pieces connect with that piece and place this information in the data so we can check when we move that piece next to an adjacent piece it will stick.

in total with a bit of practice it takes about 30 minutes to create a new board.The image above is from running the game on screen with a triangular board. You can see several collection of pieces off the grid, the timer and some of the options. To play the game go here

And there you have it. Jigsaw. What a pain. What a glorious pain, cos now I have done it, I don’t have to figure it out again.

Sure you could add to it, rotate pieces, have non-rectangular boards, have video jigsaws (a bit heavy though on the processing) or changing the image (doable), you could even attach rockets to the pieces and make the visitor fly the pieces into place (wow, how many Guinesses do you think it took to come up with that idea!)

But not for me, I am Jig-sawed out. If I never see or have to complete a jigsaw again I shall praise any and all deities awaiting such communications. Fortunately, one of the first things I built was a cheat button, which is still there.

The whole thing took 2.5 weeks actual time, but I wasn’t exactly pulling 9-5 hours. Of course that includes all the UI development work and the server side scripting and the database stuff too. So maybe 3.5 man weeks effort total.¬†Whilst I wouldn’t say this was my K2 climb, it was good exercise for the brain.