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

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

复制代码 代码如下:

    JS原创作品：JS拼图游戏

    注释完整， 面向对象

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

    行列    开 始


        
        




















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



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