JS连连看源码完美注释版(推荐)
字体：[ ] 类型：转载 时间：
连连看最难的部分应该是路径搜索，即鼠标点的两点之间看有无可通的路径。 看过有人写的递归写法，心里痒痒，就捉摸了一下，发现不用递归的情况下难度也不大
闲来无事，也写一个javascript连连看，注释比较完整，想学的朋友可要看了。
连连看最难的部分应该是路径搜索，即鼠标点的两点之间看有无可通的路径。 看过有人写的递归写法，心里痒痒，就捉摸了一下，发现不用递归的情况下难度也不大。
路径搜索由简到难分析，先分析一条直线上是否可直线连通，再分析一条直线上的两点通过拐两个弯是否可通,最后分析不在一条直线上的情况.
在IE6, IE8, firefox3.0.3下测试过. 代码如下:&html&&head&&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&&title&JS连连看源码完美注释版&/title&&/head&&style&&table{&&border-collapse:&}&td{&&border: solid #ccc 1&&height: 36&&width: 36&&cursor:&}&td img{&& height: 30&& width: 30&& border: solid #fff 3&& /*&& filter: alpha(opacity=80);&& -moz-opacity: 0.8;&& opacity: 0.8;&& */&}&/style&&script&//以下部分为路径搜索算法部分,与表现层无关
//全局变量var X = 16;//总行数var Y = 14;//总列数var types = 15;//图形种类
//布局矩阵//为了算法方便，矩阵的第一行，第一列，最后一行，最后一列都标注为0，天然通路。var arr = new Array(Y);//显示布局的table元素
var p1 =//搜索路径用的第1个点的坐标var p2 =//搜索路径用的第2个点的坐标var e1 =//第1个点对应的元素var e2 =//第2个点对应的元素
//路径搜索，给出两个点，搜索出通路//通路用可连通的点表示function getPath(p1, p2){&//开始搜索前对p1,p2排序，使p2尽可能的在p1的右下方。&//这样做可以简化算法&if(p1.x&p2.x){&&var t = p1; &&p1 = p2;&&p2 =&&}&else if(p1.x==p2.x){&&if(p1.y&p2.y){&&&var t = p1; &&&p1 = p2;&&&p2 =&&&}&}&//通过分析连连看中两点之间的位置关系，逐步由简到难分析每一种类型&//第一种类型， 两点是否在一条直线上，而且两点之间可直线连通&if((onlineY(p1, p2)||onlineX(p1, p2)) && hasLine(p1, p2)){&&status = 'type 1';&&return [p1,p2];&}&//第二种类型， 如果两点中任何一个点被全包围，则不通。&if( !isEmpty({x:p1.x, y:p1.y+1}) && !isEmpty({x:p1.x, y:p1.y-1}) && !isEmpty({x:p1.x-1, y:p1.y}) && !isEmpty({x:p1.x+1, y:p1.y}) ){&&status = 'type 2';&&&}&if( !isEmpty({x:p2.x, y:p2.y+1}) && !isEmpty({x:p2.x, y:p2.y-1}) && !isEmpty({x:p2.x-1, y:p2.y}) && !isEmpty({x:p2.x+1, y:p2.y}) ){&&status = 'type 2';&&&}&//第三种类型， 两点在一条直线上，但是不能直线连接&var pt0, pt1, pt2, pt3;&//如果都在x轴，则自左至右扫描可能的路径，&//每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通&if(onlineX(p1, p2)){&&for(var i=0; i&Y; i++){&&&if(i==p1.y){&&&&&&&}&&&pt0 = p1;&&&pt1 = {x: p1.x, y: i};&&&pt2 = {x: p2.x, y: i};&&&pt3 = p2;&&&//如果顶点不为空，则该路不通。&&&if(!isEmpty(pt1) || !isEmpty(pt2)){&&&&&&&}&&&if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){&&&&status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';&&&&return [pt0, pt1, pt2, pt3];&&&}&&}&}&//如果都在y轴，则自上至下扫描可能的路径，&//每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通&if(onlineY(p1, p2)){&&for(var j=0; j&X; j++){&&&if(j==p1.x){&&&&&&&&}&&&pt0 = p1;&&&pt1 = {x:j, y:p1.y};&&&pt2 = {x:j, y:p2.y};&&&pt3 = p2;&&&//如果顶点不为空，则该路不通。&&&if(!isEmpty(pt1) || !isEmpty(pt2)){&&&&&&&}&&&if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){&&&&status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';&&&&return [pt0, pt1, pt2, pt3];&&&}&&}&}&//第四种类型， 两点不在一条直线上。&//先纵向扫描可能的路径&//同样，每次构造4个顶点，看是否可通&for(var k=0; k&Y; k++){&&&pt0 = p1;&&&pt1 = {x:p1.x, y:k};&&&pt2 = {x:p2.x, y:k};&&&pt3 = p2;&&&status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';&&&//特殊情况，如果pt0和pt1重合&&&if(equal(pt0,pt1)){&&&&//如果pt2不为空，则此路不通&&&&if(!isEmpty(pt2)){&&&&&&&&&}&&&&if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){&&&&&return [pt1, pt2, pt3];&&&&}&&&&else{&&&&&&&&&}&&&}&&&//特殊情况，如果pt2和pt3重合&&&else if(equal(pt2,pt3)){&&&&//如果pt1不为空，则此路不通&&&&if(!isEmpty(pt1)){&&&&&&&&&}&&&&if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){&&&&&return [pt0, pt1, pt2];&&&&}&&&&else{&&&&&&&&&}&&&}&&&//如果pt1, pt2都不为空,则不通&&&if(!isEmpty(pt1) || !isEmpty(pt2)){&&&&&&&}&&&if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){&&&&return [pt0, pt1, pt2, pt3];&&&}&}&//横向扫描可能的路径&for(var k=0; k&X; k++){&&&pt0 = p1;&&&pt1 = {x:k, y:p1.y};&&&pt2 = {x:k, y:p2.y};&&&pt3 = p2;&&&status = '(x:' + pt0.x + ',y:' + pt0.y + ')' + ', (x:' + pt1.x + ',y:' + pt1.y + ')' + ', (x:' + pt2.x + ',y:' + pt2.y + ')' + ', (x:' + pt3.x + ',y:' + pt3.y + ')';&&&if(equal(pt0,pt1)){&&&&if(!isEmpty(pt2)){&&&&&&&&&}&&&&if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){&&&&&return [pt1, pt2, pt3];&&&&}&&&}&&&if(equal(pt2,pt3)){&&&&if(!isEmpty(pt1)){&&&&&&&&&}&&&&if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){&&&&&return [pt0, pt1, pt2];&&&&}&&&}&&&if(!isEmpty(pt1) || !isEmpty(pt2)){&&&&&&&}&&&if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){&&&&return [pt0, pt1, pt2, pt3];&&&}&}&//status='type4';&&/********** end type 4 **************/}
function equal(p1, p2){&return ((p1.x==p2.x)&&(p1.y==p2.y));}
function onlineX(p1, p2){&return p1.y==p2.y;}
function onlineY(p1, p2){&return p1.x==p2.x;&}
function isEmpty(p){&return (arr[p.y][p.x]==0);&}
function hasLine(p1, p2){&if(p1.x==p2.x&&p1.y==p2.y){&&&&}&if(onlineY(p1, p2)){&&var i = p1.y&p2.y?p2.y:p1.y;&&i = i+1;&&var max = p1.y&p2.y?p1.y:p2.y;&&for(; i& i++){&&&var p = {x: p1.x, y: i};&&&if(!isEmpty(p)){&&&&break&&&}&&}&&if(i==max){&&&&&}&&&}&else if(onlineX(p1, p2)){&&var j = p1.x&p2.x?p2.x:p1.x;&&j = j+1;&&var max = p1.x&p2.x?p1.x:p2.x;&&for(; j& j++){&&&var p = {x: j, y: p1.y};&&&if(!isEmpty(p)){&&&&break&&&}&&}&&if(j==max){&&&&&}&&&}}//以下部分为表现层部分,包括绘图, 初始化矩阵, 绑定鼠标事件...function $(id){return document.getElementById(id)}
var t1, t2;//测试用//图片基路径var IMG_PATH = 'http://www.jb51.net';//初始化function init(){&//构造图片库&var imgs = new Array(30);&for(var i=1; i&=30; i++){&&imgs[i] = 'r_' + i + '.gif';&}&tbl = $('tbl');&//构造table&for(var row=0;row&Y-2;row++){&&var tr=tbl.insertRow(-1);&&for(var col=0;col&X-2;col++) {&&&var td=tr.insertCell(-1);&&}&}&//构造矩阵&for(var i=0; i&Y; i++){&&arr[i] = new Array(X);&&for(var j=0; j&X; j++){&&&arr[i][j] = 0;&&}&}&var total = (X-2)*(Y-2);&var tmp = new Array(total);//产生随机位置用&for(var i=0; i& i++){&&tmp[i] = 0;&}&for(var i=0; i& i++){&&if(tmp[i]==0){&&&var t = Math.floor(Math.random()*types) + 1;&&&tmp[i] =&&&while(true){&&&&var c = Math.floor(Math.random()*(total-i)) +&&&&if(tmp[c]==0){&&&&&tmp[c] =&&&&&&&&&}&&&}&&}&}&var c = 0;&for(var i=1; i&Y-1; i++){&&for(var j=1; j&X-1; j++){&&&arr[i][j] = tmp[c++];&&&tbl.rows[i-1].cells[j-1].innerHTML = '&img src="' + IMG_PATH + imgs[arr[i][j]] + '" /&';&&}&&}&//绑定鼠标事件& var img1, img2;&document.body.onclick = function(e){&&var el = document.all?event.srcElement:e.&&if(el.parentNode.tagName!='TD'){&&&&&}&&if(!img1){&&&img1 =&&}&&else{&&&img2 =&&}&&el.style.border = 'solid #3399FF 3px';&&el = el.parentN&&if(el.innerHTML==''){&&&p1 = p2 = e1 = e2 =&&}&&var r = el.parentNode.rowIndex +1;&&var c = el.cellIndex +1;&&if(p1==null){&&&//el.childNodes[0].style.border = 'solid #ccc 3px';&&&p1 = {x:c, y:r};&&&e1 =&&}&&else{&&&p2 = {x:c, y:r};&&&e2 =&&&if(!equal(p1, p2)&&e1.innerHTML==el.innerHTML){&&&&var path = getPath(p1, p2);&&&&if(path!=null){&&&&&e1.innerHTML = e2.innerHTML = '';&&&&&arr[p1.y][p1.x] = arr[p2.y][p2.x] = 0;&&&&}&&&}&&&if(t1){t1.style.backgroundColor = '';}&&&t1 = e1;&&&if(t2){t2.style.backgroundColor = '';}&&&t2 = e2;&&&img1.style.border = 'solid #fff 3px';&&&img2.style.border = 'solid #fff 3px';&&&p1 = p2 = e1 = e2 = img1 = img2 =&&&t1.style.backgroundColor = t2.style.backgroundColor = 'lightpink';&&}&}}&/script&&body onload="init();"&&js连连看完美注释版&br /&&&table id="tbl" cellspacing="0" cellpadding="0" border="1"&&&/table&&/body&&/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具[原创]JS连连看 注释齐全 适合练手 - 开源中国社区
当前访客身份：游客 [
当前位置：
发布于 日 11时,
原创，以前练手写的连连看游戏，转载请注明出处，谢谢。
代码片段(3)
index.html&~&491B&&&&
&!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"&
&meta http-equiv="Content-Type" content="text/ charset=utf-8" /&
&meta name="author" content="" /&
&title&连连看&/title&
&link rel="stylesheet" type="text/css" href="style.css" /&
&div id="main"&&/div&
&script type="text/javascript" src="lianliankan.js"&&/script&
lianliankan.js&~&8KB&&&&
// 每行图片数量
var rowImageNum = 10;
// 每列图片数量
var colImageNum = 11;
// 图片类型数量
var imageTypeNum = 24;
var rowNum = rowImageNum + 2;
var colNum = colImageNum + 2;
// 初始化一个二维矩阵，存放的是对应的图片类型
var matrix = new Array(colNum);
for(var j = 0; j & colN j++)
matrix[j] = new Array(rowNum);
// 生成成对随机图片
// 要显示的图片数量(2个为1对)
var showImages = rowImageNum * colImageNum / 2;
// 生成的图片数组
var showImagesArray = new Array(showImages);
// 生成图片
for(var i = 0, n = 0, imgNum = 0; i & showI i++, n += 2, imgNum++)
if(imgNum &= imageTypeNum)
imgNum = 0;
var img = imgNum + 1;
showImagesArray[n] =
showImagesArray[n+1] =
// 随机排序
showImagesArray = randomOrder(showImagesArray);
// 将要输出的内容
var html = "&table&\n";
// 行与列+2是因为上下左右的第一行都应为空
var n = 0;
for(var row = 0; row & colN row++)
html += "&tr&\n";
for(var col = 0; col & rowN col++)
//html += "&td&\n" + row + ':' +
html += "&td&\n";
if(row == 0 || col == 0 || (colNum - 1) == row || (rowNum - 1) == col)
matrix[row][col] = 0;
matrix[row][col] = showImagesArray[n];
if(matrix[row][col] & 0)
html += "&img src=\"images/"+ matrix[row][col] +".png\" onclick=\"checkPath(this, " + row + ", " + col + ")\"&\n";
html += "&/td&\n";
document.getElementById("main").innerHTML =
* 检查路径
* @param object obj
* @param integer x
* @param integer y
// 临时变量，保存图片对象
var tempO =
// 两对图片的路径信息
var pathInfo = new Array({x:0,y:0}, {x:0,y:0});
// 图片数量
var imageTotal = rowImageNum * colImageN
function checkPath(o, x, y)
// 如果矩阵对应的位置存在图片
if(matrix[x][y])
// 之前未选中图片
if(tempO == null)
// 改变选中的图片单元格背景色
tempO.parentNode.style.background = "#690";
// 记录选中的图片位置
pathInfo[0].x =
pathInfo[0].y =
// 两次选中的不是同一张图片，进行比较
else if(o != tempO)
// 清除背景颜色
tempO.parentNode.style.background = "#fff";
// 记录选中的图片位置
pathInfo[1].x =
pathInfo[1].y =
// 如果两次选中的图片是相同类型
if(matrix[pathInfo[0].x][pathInfo[0].y] == matrix[pathInfo[1].x][pathInfo[1].y])
// 判断两张图片是否可以消除
if(feasiblePath(pathInfo[0], pathInfo[1]))
// 将两张配对的图片位置标记为0
matrix[pathInfo[0].x][pathInfo[0].y] = 0;
matrix[pathInfo[1].x][pathInfo[1].y] = 0;
// 删除图片
tempO.parentNode.removeChild(tempO);
o.parentNode.removeChild(o);
// 图片数量减2
imageTotal -= 2;
if(imageTotal &= 0)
alert("胜利！");
// 如果矩阵对应的位置不存在图片
* 检查路径是否可行
* @param object A
* @param object B
* @return boolean
function feasiblePath(A,B)
// 检查A点与B点时否是相邻，相邻直接可消除
if(checkAdjacent(A, B))
// 获取a与b的十字线
var aPaths = getPaths(A);
var bPaths = getPaths(B);
// 从A点开始遍历
for(var i = 0, n= aPaths. i & i++)
// 如果节点上存在图片，则跳过这次循环
if(matrix[aPaths[i].x][aPaths[i].y])
// 检查A点到aPaths[i]点是否可行
if(!checkTwoLine(aPaths[i], A))
// 获取与A点十字线与B点十字线相交的横向与纵向相交的位置
var bPosition = getSamePosition(bPaths, aPaths[i]);
for(var j = 0, jn = bPosition. j & j++)
// 如果节点上存在图片，则跳过这次循环
if(matrix[bPosition[j].x][bPosition[j].y])
// 检查bPosition点到B点是否可行
if(!checkTwoLine(bPosition[j], B))
// 检查aPaths[i]点到bPosition点是否可行, 三条线都相通，表示可以消除
if(checkTwoLine(aPaths[i], bPosition[j]))
// 获取某点的十字线
function getPaths(o)
var paths = new Array();
for(var i = 0; i & rowN i++)
paths.push({x:o.x, y:i});
for(var i = 0; i & colN i++)
paths.push({x:i, y:o.y});
// 获取与A点与B点相交的X与Y坐标位置
function getSamePosition(targetPaths, o)
var paths = new Array({x:0,y:0}, {x:0,y:0});
for(var i = 0, n= targetPaths. i & i++)
// X轴相交的位置
if(targetPaths[i].x == o.x)
paths[0] = {x:targetPaths[i].x, y:targetPaths[i].y};
// Y轴相交的位置
if(targetPaths[i].y == o.y)
paths[1] = {x:targetPaths[i].x, y:targetPaths[i].y};
// 检查两点间的线是否可连
// A点必须为空
// B点可以不为空
function checkTwoLine(A, B)
// 如果是同一行
if(A.x == B.x)
for(var i = A.y; (A.y & B.y ? i & B.y : i & B.y); (A.y & B.y ? i ++ : i --))
if(matrix[A.x][i])
// 如果是同一列
for(var i = A.x; (A.x & B.x ? i & B.x : i & B.x); (A.x & B.x ? i ++ : i --))
if(matrix[i][A.y])
// 检查两个点是否相邻
function checkAdjacent(A, B)
var directions = new Array(-1, 1, 1, -1);
var len = directions.
for(var i = 0; i & i++)
if((A.x + directions[i]) == B.x && A.y == B.y)
if((A.y + directions[i]) == B.y && A.x == B.x)
//随机改变数组的排序
function randomOrder(targetArray)
var arrayLength = targetArray.length
//先创建一个正常顺序的数组
var tempArray1 = new Array();
for (var i = 0; i & arrayL i ++)
tempArray1[i] =
//再根据上一个数组创建一个随机乱序的数组
var tempArray2 = new Array();
for (var i = 0; i & arrayL i ++)
//从正常顺序数组中随机抽出元素
tempArray2[i] = tempArray1.splice(Math.floor(Math.random() * tempArray1.length) , 1)
//最后创建一个临时数组存储 根据上一个乱序的数组从targetArray中取得数据
var tempArray3 = new Array();
for (var i = 0; i & arrayL i ++)
tempArray3[i] = targetArray[tempArray2[i]];
//返回最后得出的数组
return tempArray3;
style.css&~&333B&&&&
* {margin:0; padding:0; font-size:12}
#main table {border:1px solid #f0f0f0;margin:100border-collapse:}
#main table td {width:36height:36border:1px solid #f0f0f0;border-collapse:text-align:padding:2}
#main table td img {cursor:}
开源中国-程序员在线工具：
相关的代码(115)
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
[JavaScript]
肿么我弄出来总有几张图片无法显示？
2楼：银子哥 发表于
引用来自“苗森”的评论肿么我弄出来总有几张图片无法显示？
// 图片类型数量 var imageTypeNum = 24; 我这设置了24种图片,如果你的图片数量与这个不一致，请修改此处。
3楼：no_heart 发表于
果断收下了
4楼：output 发表于
怎么实现连线动画呢？
开源从代码分享开始
银子哥的其它代码连连看程序设计_百度文库
两大类热门资源免费畅读
续费一年阅读会员，立省24元！
连连看程序设计
上传于|0|0|文档简介
&&课程设计,南邮程序设计,连连看
阅读已结束，如果下载本文需要使用2下载券
想免费下载本文？
定制HR最喜欢的简历
下载文档到电脑，查找使用更方便
还剩17页未读，继续阅读
定制HR最喜欢的简历
你可能喜欢}