JS Jigsaw Puzzle

;(function ($) {function arrayindexof (r, Num) {if (Array.prototype.indexOf) {return r.indexof (num);      }else{for (var i=0, len=r.length; i<len; i++) {if (r[i] = = = num) return i;    } return-1; }}/* Initialize range number @x X-axis maximum @y y-axis maximum number from 0 to fill the last line, only the last one to calculate the legal lattice ret up and down, a group of a set of * * Function Getrangenu        M (x, y) {var ret = [];        var cur =-1;                For (Var i=0, i<y; i++) {for (Var j=0; j<x; J + +) {cur++;                var temp = [];        Upper if (i > 0) {temp.push (cur-x);        }else{Temp.push (-1);        }//Lower if (I < y-1) {Temp.push (cur + x);        }else{Temp.push (-1);        }//Left if (J > 0) {temp.push (cur-1);        }else{Temp.push (-1);        }//Right if (J < x-1) {Temp.push (cur + 1); }else{Temp.push ( -1);      } ret.push (temp);  }//for}//for return ret; } var direction = {"0": "s",//On "1": "X",//Under "2": "Z",//Left "3": "Y"//right} var emptyfun = Fu    Nction () {};    function pintu (option) {var imgsrc = option.imgsrc;    var imgwidth = option.imgwidth;    var imgheight = option.imgheight; var block = Option.block | |    100; var id = option.id | |    "J_paper_pintu"; var begin = Option.begin | |    Emptyfun; var success = Option.success | |        Emptyfun;    var x = parseint (Imgwidth/block, 10);        var y = parseint (Imgheight/block, 10);    var num = 0;    var beginempty = 0;        var empty = 0;      $ (function () {var $id = $ ("#" + ID);            var frag = document.createdocumentfragment (); for (var i = 0; i < y; i++) {//Line for (var j = 0; J < x; j + +) {//column var div = document.createelement ("di          V ");          Div.style.width = block + "px"; Div.style.height = Block+ "px";          Div.style.left = block * j + "px";                    Div.style.top = block * i + "px";          var IMGX = block * J *-1 + "px";          var imgy = block * I *-1 + "px";                    div.style.background = "url (" + imgsrc + ")" + IMGX + "" + imgy + "no-repeat";          Div.setattribute ("Data-num", num);          num++;        Frag.appendchild (DIV);        }}//extra line for (i = y, j = 0; J < x; j + +) {var span = document.createelement ("span");                Span.setattribute ("Data-num", num);          if (j = = x-1) {span.classname = "last";          empty = num;        Beginempty = num;        }else{num++;        } span.style.width = block + "px";        Span.style.height = block + "px";        Span.style.left = block * j + "px";        Span.style.top = block * i + "px";      Frag.appendchild (span); } $id. css ({WIDTH:X * block + "px", Height: (y+1) * block + "px",}). Append (Frag);      var $blocks = $id. Find ("div");      var blockslength = $blocks. length;            var ret = getrangenum (x, y+1);          function Moveblock ($elem, Ishuman) {if (Ishuman && begin) {begin ();        begin = NULL; } var num = + $elem. attr ("Data-num"), Rangenum = Ret[num], i = Arrayindexof (Rangenum,        empty);          if (i >-1) {$elem. attr ("Data-num", empty);                    empty = num;                    Move block var d = direction[i.tostring ()];            Switch (d) {case "s": $elem. CSS ("Top", parseint ($elem. CSS ("top")-block + "px");            Case "X": $elem. CSS ("Top", parseint ($elem. CSS ("top"), + block + "px"); Case "Z": $elem. CSS (' left ', parseint ($elem. CSS ("left")-block + "px");            Break Case "Y": $elem. CSS (' left ', parseint ($elem. CSS ("left"), + block + "px");          Break                   } Ishuman && checksuccess ();        }}//end Moveblock//Randomly disrupts the picture function randomgame () {var max = 1000;                var a = 0;                         function fn () {if (a++ > Max) return;          var n = parseint (Math.random (), 10);          var i = Ret[empty];                    var e = i[n];            if (E! =-1 && e < blockslength) {var $elem = $blocks. EQ (e);          Moveblock ($elem);        } fn ();      } fn (); }//Determine if function checksuccess () {if (empty = Beginempty) {for (var i = 0; i < blocks Length;            i++) {if (+ $blocks. EQ (i). attr ("Data-num")! = i) {return;        }} success ();            }} randomgame ();              $id. On ("click", "div", function () {Moveblock ($ (this), true);          }); });//ready}//end Pintu Window.pintu = Pintu; }) (JQuery);

Example:

<!doctype html>
JS Jigsaw Puzzle