JS連連看原始碼完美註解版(推薦)_javascript技巧

閒來無事，也寫一個javascript連連看，註解比較完整，想學的朋友可要看了。

連連看最困難的部分應該是路徑搜索，即滑鼠點的兩點之間看有無可通的路徑。 看過有人寫的遞歸寫法，心裡癢癢，就捉摸了一下，發現不用遞歸的情況下難度也不大。

路徑搜尋由簡到難分析，先分析一條直線上是否可直線連通，再分析一條直線上的兩點通過拐兩個彎是否可通,最後分析不在一條直線上的情況.

在IE6, IE8, firefox3.0.3下測試.

複製程式碼 程式碼 複製程式碼 程式碼 JS连连看源码完美注释版 table{ border-collapse: collapse; } td{ border: solid #ccc 1px; height: 36px; width: 36px; cursor: pointer; } td img{ height: 30px; width: 30px; border: solid #fff 3px; /* filter: alpha(opacity=80); -moz-opacity: 0.8; opacity: 0.8; */ }

//以下部分为路径搜索算法部分,与表现层无关 //全局变量 var X = 16;//总行数 var Y = 14;//总列数 var types = 15;//图形种类

//布局矩阵 //为了算法方便，矩阵的第一行，第一列，最后一行，最后一列都标注为0，天然通路。 var arr = new Array(Y); var tbl;//显示布局的table元素

var p1 = null;//搜索路径用的第1个点的坐标 var p2 = null;//搜索路径用的第2个点的坐标 var e1 = null;//第1个点对应的元素 var e2 = null;//第2个点对应的元素

//路徑搜索，給出兩個點，搜尋出通路 //通路用可連通的點表示 function getPath(p1, p2){ //開始搜尋前對p1 ,p2排序，使p2盡可能的在p1的右下方。 //這樣做可以簡單化演算法 if(p1.x>p2.x){ var t = p1; p1 = p2; p2 = t else if(p1.x==p2.x){ if(p1.y>p2.y){ var t = p1; p1 = 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'; return null; } 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'; return null; } //第三種類型， 兩點在一條直線上，但是不能直線連接 var pt0, pt1, pt2, pt3; //如果都在x軸，則由左至右掃描可能的路徑， //每次構造4個頂點pt0, pt1, pt2, pt3，然後看他們兩兩之間是否連通 if(onlineX(p1, p2 )){ for(var i=0; i if(i==p1.y){ continue; 🎜> pt1 = {x: p1.x, y: i}; pt2 = {x: p2.x, y: i}; pt3 = p2; ，則該路不通。 if(!isEmpty(pt1) || !isEmpty(pt2)){ continue; } continif( 🎜> } , 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 if( j==p1.x){ continue; } pt0 = p1; pt1 = {x:j, y:ptp1. , y:p2.y}; pt3 = p2; //若頂點不為空，則該路不通。 if(!isEmpty(pt1) || !isEmpty(pt2)){ continue; } continif( 🎜> } , 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 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)){ continue; } if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){ return [pt1, pt2, pt3]; } else{ continue; } } //特殊情况，如果pt2和pt3重合 else if(equal(pt2,pt3)){ //如果pt1不为空，则此路不通 if(!isEmpty(pt1)){ continue; } if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){ return [pt0, pt1, pt2]; } else{ continue; } } //如果pt1, pt2都不为空,则不通 if(!isEmpty(pt1) || !isEmpty(pt2)){ continue; } if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){ return [pt0, pt1, pt2, pt3]; } } //横向扫描可能的路径 for(var k=0; 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)){ continue; } if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){ return [pt1, pt2, pt3]; } } if(equal(pt2,pt3)){ if(!isEmpty(pt1)){ continue; } if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){ return [pt0, pt1, pt2]; } } if(!isEmpty(pt1) || !isEmpty(pt2)){ continue; } if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){ return [pt0, pt1, pt2, pt3]; } } //status='type4'; return null; /********** 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); }

var t1, t2;//測試用 //圖片基底路徑 var IMG_PATH = 'http://www.jb51.net'; //初始化 function init( ){ //建構圖片庫 var imgs = new Array(30); for(var i=1; i imgs[i] = 'r_ ' i '.gif'; } tbl = $('tbl'); //構造table for(var row=0;row var tr=tbl.insertRow(-1); for(var col=0;col var td=tr.insertCell(-1); var td=tr.insertCell(-1); ; } //建構矩陣 for(var i=0; i arr[i] = new Array(X); for(var j== 0; j arr[i][j] = 0; } } var total = (X-2)*(Y-2); var tmp = new Array(total);//產生隨機位置用 for(var i=0; i tmp[i] = 0; } for(var i=0; i if(tmp[i]==0){ var t = Math.floor(Math.random()*types) 1; tmp[i] = t; while(true){ var c = Math.floor(Math.random()*(total-i)) i 🎜> =0){ tmp[c] = t; break; } ) } } for(var j=1; j arr[i][j] = tmp[c ]; tbl.rows[i-1].cells[j-1].innerHTML = ' '; } } //綁定滑鼠事件 var img1, img2; document.body.onclick = function(e){ var el = document.all?event.srcElement:e.target; if(el.parentNode.tagName!='TD'){ return; } if(!img1){ img2 = el; } el.style.border = 'solid #3399FF 3px'; el = 'solid #3399FF 3px'; el = el.parentNodeo p1 = p2 = e1 = e2 = null; } var r = el.parentNode.rowIndex 1; var c = el.parentNode.rowIndex 1; var c = el.pcellIndex 1; ){ //el.childNodes[0].style.border = 'solid #ccc 3px'; p1 = {x:c, y:r}; p1 = {x:c, y:r}; . } else{ p2 = {x:c, y:r}; e2 = el; if(!equal(p1, p2)&MLe1.innerHTML) var path = getPath(p1, p2); if(path!=null){ e1.innerHTML = e2.innerHTML = '' } } if(t1){t1.style.backgroundColor = '';} h.; if(t2){t2.style.backgroundColor = '';} t2 = e2; img1.style.border = 'solid #orderf 3px'; p1 = p2 = e1 = e2 = img1 = img2 = null; t1.style.backgroundColor = t2.style.background>}

js連連看完美註解版