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

在线演示 http://img.jb51.net/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.jb51.net/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>

时间: 2009-06-17

node.js适合游戏后台开发吗?

网站服务器和游戏服务器是怎么样联系到一起的? 1. 游戏分很多种,咱们先来看看MMORPG. 再怎么简单的RPG服务器都免不了处理多人交互的情形,上百人在同一个场景里面,每个客户端都需要收到其他所有人的操作信息. 其次,用户的操作是非常频繁的,一般的服务器倾向于持有长连接.而且这些链接的是频繁交互的,没有明显的持久的分区策略,所以限制了服务器的横向扩展,同一个场景往往只能放在一个物理机上面运行. 再次,端游通常是不敢把逻辑运算放客户端的,用户分分钟给你破解掉,改改金币,刷两件装备再常见不过了.所

javascript 模拟坦克大战游戏(html5版)附源码下载

一.总结关键点和遇到的问题 1.javascript中的继承,最好父类只提供方法共享,属性写到各自子类中,避免父类和子类的构造函数混杂. 2.prototype模拟继承的代码,应写在所有方法定义之前,否则原型对象被改变,方法就变成了未定义,如: 复制代码 代码如下: Hero.prototype = new Tank (0, 0, 0); Hero.prototype.constructor = Hero; Hero.prototype.addLife = function(){ this.li

纯JS实现五子棋游戏兼容各浏览器(附源码)

纯JS五子棋(各浏览器兼容) 效果图:  代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/

JavaScript仿微信打飞机游戏

首先实现微信打飞机游戏,首先会有自己和敌机,采用canvas绘图来生成自己和敌人. 1.生成自己,且可以通过左右键来进行左右移动. //生成自己,且可以左右移动 //控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ var img = new Image(); img.src = "../images/self.png";

js实现大转盘抽奖游戏实例

本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

js猜数字小游戏的简单实现代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

JavaScript 打地鼠游戏代码说明

演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑):  说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc

JS写的贪吃蛇游戏(个人练习)

JS贪吃蛇游戏,个人练习之用,放在这备份一下,   复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t

原生JavaScript实现连连看游戏(附源码)

向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示:  首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>

javascript 制作坦克大战游戏初步 图片与代码

学了一阵子的javascript,该做点东西,虽然东西还是东拼西凑,见笑.方向键控制坦克移动,回车键发射炸弹.其他的功能敌方坦克那些还没写. javascript坦克游戏初步|阿会楠练习作品 body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = n

javascript制作坦克大战全纪录(1)

PS:这个坦克大战是在网上下的一段源码之后,自己进行的重写.本身没有太难的东西,这个案例将js面向对象用的比较好,可以作为js面向对象的入门教程. 1.   创建基本对象,实现坦克简单的移动 1.1    如何在地图中绘制画布? 考虑到浏览器兼容的问题,我们用操作dom的方式来实现游戏对象的绘制和刷新.我们如何存储我们的地图呢? 我们应该把地图用一个二维数组来保存, js中没有二维数组,但是可以通过在一维数组从存储数组来实现. 1.2    代码实现 我们将画布设计为 13 * 13 的一个二维

javascript制作坦克大战全纪录(2)

2.   完善地图 我们的地图中有空地,墙,钢,草丛,水,总部等障碍物. 我们可以把这些全部设计为对象. 2.1  创建障碍物对象群 对象群保存各种地图上的对象,我们通过对象的属性来判断对象是否可以被穿过或被攻击.   Barrier.js: 复制代码 代码如下: // 障碍物基类对象,继承自TankObject  Barrier = function () {      this.DefenVal = 1;  // 防御力      this.CanBeAttacked = true;  //

python使用pygame模块实现坦克大战游戏

本文实例为大家分享了pygame模块实现坦克大战游戏的具体代码,供大家参考,具体内容如下 首先,第一步,游戏简单素材的准备. 炮弹,炮弹,坦克移动.音乐-开火素材. 其次,思路整理. 我们需要几个类,分别是玩家类,敌人类,炮弹类及地图类,开始游戏界面以及结束界面,血条等等. 开始coding. 主函数,new一个对象(java乱入emmm),声明一个对象. # encoding : utf-8 # anthor : comi from gameloop import * from pygame

经典再现 基于JAVA平台开发坦克大战游戏

一.需求描述  1.功能性需求 在功能需求分析阶段,我们的主要任务是指定系统必须提供哪些服务,定义软件完成哪些功能,提供给那些人使用,功能需求是软件开发的一项基本需求,是需求分析必不可少的一部分.坦克大战是一款经典游戏了,本游戏学习了一些前辈们的经验,整体来说讲,游戏分为敌我双方,主要参与战斗的坦克有玩家控制,敌人坦克可以智能随机出现在屏幕上,并且移动,发射一定数量的子弹:玩家可以在规定的区域内随意移动坦克,当有子弹击中玩家时,玩家死亡,游戏结束:敌人坦克智能运行,敌方坦克由于需要具有一定智能性

js实现坦克大战游戏

本文实例为大家分享了js实现坦克大战游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>tank</title> <style type="text/css"> body { margin: 0px; padding: 0px; border: 0px; } .map { position: absolute; top: 30px; width: 39

Java版坦克大战游戏源码示例

整理文档,搜刮出一个Java版坦克大战游戏的代码,稍微整理精简一下做下分享. package tankwar; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import java.io.File; import java.io.FileInputStream; imp

原生javascript制作的拼图游戏实现方法详解

本文实例讲述了原生javascript制作的拼图游戏实现方法.分享给大家供大家参考,具体如下: 实现方法 //1.让所有的li(在ul里)可以拖拽 //2.交换li的位置  计算背景图位置 //1.让所有的li(在ul里)可以拖拽 //根据鼠标的位置,计算目标li的序号 //根据行号和列号计算下标 //行号*3+列号 //2.归位 此处没有背景图  请自行添加 css样式 <!DOCTYPE html> <html> <head> <meta charset=&q

易语言坦克大战游戏制作

易语言是一款可视全中文的编程语言,既然是一款编程语言,那么肯定可以编写游戏,每一种编程语言在学习编程游戏中一般都会编写一种游戏,叫坦克大战,那么最基础的用键代码移动那个坦克,那么该如何编写呢?下面我为大家讲解! 1.打开易语言,新建windows窗口程序. 2.将按钮1放在启动窗口内. 3.随便弄一张图设置成按钮的背景图片 4.在按钮1的属性下面事件中选择被某键按下 5.在按钮1的属性下面事件中选择被某键按下 开始编写,写入代码如下 .版本 2 .程序集 窗口程序集_启动窗口 .子程序 _按钮1