KineticJs validating jigsaw pieces?

Question

does anybody know how could I validate my jigsaw pieces back into the original place after being scrambled? and show that I have completed the puzzle? Currrently i am using kineticJs library. Thanks :)

function jigsaw(){
    var imageObj = new Image();
    imageObj.src = "kidwallpaper.jpg";
    imageObj.onload = function(){
        drawImage(this);
    }
 }

P.S : My jsfiddle : http://jsfiddle.net/vFez6/21/

Answer 1

One way is to define a circle where each piece connects to another piece.

For example, assume your puzzle has just 2 pieces -- a top piece and a bottom piece.

This illustration shows a red circle on the top piece and a gold circle on the bottom piece.

When the connection circles exactly overlap then pieces are exactly connected.

Of course you probably want to give your players a margin-of-error so they don't need to exactly overlap the circles. Perhaps if the 2 circles overlap at all then it's "good enough" to be called solved.

If you have defined the x,y,radius of the 2 circles then you can tell if they overlap at all like this:

var dx = circle2.x - circle1.x;
var dy = circle2.y - circle1.y;
var isSolved = Math.sqrt(dx*dx+dy*dy) <= circle.radius*2;

I see that you are rotating your pieces. This means that you must also test that the rotation angle of the 2 pieces are the same for them to be connected.

Naturally you wouldn't actually draw the circles -- they are just here for illustration.