Javascript: 9-cell drag-and-drop puzzle game puzzle

Use coordinates of an image to generate a cell, similar to csssprite. 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 record... SyntaxHighlighter. all ();

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.
Javascritpt code
1. indicator. fn. unordered = function (array) {// disordered Arrangement
2. array = array | [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
3. if ({}). toString. call (array). indexOf ('array') ===-1) return;
4. var arr = [], value = array. toString ();
5. arr = array. sort (function (){
6. return Math. random ()> 0.5? -1: 1;
7 .});
8. (arr. toString () === value) & arguments. callee (array );
9. return arr;
10 .};

 

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.
Javascritpt code
1. indicator. fn. checkPosition = function (e) {// check the cell position. If the condition is met, insert the non-condition and put it back to the original location.
2. e = that. getEvent (e );
3. var I =that.html s. length, size = null, pointer = [e. clientX, e. clientY];
4. for (; I --;){
5. size=that.getClinetRect(that.html s [I]);
6. if (size. top <pointer [1] & size. bottom> pointer [1]) {
7. if (size. left Pointer [0]) {
8. that.html s [I] === indicator. currentTarget | that.replaceElement(that.html s [I]);
9.} else {
10. that. restore ();
11 .}
12 .}
13 .}
14 .};
　　
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.
Javascritpt code
1. indicator. fn. createPlaceholder = function (T ){
2. var node = T. cloneNode (true );
3. node. innerHTML = '';
4. node. style. display = 'none ';
5. node. className = 'placeholder ';
6. T. parentNode. insertBefore (node, T );
7. that. placeholder = node;
8 .};

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.
Javascritpt code
1. indicator. fn. checkPosition = function (e) {// check the cell position. If the condition is met, insert the non-condition and put it back to the original location.
2. e = that. getEvent (e );
3. var I =that.html s. length, size = null, pointer = [e. clientX, e. clientY];
4. for (; I --;){
5. size=that.getClinetRect(that.html s [I]);
6. if (size. top <pointer [1] & size. bottom> pointer [1]) {
7. if (size. left Pointer [0]) {
8. that.html s [I] === indicator. currentTarget | that.replaceElement(that.html s [I]);
9.} else {
10. that. restore ();
11 .}
12 .}
13 .}
14 .};

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.
Javascritpt code
1. indicator. fn. replaceElement = function (targetNode) {// place the unit to the correct position
2.
3. var current=indicator.currenttarget,k1%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;
4.
5. current. style. position = 'static ';
6.
7. that. index = [];
8.
9. for (; k 10. if(targetnode1_1_1_that.html s [k]) {a1 [0] = k ;}
11. if(current===that.html s [k]) {a1 [1] = k ;}
12 .}
13. a1.sort ();
14.
15. a2 = k1 [a1 [0];
16. k1 [a1 [0] = k1 [a1 [1];
17. k1 [a1 [1] = a2;
18.
19. a3 = k2 [a1 [0];
20. k2 [a1 [0] = k2 [a1 [1];
21. k2 [a1 [1] = a3;
22.
23. parent. innerHTML = '';
24.
25. for (; j 26. li=that.html s [j];
27. that.index.push(that.html s [j]. index );
28. try {parent. appendChild (li)} catch (e ){}
29 .}

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.
Javascritpt code
1. that. index. join ('') = that. sn. sort (). join ('')

 

From BlueScript