jquery.empuzzle @github

For the past few days, I’ve been writing this plugin called jquery.empuzzle. It was inspired by ‘Jigsy’ at cityposh.com.

It is a basic N-puzzle

The syntax is as simple as calling the plugin on a single image.

$('#second').empuzzle();

You can even get a little more into it and provide quite a few options.

$(function() {
   $('img').empuzzle({ 
        size: 4,
        target: $('#target'),
        blank: 'BR',
        randomize: function(game, defaultRandomizer) {
            defaultRandomizer.call(this, game);
        }, 
        win: function(game) { 
            alert("You're a winner!"); 
        },
        anim: { 
            duration: 200, 
            complete: function() { console.log('Move completed!'); }
        },
        DEBUG: true
   });
});

You could easily add a move counter in the anim.complete function. That function is basically the complete function that normally gets passed to jquery.animate(). I’ve had to curry the anim.complete function so the normal complete function performs the necessary internal tasks.

Enough about all that, check it out!