JS Lianliankan source code perfect annotated version (recommended)_javascript skills

When I have nothing to do, I also wrote a javascript to read in succession. The comments are relatively complete. Friends who want to learn should read it.

The most difficult part of Lianliankan is probably the path search, that is, to see if there is a path between two points clicked by the mouse. I saw someone's recursive writing method, and I felt itchy, so I figured it out and found that it's not that difficult without recursion.

The path search is analyzed from simple to difficult. First analyze whether a straight line can be connected in a straight line, then analyze whether two points on a straight line can be connected by taking two turns, and finally analyze the situation when they are not on a straight line.

Tested under IE6, IE8, firefox3.0.3.

Copy the code The code is as follows:

<script><br>//以下部分为路径搜索算法部分,与表现层无关 <p>//全局变量<br>var X = 16;//总行数<br>var Y = 14;//总列数<br>var types = 15;//图形种类</p> <p>//布局矩阵<br>//为了算法方便，矩阵的第一行，第一列，最后一行，最后一列都标注为0，天然通路。<br>var arr = new Array(Y);<br>var tbl;//显示布局的table元素</p> <p>var p1 = null;//搜索路径用的第1个点的坐标<br>var p2 = null;//搜索路径用的第2个点的坐标<br>var e1 = null;//第1个点对应的元素<br>var e2 = null;//第2个点对应的元素</p> <p>//Path search, given two points, search for a path<br>//The path is represented by connectable points<br>function getPath(p1, p2){<br> //P1 before starting the search , p2 is sorted so that p2 is as far to the lower right of p1 as possible. <br> //This can simplify the algorithm<br> if(p1.x>p2.x){<br> var t = p1; <br> p1 = p2;<br> p2 = t; <br> } <br> else if(p1.x==p2.x){<br> if(p1.y>p2.y){<br> var t = p1; <br> p1 = p2;<br> p2 = t; <br> }<br> }<br> //By analyzing the positional relationship between the two points, gradually analyze each type from simple to difficult <br> //The first type, two points Whether it is on a straight line and the two points can be connected by a straight line<br> if((onlineY(p1, p2)||onlineX(p1, p2)) && hasLine(p1, p2)){<br> status = ' type 1';<br> return [p1,p2];<br> }<br> //The second type, if any one of the two points is completely surrounded, it will not work. <br> 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}) ){<br> status = 'type 2';<br> return null; <br> }<br> 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}) ){<br> status = 'type 2';<br> return null;<br> }<br> //The third type, two points are on a straight line, but cannot be connected by a straight line<br> var pt0, pt1, pt2, pt3;<br> //If they are all in x axis, scan possible paths from left to right, <br> //Construct 4 vertices pt0, pt1, pt2, pt3 each time, and then see if they are connected between each other <br> if(onlineX(p1, p2 )){<br> for(var i=0; i<Y; i ){<BR> if(i==p1.y){<BR> continue;<BR> }<BR> pt0 = p1;<BR> pt1 = {x: p1.x, y: i};<BR> pt2 = {x: p2.x, y: i};<BR> pt3 = p2;<BR> //If the vertex is not empty , then the road is blocked. <BR> if(!isEmpty(pt1) || !isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2 , pt3) ){<BR> 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 ')';<BR> return [pt0, pt1, pt2 , pt3];<BR> }<BR> }<BR> }<BR> //If they are all on the y-axis, scan possible paths from top to bottom, <BR> //Construct 4 vertices pt0 each time, pt1, pt2, pt3, and then see if they are connected between each other <BR> if(onlineY(p1, p2)){<BR> for(var j=0; j<X; j ){<BR> if( j==p1.x){<BR> continue; <BR> }<BR> pt0 = p1;<BR> pt1 = {x:j, y:p1.y};<BR> pt2 = {x:j , y:p2.y};<BR> pt3 = p2;<BR> //If the vertex is not empty, the road is blocked. <BR> if(!isEmpty(pt1) || !isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2 , pt3) ){<BR> 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 ')';<BR> return [pt0, pt1, pt2 , pt3];<BR> }<BR> }<BR> }<BR> //The fourth type, the two points are not on a straight line.<BR> //先纵向扫描可能的路径<BR> //同样，每次构造4个顶点，看是否可通<BR> for(var k=0; k<Y; k++){<BR> pt0 = p1;<BR> pt1 = {x:p1.x, y:k};<BR> pt2 = {x:p2.x, y:k};<BR> pt3 = p2;<BR> 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 + ')';<BR> //特殊情况，如果pt0和pt1重合<BR> if(equal(pt0,pt1)){<BR> //如果pt2不为空，则此路不通<BR> if(!isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR> return [pt1, pt2, pt3];<BR> }<BR> else{<BR> continue;<BR> }<BR> }<BR> //特殊情况，如果pt2和pt3重合<BR> else if(equal(pt2,pt3)){<BR> //如果pt1不为空，则此路不通<BR> if(!isEmpty(pt1)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){<BR> return [pt0, pt1, pt2];<BR> }<BR> else{<BR> continue;<BR> }<BR> }<BR> //如果pt1, pt2都不为空,则不通<BR> if(!isEmpty(pt1) || !isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR> return [pt0, pt1, pt2, pt3];<BR> }<BR> }<BR> //横向扫描可能的路径<BR> for(var k=0; k<X; k++){<BR> pt0 = p1;<BR> pt1 = {x:k, y:p1.y};<BR> pt2 = {x:k, y:p2.y};<BR> pt3 = p2;<BR> 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 + ')';<BR> if(equal(pt0,pt1)){<BR> if(!isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR> return [pt1, pt2, pt3];<BR> }<BR> }<BR> if(equal(pt2,pt3)){<BR> if(!isEmpty(pt1)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) ){<BR> return [pt0, pt1, pt2];<BR> }<BR> }<BR> if(!isEmpty(pt1) || !isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2, pt3) ){<BR> return [pt0, pt1, pt2, pt3];<BR> }<BR> }<BR> //status='type4';<BR> return null;<BR> /********** end type 4 **************/<BR>}</P> <P>function equal(p1, p2){<BR> return ((p1.x==p2.x)&&(p1.y==p2.y));<BR>}</P> <P>function onlineX(p1, p2){<BR> return p1.y==p2.y;<BR>}</P> <P>function onlineY(p1, p2){<BR> return p1.x==p2.x; <BR>}</P> <P>function isEmpty(p){<BR> return (arr[p.y][p.x]==0); <BR>}</P> <P>function hasLine(p1, p2){<BR> if(p1.x==p2.x&&p1.y==p2.y){<BR> return true; <BR> }<BR> if(onlineY(p1, p2)){<BR> var i = p1.y>p2.y?p2.y:p1.y;<br>  i = i+1;<br>  var max = p1.y>p2.y?p1.y:p2.y;<br>  for(; i<max; i++){<BR> var p = {x: p1.x, y: i};<BR> if(!isEmpty(p)){<BR> break<BR> }<BR> }<BR> if(i==max){<BR> return true;<BR> }<BR> return false;<BR> }<BR> else if(onlineX(p1, p2)){<BR> var j = p1.x>p2.x?p2.x:p1.x;<br>  j = j+1;<br>  var max = p1.x>p2.x?p1.x:p2.x;<br>  for(; j<max; j++){<BR> var p = {x: j, y: p1.y};<BR> if(!isEmpty(p)){<BR> break<BR> }<BR> }<BR> if(j==max){<BR> return true;<BR> }<BR> return false;<BR> }<BR>}<BR>//以下部分为表现层部分,包括绘图, 初始化矩阵, 绑定鼠标事件...<BR>function $(id){return document.getElementById(id)}</P><P>var t1, t2;//For testing<BR>//Image base path<BR>var IMG_PATH = 'http://www.jb51.net';<BR>//Initialization<BR>function init( ){<BR> //Construct image library<BR> var imgs = new Array(30);<BR> for(var i=1; i<=30; i ){<BR> imgs[i] = 'r_ ' i '.gif';<BR> }<BR> tbl = $('tbl');<BR> //Construct table<BR> for(var row=0;row<Y-2;row ){<BR> var tr=tbl.insertRow(-1);<BR> for(var col=0;col<X-2;col ) {<BR> var td=tr.insertCell(-1);<BR> } <BR> }<BR> //Construct matrix <BR> for(var i=0; i<Y; i ){<BR> arr[i] = new Array(X);<BR> for(var j= 0; j<X; j ){<BR> arr[i][j] = 0;<BR> }<BR> }<BR> var total = (X-2)*(Y-2);<BR> var tmp = new Array(total);//Generate random positions using <BR> for (var i=0; i<total; i ){<BR> tmp[i] = 0;<BR> }<BR> for(var i=0; i<total; i ){<BR> if(tmp[i]==0){<BR> var t = Math.floor(Math.random()*types) 1;<BR> tmp[i] = t;<BR> while(true){<BR> var c = Math.floor(Math.random()*(total-i)) i;<BR> if(tmp[c]= =0){<BR> tmp[c] = t;<BR> break;<BR> }<BR> }<BR> }<BR> }<BR> var c = 0;<BR> for(var i =1; i<Y-1; i ){<BR> for(var j=1; j<X-1; j ){<BR> arr[i][j] = tmp[c ];<BR> tbl.rows[i-1].cells[j-1].innerHTML = '<img src="' IMG_PATH imgs[arr[i][j]] '" />';<br> } <br> }<br> //Bind mouse events<br> var img1, img2;<br> document.body.onclick = function(e){<br> var el = document.all?event.srcElement:e.target ;<br> if(el.parentNode.tagName!='TD'){<br> return;<br> }<br> if(!img1){<br> img1 = el;<br> }<br> else{<br> img2 = el;<br> }<br> el.style.border = 'solid #3399FF 3px';<br> el = el.parentNode;<br> if(el.innerHTML=='' ){<br> p1 = p2 = e1 = e2 = null;<br> }<br> var r = el.parentNode.rowIndex 1;<br> var c = el.cellIndex 1;<br> if(p1= =null){<br> //el.childNodes[0].style.border = 'solid #ccc 3px';<br> p1 = {x:c, y:r};<br> e1 = el;<br> }<br> else{<br> p2 = {x:c, y:r};<br> e2 = el;<br> if(!equal(p1, p2)&&e1.innerHTML==el.innerHTML ){<br> var path = getPath(p1, p2);<br> if(path!=null){<br> e1.innerHTML = e2.innerHTML = '';<br> arr[p1.y][ p1.x] = arr[p2.y][p2.x] = 0;<br> }<br> }<br> if(t1){t1.style.backgroundColor = '';}<br> t1 = e1;<br> if(t2){t2.style.backgroundColor = '';}<br> t2 = e2;<br> img1.style.border = 'solid #fff 3px';<br> img2.style. border = 'solid #fff 3px';<br> p1 = p2 = e1 = e2 = img1 = img2 = null;<br> t1.style.backgroundColor = t2.style.backgroundColor = 'lightpink';<br> }<br> }<br>}<br></script>

js Lianliankan perfect annotated version

< ;table id="tbl" cellspacing="0" cellpadding="0" border="1">