JS Jigsaw Puzzle is object-oriented and fully commented.

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

WBOY

Release： 2016-05-16 18:51:32

Original

1236 people have browsed it

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