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 UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
jQuery实现切换页面布局使用介绍
Oct 09 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
详解addEventListener的三个参数之useCapture
Mar 16 Javascript
Jquery ajax基础教程
Nov 20 Javascript
window.onerror()的用法与实例分析
Jan 27 Javascript
JavaScript如何实现组合列表框中元素移动效果
Mar 01 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
js实现水平滚动菜单导航
Jul 21 Javascript
跨域请求两种方法 jsonp和cors的实现
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
模仿OSO的论坛(二)
2006/10/09 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
PHP错误处理函数
2016/04/03 PHP
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
原生javascript实现图片轮播效果代码
2010/09/03 Javascript
jQuery数据显示插件整合实现代码
2011/10/24 Javascript
Javascript获取CSS伪元素属性的实现代码
2014/09/28 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
npm国内镜像 安装失败的几种解决方案
2017/06/04 Javascript
利用vscode编写vue的简单配置详解
2017/06/17 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
js实现关闭网页出现是否离开提示
2017/12/07 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
2017/12/18 Javascript
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vue监听input标签的value值方法
2018/08/27 Javascript
Angular 实现输入框中显示文章标签的实例代码
2018/11/07 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
2018/12/12 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
Python使用xlrd读取Excel格式文件的方法
2015/03/10 Python
有趣的python小程序分享
2017/12/05 Python
Python实现简单遗传算法(SGA)
2018/01/29 Python
详解Python_shutil模块
2019/03/15 Python
Python使用到第三方库PyMuPDF图片与pdf相互转换
2019/05/03 Python
PyQt5 实现给窗口设置背景图片的方法
2019/06/13 Python
Python 如何定义匿名或内联函数
2020/08/01 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
学院书画协会部门职责
2013/11/28 职场文书
公司行政经理岗位职责
2013/12/24 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
MySQL数据库⾼可⽤HA实现小结
2022/01/22 MySQL
SQL Server使用T-SQL语句批处理
2022/05/20 SQL Server