用javascript做一个webgame连连看大家看下

更新时间：2008年01月19日 20:48:59 作者：

最后成品代码写的仓促，没有容错，封装也不合理，只实现了核心部分，其他部分，喜欢添加的旧添加吧。

下面就开始我的教程（姑且算是教程吧，草草写点吧，时间太少，大家原谅）

以最高难度游戏级别作的分析。
第一步，大体分析
看看游戏主要包含哪些元素，发现3部分，一些成对的图片块，一个能盛图片块的方盘容器，一个能连接两个图块的线。

第二步，元素分析
图块：图块一共有32种不同的图案，每种图案4张，图块会相应鼠标的点击，图块会消失，图块有高度和宽度。
方盘：能承载128个图块，2维承载，横向16块，纵向8块，方盘可以放图块，可以打乱已有图块的位置顺序。
连线：游戏的核心，连接两块图块得中心点，最多只能折两次，不能穿透图块，连线可以通过方盘外部

第三步，抽象
有了上面的分析，把3个元素抽象成3个对象，怎么抽象的，自己动脑吧，我写的代码就是因为动脑不足，导致封装乱七八糟的。

第四部，核心算法

1，洗牌算法（很简单的算法）
把2维数组的数据推到1维数组，交换数据中位置属性，重新按照位置放置元素

2，查找路径：
其实连连看最主要的地方就是如何查找两个图块之间的一条最多只有两个折点的路径，这里的实现方法有很多种，我这里实现的是找到的方法，不是最短路径或者最优路径的方法。
根据研究你会发现，连线可以分成两部分，一部分是法线，一部分是图块投影到法线上的射线，那么，我们就可以利用这个关系，查找一条路径。

首先，设两个图块A,B，那么每个图块都有X向和Y向两条射线，那么如果存在一条Y向法线在AB的X射线公共区之间，或者存在X向法线在AB的Y射线公共区之间，那么就找到了一条路径。

没有实现的地方：（这些基本都是无关紧要了，关口可以根据洗牌的方法很容易改造出来，有兴趣你就去实现吧）
计时、计分、提示、关口

