JS Jigsaw Puzzle은 객체 지향적이고 완전히 주석 처리되어 있습니다.

JS Jigsaw Puzzle은 객체 지향적이고 완전히 주석 처리되어 있습니다. _자바스크립트 기술
WBOY
풀어 주다： 2016-05-16 18:51:32
원래의
1203명이 탐색했습니다.
온라인 데모http://img.jb51.net/online/pintu/pintu.htm
코드 복사 코드는 다음과 같습니다.
 
 
JS Jigsaw Puzzle<br><style> <BR> 글꼴 크기: 9pt; <BR> } <BR>테이블{ <BR>경계 축소: 축소 <BR>} <BR>입력{ <BR> 너비:20px; <BR></style> ></head> <BR><body> a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a><br> 🎜> <input type="text" id= "lines" value='3'/>rows<input type="text" id="cols" value='3'/>columns <버튼 id= "시작"</버튼> <BR><table id="board" border=1 cellpadding=0> <BR>                                     <td></td></ tr> /tr> <BR></table> <BR><br><br><br><br><br><br><br>< br><br><br><br><br><br><br><br><BR><img id='img' src="http://img. jb51.net/online/pintu/dog.jpg"  /><br> <BR>재인쇄할 경우 출처를 표시해 주세요: <a href="http://blog.csdn.net/sunxing007 ">http://blog.csdn.net/sunxing007</a><br> <BR></body> <BR></html> <BR><script> <BR>// 기본값은 ie7 이하가 아닙니다. 배경 이미지를 캐시하면 지연 및 깜박임 현상이 발생합니다. <BR>//(csdn netizen wtcsy http://blog.csdn.net/wtcsy/ 제공) <BR>해 보세요. { <BR>document.execCommand("BackgroundImageCache ", false, true); <BR>}catch(e){alert(e)} <BR> //보조 함수<BR> function $(id){return document .getElementById(id)}; <BR> /************************************************* <BR> * js 퍼즐 게임 v1.6 <BR> * 작성자 sunxing007 <BR> * http://blog.csdn.net/sunxing007 <BR>에서 재인쇄 시 표시해 주세요 ************** ************************************/ <BR> var PicGame = { <BR> 3, <BR> //이미지 출처<BR> img: $('img'), <BR> //셀 높이 <BR> cellHeight: 0, <BR> //Cell width<BR> cellWi dth: 0, <BR> / /이 게임의 주요 개체: Table, 각 TD는 작은 격자에 해당합니다. <BR> Board: $ ( '보드'), <BR> // ​​This.y = $ ('cols').value>1?$('cols').value: 3 > This.board.deleteRow(0); 🎜> 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;        모든 td 가져오기 <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 (" 이 .img.src ")"; <BR>                          tds[i].style.border = "solid #ccc 1px"; <BR> var currCol = i%this.y <BR> // , 각 셀의 배경 맵 위치를 계산하여 이미지처럼 보이도록 합니다 <BR> TDS [i] .style.backgroundpositionx = -This.cellWidth * currCol;                       /**시작: 정렬을 방해*********************/ <BR>                                                               정렬 알고리즘은 다음과 같습니다. 예를 들어 현재 3*3 레이아웃을 사용하고 있습니다. <BR>                      >       그 곳.<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 ] = 숫자; <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)); [ index[i]],tds[i]); <BR>                    } <BR>                    /**끝: 셔플 정렬*************************/ <BR><BR>                   //为每个td添加onclick事件。<BR>               tds = this.board.getElementsByTagName('td');                                               tds[i].onclick = function(){ < ~ index; ; <BR>                                                                                                                                                         //접근 가능 여부는 현재 클릭한 블록을 이동할 수 있는지 여부를 나타냅니다. <BR> var 연결 가능 = <BR>                                                                                       | 1].cells[col].style.Background == ''){                                                                                                              colBlank = col <BR>                     연결 가능 = true; row-1]<BR>                       else if(col 1<PicGame.y && PicGame.board.rows[row].cells[col 1].style.ground == ''){ <BR>                       rowBlank = row; <BR>                        colBlank = col 1; <BR>                        연결 가능 = true; <BR>                        //window.status =" 도달 가능! rowBlank: " rowBlank " colBlank:" colBlank; <BR>                      } <BR>                      else if(col-1>=0 && PicGame.board.rows[row].cells[col-1].style.Background == ''){           rowBlank = 행; <BR>                        colBlank = col - 1; <BR>                        연결 가능 = true; <BR>                        //window.status =" 도달 가능! rowBlank: " rowBlank " colBlank:" colBlank; <BR>                       } <BR>                      else{ <BR>                       //window.status ="접근할 수 없습니다!"; <BR>                        연결 가능 = 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> <BR><BR></style>