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 相关文章推荐
用javascript获取textarea中的光标位置
May 06 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
js插件YprogressBar实现漂亮的进度条效果
Apr 20 Javascript
详解JavaScript逻辑And运算符
Dec 04 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
微信小程序 开发之快递查询功能的实现
Jan 09 Javascript
vue组件生命周期详解
Nov 07 Javascript
微信小程序实现的贪吃蛇游戏【附源码下载】
Jan 03 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
Vue 中axios配置实例详解
Jul 27 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
DedeCMS 核心类TypeLink.class.php摘要笔记
2010/04/07 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
一个严格的PHP Session会话超时时间设置方法
2014/06/10 PHP
PHPExcel读取EXCEL中的图片并保存到本地的方法
2015/02/14 PHP
php类的定义与继承用法实例
2015/07/07 PHP
PHP加密解密实例分析
2015/12/25 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
编写自己的jQuery插件简单实现代码
2011/04/19 Javascript
当某个文本框成为焦点时即清除文本框内容
2014/04/28 Javascript
封装了一个支持匿名函数的Javascript事件监听器
2014/06/05 Javascript
让javascript加载速度倍增的方法(解决JS加载速度慢的问题)
2014/12/12 Javascript
js操作css属性实现div层展开关闭效果的方法
2015/05/11 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
js中实现字符串和数组的相互转化详解
2016/01/24 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
canvas实现探照灯效果
2017/02/07 Javascript
数组Array的排序sort方法
2017/02/17 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
Python 元组(Tuple)操作详解
2014/03/11 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
Django项目主urls导入应用中views的红线问题解决
2019/08/10 Python
python函数局部变量、全局变量、递归知识点总结
2019/11/15 Python
K最近邻算法(KNN)---sklearn+python实现方式
2020/02/24 Python
Python常用类型转换实现代码实例
2020/07/28 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
string = null 和string = ''的区别
2013/04/28 面试题
大学生写自荐信的技巧
2014/01/08 职场文书
党员2014两会学习心得体会
2014/03/17 职场文书
小学优秀班主任事迹材料
2014/05/17 职场文书
企业总经理任命书
2014/06/05 职场文书
学校社会实践活动总结
2014/07/03 职场文书
岗位安全生产责任书
2014/07/28 职场文书
退休欢送会致辞
2015/07/31 职场文书
村党总支部公开承诺书2016
2016/03/25 职场文书