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解决图片路径不存在执行替换路径
Feb 06 Javascript
Jquery显示、隐藏元素以及添加删除样式
Aug 09 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
Oct 18 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
限时抢购-倒计时的完整实例(分享)
Sep 17 Javascript
react-native android状态栏的实现
Jun 15 Javascript
通过jQuery学习js类型判断的技巧
May 27 jQuery
JS实现百度搜索框关键字推荐
Feb 17 Javascript
javascript实现一款好看的秒表计时器
Sep 05 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
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
AngularJs自定义服务之实现签名和加密
2016/08/02 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
微信小程序与php 实现微信支付的简单实例
2017/06/23 Javascript
微信小程序之绑定点击事件实例详解
2017/07/07 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
js中split()方法得到的数组长度问题
2018/07/19 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
vue路由跳转传递参数的方式总结
2020/05/10 Javascript
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
Python+OpenCV+pyQt5录制双目摄像头视频的实例
2019/06/28 Python
Numpy数组的广播机制的实现
2020/11/03 Python
10张动图学会python循环与递归问题
2021/02/06 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
美国最大的香水出口:FragranceX.com
2017/11/04 全球购物
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
法院实习人员自我鉴定
2013/09/26 职场文书
应届毕业生的个人自我鉴定
2013/10/24 职场文书
理工大学毕业生自荐信
2013/11/01 职场文书
学习党课思想汇报
2013/12/29 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
个人自我剖析材料
2014/09/30 职场文书
JS异步堆栈追踪之为什么await胜过Promise
2021/04/28 Javascript
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技