<html> <head> <title>脚本之家-www.jb51.net 连连看</title> <style> .select{filter:Gray} #lineDiv{height:20px} .lineDot{position:absolute; background:#f60;padding:0;font-size:0;width:10px;height:10px} #gridDiv{padding:50px;background:#000;border:5px solid #ccc} #gridTalbe{background-repeat:no-repeat; background-position:center; margin:0} #gridTalbe td{width:41px;height:50px;} #gridTalbe img{width:40px; border-right:1px solid #666;} body{ padding:0; margin:0} </style> </head> <body> <table width="100%" border="1">   <tr>     <td><div id="gridDiv"></div></td>     <td width="180" align="center" bgcolor="#CCCCCC"><input name="button" type="button" onClick="oGrid.shuffle()" value="洗牌"></td>   </tr> </table> <div id="lineDiv"></div> <div id="debug"></div> <script> /************************************************************************ 设计：tot 时间：2007-12-29 MSN：xiaotot@msn.com ************************************************************************/ //记录被选择图块的信息 var selectImg = ""; var selectX = 0; var selectY = 0; //图块宽度和高度，用来计算画线的位置 var stepX = 41; var stepY = 50; //初始化棋盘,只能以oGrid命名 var oGrid = new objGrid(16,8); /*****************************功能函数*******************************************/ //数组元素随机排序,tot设计，修改请保留 function rndArray(arr){     var le = arr.length;         for(var i=0; i < le; i++){             var s = Math.floor(Math.random()*le);             var zx = arr[i].x;             var zy = arr[i].y;//这里不能写成z=arr[i],因为object是引用             arr[i].x = arr[s].x;             arr[i].y = arr[s].y;             arr[s].x = zx;             arr[s].y = zy;         } } //数组元素随机排序 function ArrayRnd(arr,times){     for(i = 0; i < times; i++)rndArray(arr) } //获取Html元素的绝对位置 function GetAbsoluteLocation(element){     if ( arguments.length != 1 || element == null ) return null;     var offsetTop = element.offsetTop;     var offsetLeft = element.offsetLeft;     var offsetWidth = element.offsetWidth;     var offsetHeight = element.offsetHeight;     while( element = element.offsetParent ) {          offsetTop += element.offsetTop;          offsetLeft += element.offsetLeft;      }      return {          absoluteTop: offsetTop,         absoluteLeft: offsetLeft,         offsetWidth: offsetWidth,         offsetHeight: offsetHeight     };  } /*****************************封装对象*******************************************/ //方盘对象，用来放置图块，tot设计，修改请保留 function objGrid(width,height){     var imgNum = 32; //图块样式个数     var gridNum = width * height;     //初始化图块所用的图片名     var arrImg = new Array(imgNum);     for(i = 0;i < imgNum; i++) arrImg[i] = "llk_" + i;     //初始化图块数组     var arrImgBlock = new Array(gridNum);     for(i = 0; i< gridNum; i++){         arrImgBlock[i] = new objImgBlock(arrImg[Math.floor(i /4)]);         arrImgBlock[i].x = Math.floor(i / height);         arrImgBlock[i].y = i % height;     }     //打乱次序     ArrayRnd(arrImgBlock,5);     //生成方盘对象     var obj = new Object();     obj.backGround = "back.gif";//方盘的背景图片     obj.arrGrid = new Array(width);     //初始化方盘二维数组     for(i = 0; i < width; i++)         obj.arrGrid[i] = new Array(height);     //向放盘中放置图块     obj.init = function (arrBlock){         for(i = 0; i < width; i++)             for(j = 0; j < height; j++){                 this.arrGrid[i][j] = "";             }         grid = arrBlock.length;         for(i = 0; i < grid; i++)                 this.arrGrid[arrBlock[i].x][arrBlock[i].y] = arrBlock[i];         this.drawGrid()         this.setGridBackground(this.backGround)     }     //洗牌     obj.shuffle = function (){         var arrIBlock = new Array();         for(i = 0; i < width; i++)             for(j = 0; j < height; j++)                 if(this.arrGrid[i][j] != "")arrIBlock.push(this.arrGrid[i][j]);         ArrayRnd(arrIBlock,5);         this.init(arrIBlock);     }     //查找最远射点     obj.findRadial = function (point){         var minX = -1, minY = -1, maxX = width, maxY = height;         //水平查找最远射点         for(i = 0; i < width; i++){             if(i < point.X){                 if(this.arrGrid[i][point.Y] != "")                     minX = point.X;                 else{                     if(minX == point.X) minX = i;                 }             }else if(i > point.X){                 if(this.arrGrid[i][point.Y] != ""){                     maxX = i - 1;                     break;                 }             }         }         //垂直查找最远射点         for(i = 0; i < height; i++){             if(i < point.Y){                 if(this.arrGrid[point.X][i] != "")                     minY = point.Y;                 else{                     if(minY == point.Y) minY = i;                 }             }else if(i > point.Y){                 if(this.arrGrid[point.X][i] != ""){                     maxY = i - 1;                     break;                 }             }         }         return {             MinX : minX,             MinY : minY,             MaxX : maxX,             MaxY : maxY         }     }     //查找法线     obj.findNormal = function(sPoint,ePoint){         var    startPoint, endPoint         var sRadial = this.findRadial(sPoint);         var eRadial = this.findRadial(ePoint);         var pass;//是否可以通过标志                  maxSX = Math.max(sRadial.MinX,eRadial.MinX)         minEX = Math.min(sRadial.MaxX,eRadial.MaxX);         maxSY = Math.max(sRadial.MinY,eRadial.MinY);         minEY = Math.min(sRadial.MaxY,eRadial.MaxY)         //查找横法线         if( maxSY <= minEY){             if(maxSY == -1){                 startPoint = new objPoint(sPoint.X,-1);                 endPoint = new objPoint(ePoint.X,-1);             }else if(minEY == height){                 startPoint = new objPoint(sPoint.X,height);                 endPoint = new objPoint(ePoint.X,height);             }             else{                 for(j = maxSY; j <= minEY; j++){                     pass = true;                     for(i = Math.min(sPoint.X,ePoint.X) + 1; i < Math.max(sPoint.X,ePoint.X); i++){                         if(this.arrGrid[i][j] != "") pass = false;                     }                     if(pass){                         startPoint = new objPoint(sPoint.X,j);                         endPoint = new objPoint(ePoint.X,j);                     }                 }             }         }//查找竖法线         else if( maxSX <= minEX){             if(maxSX == -1){                 startPoint = new objPoint(-1,sPoint.Y);                 endPoint = new objPoint(-1,ePoint.Y);             }else if(minEX == width){                 startPoint = new objPoint(width,sPoint.Y);                 endPoint = new objPoint(width,ePoint.Y);             }             else{                 for(i = maxSX; i <= minEX; i++){                     pass = true;                     for(j = Math.min(sPoint.Y,ePoint.Y) + 1; j < Math.max(sPoint.Y,ePoint.Y); j++){                         if(this.arrGrid[i][j] != "") pass = false;                     }                     if(pass){                         startPoint = new objPoint(i,sPoint.Y);                         endPoint = new objPoint(i,ePoint.Y);                     }                 }             }         }         //返回法线端点         if(startPoint){             return{sP : startPoint, eP : endPoint}         }         else {return false};     }     //画方盘     obj.drawGrid = function (){         var gDiv = document.getElementById("gridDiv");         var tempHtml = "<table id=gridTalbe border=0 cellpadding=0 cellspacing=0 align=center>";         for(i = 0; i < height; i++){             tempHtml += "</tr>";             for(j = 0; j < width; j++){                 tempHtml += "<td>";                 if(this.arrGrid[j][i] != "")                      tempHtml += this.arrGrid[j][i].toHtml();                 tempHtml += "</td>";             }             tempHtml += "</tr>";         }         tempHtml += "</table>";         gDiv.innerHTML = tempHtml;     }     //设置背景     obj.setGridBackground = function(img){         var gTable = document.getElementById("gridTalbe");         gTable.style.backgroundImage = "url(images/" + img + ")";         this.backGround = img;     }     //执行初始化     obj.init(arrImgBlock);     return obj; } //图块对象 function objImgBlock(pic){     var obj = new Object();     obj.picName = pic;     obj.x = 0;     obj.y = 0;     obj.toHtml = function(){         return "<img name=" + this.picName + " onclick=clickImg(" + this.x + "," + this.y + ") src=images/"          + this.picName + ".gif>"     }     return obj; } //坐标点对象，对应于承载图块的二元数组下标 function objPoint(x,y){ return{ X : x, Y : y }} //点击图块的动作 function clickImg(x,y){     eObj = event.srcElement;     if((selectImg.name == eObj.name) && (selectImg !== eObj)){         if(Line(new objPoint(selectX,selectY),new objPoint(x,y))){             selectImg.style.display = "none";             eObj.style.display = "none";             selectImg = "";             selectX = 0; selectY = 0;         }else changeSelect(eObj,x,y)     }else{         changeSelect(eObj,x,y)     } } //更换选择的图块 function changeSelect(o,x,y){     selectImg.className = "";     selectImg = o;     selectImg.className = "select";     selectX = x; selectY = y; } //画线 function Line(sPoint,ePoint){     var nLine = oGrid.findNormal(sPoint,ePoint);     if(nLine){         oGrid.arrGrid[sPoint.X][sPoint.Y] = "";         oGrid.arrGrid[ePoint.X][ePoint.Y] = "";         drawLine(sPoint,nLine.sP);         drawLine(nLine.sP,nLine.eP);         drawLine(ePoint,nLine.eP);         setTimeout(clearLine,500);         return true;     }else{         return false     } } //连接两点的画线函数 function drawLine(sPoint,ePoint){     var startPoint, endPoint, lineType = true;//默认画横线     var lineLen;//画线长度     var linDiv = document.getElementById("lineDiv");     var O = document.getElementById("gridTalbe");     //原点的绝对坐标     var oPoint = new objPoint(GetAbsoluteLocation(O).absoluteLeft - 25, GetAbsoluteLocation(O).absoluteTop - 30);     if(sPoint.X == ePoint.X){ //画竖线         if(sPoint.Y > ePoint.Y){//判断起始点             startPoint = ePoint;             endPoint = sPoint;         }else{             startPoint = sPoint;             endPoint = ePoint;         }         lineLen = endPoint.Y - startPoint.Y + 1;         lineType = false;     }else{//画横线         if(sPoint.X > ePoint.X){//判断起始点             startPoint = ePoint;             endPoint = sPoint;         }else{             startPoint = sPoint;             endPoint = ePoint;         }         lineLen = endPoint.X - startPoint.X + 1;     }     for(i = 1; i <= lineLen; i++){         var lineDot = document.createElement("<div class=lineDot></div>");         lineDot.style.left = lineType ? (oPoint.X + stepX * (startPoint.X + i) + "px") : (oPoint.X + stepX * (startPoint.X + 1) + "px");         lineDot.style.top = lineType ? (oPoint.Y + stepY * (startPoint.Y + 1) + "px") : (oPoint.Y + stepY * (startPoint.Y + i) + "px");         linDiv.insertBefore(lineDot);     } } //清除画线 function clearLine(){     var linDiv = document.getElementById("lineDiv");     linDiv.innerHTML = ""; } //调试用 function debug(str){     var linDiv = document.getElementById("debug");     linDiv.innerHTML = str + "" + linDiv.innerHTML; } function odebug(obj,oname){     var linDiv = document.getElementById("debug");     for(o in obj){         if(typeof(obj[o]) == "object"){             odebug(obj[o],oname + o + ".")         }         else linDiv.innerHTML = oname + o + "=" + obj[o] + "" + linDiv.innerHTML;     } } </script> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

