JS Jigsaw Puzzle is object-oriented and fully commented. _javascript skills

Online demohttp://img.jb51.net/online/pintu/pintu.htm

Copy code The code is as follows:

a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007

 rowscolumns Start


                                                                 /tr>




















Please indicate the source for reprinting: http ://blog.csdn.net/sunxing007



<script> <br>//The default is not for ie7 and below Cache the background image, causing delay and flickering. Fix this bug. <br>//(provided by csdn netizen wtcsy http://blog.csdn.net/wtcsy/) <br>try{ <br>document.execCommand("BackgroundImageCache ", false, true); <br>}catch(e){alert(e)}; <br> //Auxiliary function<br> function $(id){return document.getElementById(id)}; <br> /************************************************* <br> * js puzzle game v1.6 <br> * Author sunxing007 <br> * Please indicate when reprinting from http://blog.csdn.net/sunxing007 <br> ************** **************************************/ <br> var PicGame = { <br> 3, <br> //Image source<br> img: $('img'), <br> //Cell height<br> cellHeight: 0, <br> //Cell width<br> cellWi dth: 0, <br> / /The main object of this game: the table, each td corresponds to a movable small grid <br>         board: $('board'), <br>                                                                                                                          Board: $('board'),                                                                                                           ​​​This.y = $ ('cols').value>1?$('cols').value: 3; > This.board.deleteRow(0); <br> for(var i=0; i<this.x; i){ <BR> var tr = this.board.insertRow(-1); <BR> for(var j=0; j<this.y; j ){ <BR> var t d=tr.insertCell(-1); <BR>                                                            <BR>                                                           <BR>                                                                                                                                                                                                                                                                              this.img.width/this.y; <BR>                                                                                 Get all tds <BR> var tds = this.board.getElementsByTagName('td'); for(var i=0; i<tds.length-1 ; i ){ <BR> tds[i].style.width = this.cellWidth; <BR> tds[i].style.height = this.cellHeight;                                                                                      tds[i].style.background = "url (" this.img.src ")"; <BR>                              tds[i].style.border = "solid #ccc 1px"; ; <BR> var currCol = i%this.y; <BR> // The most important thing here, calculate the position of the background map of each cell, make them look like an image <BR> TDS [i] .style.backgroundpositionx = -This. cellWidth * currCol; <BR>                                                                                          /**begin: disrupt the sorting*******************/ <BR>                                                                         The sorting algorithm is like this: For example, I currently have a 3*3 layout, <BR>                                                                                                                                                          That place.<BR>                     **/ <br><br>                     //目标位置序列 <BR>                     var index = []; <BR>                     index[0] = Math.floor(Math.random()*(this.x*this.y)); <BR>                     while(index.length<(this.x*this.y)){ <BR>                     var num = Math.floor(Math.random()*(this.x*this.y)); <BR>                     for(var i=0; i<index.length; i ){ <BR>                     if(index[i]==num){ <BR>                     break; <BR>                     } <BR>                     } <BR>                     if(i==index.length){ <BR>                     index[index.length] = num; <BR>                     } <BR>                     //window.status = index; <BR>                     } <BR>                     var cloneTds = []; <BR>                     //把每个td克隆， 然后依据目标位置序列index，替换到目标位置 <BR>                     for(var i=0; i<tds.length; i ){ <BR>                     cloneTds.push(tds[i].cloneNode(true)); <BR>                     } <BR>                     for(var i=0; i<index.length; i ){ <BR>                     tds[i].parentNode.replaceChild(cloneTds[index[i]],tds[i]); <BR>                     } <BR>                     /**end: shuffle sorting***********************/ <br><br>                     //为每个td添加onclick事件。<BR>                tds = this.board.getElementsByTagName('td');                                                          tds[i].onclick = function(){ < ~ index; ; <BR>                                                                                                                                                                                              //reachable indicates whether the currently clicked block can be moved <BR> var reachable = false; <BR>                                                                                                                                                                                                               if(row 1<PicGame.x && PicGame.board.rows[row 1].cells[col].style.background == ''){                                                                                                                             colBlank = col; <BR>                       reachable = true;                                                                                                                                                                                         rows[row-1].cells[col].style.background == ''){ <BR>                                                                                      reachable = true; .status =" reachable! rowBlank: " rowBlank " colBlank:" colBlank; <BR>                                                    <BR>                         else if(col 1<PicGame.y && PicGame.board.rows[row].cells[col 1].style.background == ''){ <BR>                         rowBlank = row; <BR>                         colBlank = col 1; <BR>                         reachable = true; <BR>                         //window.status =" reachable! rowBlank: " rowBlank " colBlank:" colBlank; <BR>                         } <BR>                         else if(col-1>=0 && PicGame.board.rows[row].cells[col-1].style.background == ''){ <br>                         rowBlank = row; <br>                         colBlank = col - 1; <br>                         reachable = true; <br>                         //window.status =" reachable! rowBlank: " rowBlank " colBlank:" colBlank; <br>                         } <br>                         else{ <br>                         //window.status =" unreachable!"; <br>                         reachable = false; <br>                         }<br> // 이동할 수 있으면 현재 블록과 빈 사각형을 교환합니다. <br> if (reachable) {<br> var tmpblankNode = picgame.board.rows [rowblank] .CLBLANK] .cloneNode (true). 🎜> // onClick 메서드에서 복제 개체가 손실되므로 주의해야 합니다. <br> tmpblankNode.onClick = 인수.callee <br> var tmpcurrnode = picgame.Board.Rows [ row] .Cells [col] .cloneNode(true); de,PicGame.board.rows[rowBlank].cells [colBlank]) <br>                                                              🎜> 🎜 >} <br></script>