Search code examples
javascripthtmlrandomkineticjsscramble

KineticJs jigsaw puzzle scramble

I currently doing a jig-saw puzzle HTML5 Project, now i am stuck with that i want my puzzle pieces be all around the container when i start playing, anyone can help me with the start? thanks.

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

P.S : This is my jsfiddle : http://jsfiddle.net/vFez6/17/

Solution

  • You can add a random offset to each piece's x,y position.

    x: i + pieceWidth / 4 + Math.random()*(stage.getWidth()-pieceWidth),

y: j + pieceHeight / 4 + Math.random()*(stage.getHeight()-pieceHeight),