Home  >  Article  >  Web Front-end  >  JS Jigsaw Puzzle is object-oriented and fully commented. _javascript skills

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

WBOY
WBOYOriginal
2016-05-16 18:51:321200browse

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

Copy code The code is as follows:



JS Jigsaw Puzzle


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

 rowscolumns


                                                                 /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>

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn