JS ジグソーパズルはオブジェクト指向であり、完全にコメントされています。 _JavaScript スキル

オンライン デモ http://img.jb51.net/online/pintu/pintu.htm

コードをコピー コードは次のとおりです: JS ジグソーパズル フォントサイズ : 9pt; } テーブル{ ボーダー折りたたみ: } 入力{ width:20px> > a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007 🎜> 行 列 /ボタン> tr>/tr>

br>

転載する場合は出典を明記してください: http://blog.csdn.net/sunxing007

//デフォルトは IE7 以下ではありません。背景画像をキャッシュすることで遅延とちらつきが発生するため、このバグを修正します。 //(csdn netizen wtcsy http://blog.csdn.net/wtcsy/ によって提供) 試してください。 { document.execCommand("BackgroundImageCache ", false, true); }catch(e){alert(e)}; //補助関数 function $(id){return document .getElementById(id)}; /************************************************* * jsパズルゲーム v1.6 * 作者 sunxing007 * http://blog.csdn.net/sunxing007 から転載する場合は明記してください ************** *************************************/ var PicGame = { 3, //画像ソース img: $('img'), // セルの高さ cellHeight: 0, //セルの幅 cellWi dth: 0, //このゲームの主なオブジェクト: テーブル、各 TD は移動可能な小さなグリッドに対応します ボード: $('board'), $('ボード')、 This.y = $('cols').value>1?$('cols').value: 3; .board.deleteRow(0); for(var i=0; i var tr = this.board.insertRow(-1); = 0; this.y; this.img.width/this.y; ; i ){ tds[i].style.width = this.cellWidth; tds[i].style.height = this.cellHeight; tds[i].style.background = "url (" this .img.src ")"; tds[i].style.border = "solid #ccc 1px" ; var currCol = i%this.y; 、各セルの背景マップの位置を計算し、画像のように表示します。 TDS [i] .style.backgroundpositionx = -This. cellWidth * currCol; /**begin: 並べ替えを中断します*******************/ ソートアルゴリズムは次のようなものです。たとえば、現在、3*3のレイアウトがあり、その場所があります。 **/

//目标位置配列 varindex = []; Index[0] = Math.floor(Math.random()*(this.x*this.y)); while(index.length var num = Math.floor(Math.random()*(this.x*this.y)); for(var i=0; i if(index[i]==num){ ブレーク; } } if(i==index.length){ index.length ] = 番号; } //window.status = インデックス; } var cloneTds = []; //取每td克隆、その後依拠目标位置配列インデックス、代替目标位置 for(var i=0; i cloneTds.push(tds[ i].cloneNode(true)); } for(var i=0; i tds[i].parentNode.replaceChild(cloneTds[i] ]、tds[i]); } /**最後: シャッフルソート***********************/

//td 追加 onclick イベント。 tds = this.board.getElementsByTagName('td'); tds[i].onclick = function(){ //reachable は、現在クリックされているブロックが移動できるかどうかを示します 到達可能な変数 = false; if(row 1 到達可能 = true; {到達可能 = true //window .status =" 到達可能! rowBlank: " rowBlank "colBlank:"

else if(col 1 rowBlank = row; colBlank = 列 1; 到達可能 = true; //window.status =" 到達可能! rowBlank: " rowBlank "colBlank:"colBlank; } else if(col-1>=0 && PicGame.board.rows[row].cells[col-1].style.background == ''){ rowBlank = 行; colBlank = 列 - 1; 到達可能 = true; //window.status =" 到達可能! rowBlank: " rowBlank "colBlank:"colBlank; } else{ //window.status =" 到達不能!"; 到達可能 = false; } board.rows[rowBlank].cells[colBlank].cloneNode(true); var tmpCurrNode = PicGame.board.rows[row].cells[col] .cloneNode(true); de,PicGame.board.rows[rowBlank].cells [colBlank]); 🎜> ; 🎜 >}