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

Source: Internet
Author: User

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 ('')

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.