JS 拼图游戏面向对象，注释完整。_javascript技巧-js-Tutorial-php.cn

JS 拼图游戏面向对象，注释完整。_javascript技巧

WBOY

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

Original

1232 Leute haben es durchsucht

在线演示 http://img.jb51.net/online/pintu/pintu.htm

复制代码代码如下:

JS拼图游戏

    JS原创作品：JS拼图游戏

    注释完整，面向对象

    转载请注明来自http://blog.csdn.net/sunxing007

    行列

转载请注明来自http://blog.csdn.net/sunxing007

<script> //ie7以下默认不缓存背景图像，造成延迟和闪烁，修正此bug. //（csdn网友wtcsy提供http://blog.csdn.net/wtcsy/） try{ 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 = { //行数 x: 3, //列数 y: 3, //图片源 img: $('img'), //单元格高度 cellHeight: 0, //单元格宽度 cellWidth: 0, //本游戏最主要的对象：表格，每个td对应着一个可以移动的小格子 board: $('board'), //初始函数 init: function(){ //确定拼图游戏的行数和列数 this.x = $('lines').value>1?$('lines').value : 3; this.y = $('cols').value>1?$('cols').value : 3; //删除board原有的行 while(this.board.rows.length>0){ this.board.deleteRow(0); } //按照行数和列数重新构造board for(var i=0; i<this.x; i++){ var tr = this.board.insertRow(-1); for(var j=0; j<this.y; j++){ var td=tr.insertCell(-1); } } //计算单元格高度和宽度 this.cellHeight = this.img.height/this.x; this.cellWidth = this.img.width/this.y; //获取所有的td var tds = this.board.getElementsByTagName('td'); //对每个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 currLine = parseInt(i/this.y); var currCol = i%this.y; //这里最重要，计算每个单元格的背景图的位置，使他们看起来像一幅图像 tds[i].style.backgroundPositionX = -this.cellWidth * currCol; tds[i].style.backgroundPositionY = -this.cellHeight * currLine; } /** begin: 打乱排序*******************/ /** * 打乱排序的算法是这样的：比如我当前是3*3布局， * 则我为每一个td产生一个目标位置，这些目标位置小于9且各不相同， * 然后把它们替换到那个地方。 **/ //目标位置序列 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: 打乱排序*********************/ //为每个td添加onclick事件。 tds = this.board.getElementsByTagName('td'); for(var i=0; i<tds.length; i++){ tds[i].onclick = function(){ //被点击对象的坐标 var row = this.parentNode.rowIndex; var col = this.cellIndex; //window.status = "row:" + row + " col:" + col; //空白方块的坐标 var rowBlank = 0; var colBlank = 0; //reachable表示当前被点击的方块是否可移动 var reachable = false; if(row+1<PicGame.x && PicGame.board.rows[row+1].cells[col].style.background == ''){ rowBlank = row + 1; colBlank = col; reachable = true; //window.status +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank; } else if(row-1>=0 && PicGame.board.rows[row-1].cells[col].style.background == ''){ rowBlank = row - 1; colBlank = col; reachable = true; //window.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].cells[colBlank].cloneNode(true); //需要注意的是克隆对象丢失了onclick方法，所以要补上 tmpBlankNode.onclick = arguments.callee; var tmpCurrNode = PicGame.board.rows[row].cells[col].cloneNode(true); tmpCurrNode.onclick = arguments.callee; PicGame.board.rows[rowBlank].cells[colBlank].parentNode.replaceChild(tmpCurrNode,PicGame.board.rows[rowBlank].cells[colBlank]); PicGame.board.rows[row].cells[col].parentNode.replaceChild(tmpBlankNode, PicGame.board.rows[row].cells[col]); } } } } }; PicGame.init(); $('start').onclick = function(){ PicGame.init(); } </script>

JS 拼图游戏 面向对象，注释完整。_javascript技巧

JS 拼图游戏面向对象，注释完整。_javascript技巧