;(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