用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模拟键盘打字效果的方法
这篇文章主要介绍了JS模拟键盘打字效果的方法,涉及javascript鼠标事件及字符串操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
Javascript 虚拟 DOM详解
这篇文章主要为大家介绍了Javascript 虚拟 DOM，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-12-12
基于ajax实现上传图片代码示例解析
这篇文章主要介绍了基于ajax实现上传图片代码示例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
IE8的JavaScript点击事件(onclick)不兼容的解决方法
这篇文章主要介绍了IE8的JavaScript点击事件(onclick)不兼容的解决方法,大家参考使用吧
2013-11-11
前端利用PrintJs实现批量打印文件功能
在项目中遇到一个问题需要实现批量打印功能,研究了测试了一番解决了,把相关的功能记录下,这篇文章主要介绍了前端利用PrintJs实现批量打印文件功能的相关资料,需要的朋友可以参考下
2025-02-02
JavaScript实现五子棋游戏的方法详解
这篇文章主要介绍了JavaScript实现五子棋游戏的方法,结合实例形式详细分析了javascript实现五子棋游戏的具体步骤、原理与相关操作技巧,需要的朋友可以参考下
2019-07-07
JavaScript使用indexOf()实现数组去重的方法分析
这篇文章主要介绍了JavaScript使用indexOf()实现数组去重的方法,结合实例形式分析了使用indexOf()方法进行数组的判断与去重相关原理与具体操作技巧,需要的朋友可以参考下
2018-09-09
JS图片预加载插件详解
这篇文章主要为大家详细介绍了JS图片预加载插件的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
js数组中如何随机取出一个值
这篇文章主要介绍了js数组中如何随机取出一个值,需要的朋友可以参考下
2014-06-06
JavaScript面向对象之七大基本原则实例详解
这篇文章主要介绍了JavaScript面向对象之七大基本原则,结合实例形式详细分析了JavaScript面向对象七大基本原则,包括单一职责、开闭原则、里氏替换、依赖倒置、接口隔离、迪米特法则及组合/聚合复用原则,需要的朋友可以参考下
2020-05-05

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具