JS 拼图游戏 面向对象,注释完整。


Posted in Javascript onJune 18, 2009

在线演示 http://img.3water.com/online/pintu/pintu.htm

<html> 
<head> 
<title>JS拼图游戏</title> 
<style> 
    body{ 
        font-size:9pt; 
    } 
table{ 
border-collapse: collapse; 
} 
input{ 
    width:20px; 
} 
</style> 
</head> 
<body> 
    JS原创作品:JS拼图游戏<br> 
    注释完整, 面向对象<br> 
    转载请注明来自<a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a><br> 
    <input type="text" id="lines" value='3'/>行<input type="text" id="cols" value='3'/>列    <button id="start"> 开 始 </button><br> 
<table id="board" border=1 cellspacing=0 cellpadding=0> 
        <tr><td></td><td></td><td></td></tr> 
        <tr><td></td><td></td><td></td></tr> 
</table> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<img id='img' src="http://img.3water.com/online/pintu/dog.jpg" style="" /><br> 
转载请注明来自<a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a><br> 
</body> 
</html> 
<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>

Javascript 相关文章推荐
jQuery中size()方法用法实例
Dec 27 Javascript
jquery调取json数据实现省市级联的方法
Jan 29 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
JavaScript中的this陷阱的最全收集并整理(没有之一)
Feb 21 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
JS实现简单的星期格式转换功能示例
Jul 23 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 Javascript
如何使用原生Js实现随机点名详解
Jan 06 Javascript
使用javascript解析二维码的三种方式
Nov 11 Javascript
JS 分号引起的一段调试问题
Jun 18 #Javascript
javascript 一段左右两边随屏滚动的代码
Jun 18 #Javascript
Input 特殊事件onpopertychange和oninput
Jun 17 #Javascript
jquery 上下滚动广告
Jun 17 #Javascript
jQuery Ajax文件上传(php)
Jun 16 #Javascript
JavaScript 高级语法介绍
Jun 15 #Javascript
JavaScript 撑出页面文字换行
Jun 15 #Javascript
You might like
Get或Post提交值的非法数据处理
2006/10/09 PHP
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
PHP5多态性与动态绑定介绍
2015/04/03 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
使用Javascript接收get传递的值的代码
2011/11/30 Javascript
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
Node.js模块加载详解
2014/08/16 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
Axios学习笔记之使用方法教程
2017/07/21 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
2018/02/23 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
Javascript通过控制类名更改样式
2019/05/24 Javascript
JS多个表单数据提交下的serialize()应用实例分析
2019/08/27 Javascript
js实现限定区域范围拖拉拽效果
2020/11/20 Javascript
[56:45]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第一局
2016/02/28 DOTA
从零学python系列之新版本导入httplib模块报ImportError解决方案
2014/05/23 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
详解使用pymysql在python中对mysql的增删改查操作(综合)
2017/01/18 Python
Sublime开发python程序的示例代码
2018/01/24 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python判断对象是否为文件对象(file object)的三种方法示例
2019/04/26 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Python面向对象程序设计之类和对象、实例变量、类变量用法分析
2020/03/23 Python
使用Pycharm分段执行代码
2020/04/15 Python
美国卡车、吉普车和SUV零件网站:4 Wheel Parts
2016/11/24 全球购物
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
《观舞记》教学反思
2014/04/16 职场文书
行政处罚事先告知书
2015/07/01 职场文书
2016年优秀少先队辅导员事迹材料
2016/02/26 职场文书
Python使用scapy模块发包收包
2021/05/07 Python