js
游戏

JS实现li标签的删除
这篇文章主要为大家详细介绍了JS实现li标签的删除，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-04-04
Jquery代码实现图片轮播效果（一）
经理交给我一个网站新闻资讯网页开发的活儿，对于我这样的java程序员，没有接触过网页设计这么高端的东东，该怎么搞呢，去度娘那搜索到不少结果，而且很大部分都是用jquery做的，于是根据自己的一些的理解，提供了这篇jquery轮播效果的讲解，有需要的朋友可以来参考下
2015-08-08
JavaScript的内置对象Math和字符串详解
这篇文章主要为大家介绍了JavaScript的内置对象Math和字符串，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
bootstrap table 多选框分页保留示例代码
在使用bootstrap table的复选框功能的时候，由于采用服务端分页，当在第一页选择了某些数据，然后点击第二页选择一些数据，再次点回第一页，发现原先选择的数据已经清空了，原来的多选框并不支持翻页保留多选数据，怎么解决呢，下面小编给大家分享下解决思路
2017-03-03
js实现tab选项卡函数代码
js实现tab选项卡函数代码，需要的朋友可以参考下，这样的代码也是比较常用的，相当原理也比较简单。
2010-04-04
微信小程序实现上传图片小功能
这篇文章主要为大家详细介绍了微信小程序实现上传图片小功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
JS基于VUE组件实现城市列表效果
这篇文章主要为大家详细介绍了JS基于VUE组件实现城市列表效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
bootstrap treeview 扩展addNode方法动态添加子节点的方法
bootstrap-treeview 是一款基于Jquery+bootstrap的树控件，这篇文章主要介绍了bootstrap treeview 扩展addNode方法动态添加子节点的方法,需要的朋友可以参考下
2017-11-11
如何实现表格中行点击时的渐扩效果！
如何实现表格中行点击时的渐扩效果！...
2007-01-01
纯JS实现根据CSS的class选择DOM
这篇文章主要介绍了纯JS实现根据CSS的class选择DOM,需要的朋友可以参考下
2014-03-03