온라인 데모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>
