[JavaScript] 9-cell drag-and-drop puzzle game puzzle

1. cross-browser, mainstream browsers can run

2. Pure Javascript development.

3. Easy to configure.

4. Secondary Development is simple and easy to use.

 

Portal online trial

Finished Product Preview

 

Use coordinates of an image to generate a cell,Similar to CSS Sprite.The general idea is that each cell has two indexes that are data-driven. When creating an instance, arrange the instance in disorder in 0-9. Each cell corresponds to two indexes. One is the index of the actual location and the other is the index of the current location.When dragging an image, adjust the index of the current position of the record to compare the original array. If the values are equal, you can confirm that the puzzle is complete.

1. An array of [0-9] in disorder generates a new array to sort the cells of the puzzle. To avoid generating non-conforming arrays, compare and recursion.

 indicator. FN. unordered =  function  (array) {///   disordered sorting  array = array |, 000000, ];   If  (({}). tostring. call (array ). indexof ('array') =-1)  return  ;  var  arr = [], value =  array. tostring (); arr  = array. sort ( function   () {  return  math. random ()> 0.5? -1: 1 ;}); (ARR. tostring () == value) &  arguments. callee (array);   return   arr ;};  

 

2. The main difficulty is to detect the positional relationship between the current cell and other cells in real time during drag and drop, and determine whether the dragged cell is in another cell rather than in its own placeholder cell. If not, place the drag element back to its original position.

 
Indicator. FN. checkposition = function (e) {// check the cell position. If the condition is met, insert the non-conforming Element and put it back to the original location. E = That. getevent (E); var iw.that.html S. length, size = NULL, pointer = [E. clientx, E. clienty]; for(;i--shanghai%size%that.getclinetrect(that.html s [I]); If (size. top <pointer [1] & size. bottom> pointer [1]) {If (size. left <pointer [0] & size. right> pointer=0]{{that.html s [I] === indicator. currenttarget | that.replaceelement(that.html s [I]);} else {That. restore ();}}}};
 

3. To avoid the dislocation caused by the re-arrangement of cells when dragging elements, a placeholder cell is generated. The placeholder cell is cloned from the drag-and-drop cell.

Indicator. FN. createplaceholder = function (t) {var node = T. clonenode (true); node. innerhtml = ''; node. style. display = 'none'; node. classname = 'placeholder '; T. parentnode. insertbefore (node, T); That. placeholder = node ;};
 

4. Determine whether to drag a cell to another cell. The left vertex is greater than the top vertex of the current cell, and the left vertex is smaller than the bottom and right vertex of the current cell.

 

Indicator. FN. checkposition = Function (E ){ //  Check the cell location and insert the cells that meet the conditions and do not meet the conditions and put them back to the original place. E = That. getevent (E );  VaR I =that.html S. length, size = Null , Pointer = [E. clientx, E. clienty]; For (; I -- ;) {Size = That.getclinetrect(that.html s [I]);  If (Size. Top <pointer [1] & size. Bottom> pointer [1 ]) {  If (Size. Left <pointer [0] & size. Right> pointer [0 ]) {That.html s [I] === Indicator. currenttarget | That.replaceelement(that.html s [I]);}  Else  {That. Restore ();}}}}; 

 

5. When adjusting a cell, you need to change the attribute of the two record locations of the drag and drop unit, change the two location attributes of the current cell, and then adjust the array of the record location

I think the processing here is also the most complicated and challenging part. It has been modified for a long time.

 
Indicator. FN. replaceelement = function (targetnode) {// place the unit to the correct position var current1_indicator.currenttarget,k11_that.html S, K2 = That. SN, temp, j = 0, K = 0, a1 = [-1,-1], a2 = NULL, A3 =-1, arr = [], parent = That. parent. children [0], Li; current. style. position = 'static '; that. index = []; for (; k <k1.length?k=){if(targetnode==that.html s [k]) {A1 [0] = K;} if(current==that.html s [k]) {A1 [1] = K ;}} a1.sort (); a2 = k1 [a1 [0]; K1 [a1 [0] = k1 [a1 [1]; k1 [a1 [1] = a2; a3 = k2 [a1 [0]; K2 [a1 [0] = k2 [a1 [1]; k2 [a1 [1] = A3; parent. innerhtml = ''; For (; j <k1.length?j=##li=that.htmls=j=#that.index.push(that.html s [J]. index); try {parent. appendchild (LI)} catch (e ){}}};
 

6. When you release the mouse, check that the values of the original array and record position array are very equal to each other to see if the puzzle is complete.

 
That. Index. Join ('') = That. Sn. Sort (). Join ('')