JS Lianliankan 소스 코드 완벽한 주석 버전(권장)_javascript 기술-JS 튜토리얼-php.cn

할 일 없을 때 연속으로 읽으려고 자바스크립트도 썼어요. 댓글도 비교적 완성도가 높아서 배우고 싶은 친구들은 꼭 읽어보세요.

Lianliankan에서 가장 어려운 부분은 아마도 경로 검색, 즉 마우스로 클릭한 두 지점 사이에 경로가 있는지 확인하는 것입니다. 누군가의 재귀적 글쓰기 방법을 보고 간지러움을 느껴서 알아냈고 재귀 없이는 그리 어렵지 않다는 것을 알게 되었습니다.

경로 탐색은 간단한 것부터 어려운 것까지 분석됩니다. 먼저 직선이 직선으로 연결될 수 있는지 분석한 다음, 직선 위의 두 점이 두 번 회전하여 연결될 수 있는지 분석하고 마지막으로 상황을 분석합니다. 직선이 아닙니다.

IE6, IE8, firefox3.0.3에서 테스트했습니다.

코드를 복사하세요 코드는 다음과 같습니다

JS连连看源码完美注释版

<script> //以下部分为路径搜索算法部分,与表现层无关 //全局变量 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; p2 = t; } } //두 점 사이의 위치 관계를 분석하여 각 유형을 간단한 것부터 어려운 것까지 점진적으로 분석 //첫 번째 유형, 두 점 직선에 있는지 여부 line이고 두 점은 직선으로 연결될 수 있습니다 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<Y i ){ if(i==p1.y){ continue; } pt0 = p1; pt1 = {x: p1.x, y: i}; pt2 = {x: p2.x, y: i}; pt3 = p2; //If 정점이 비어 있지 않으면 도로가 차단됩니다. 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)){ 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<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)){ 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); } function hasLine(p1, p2){ if(p1.x==p2.x&&p1.y==p2.y){ return true; } 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<max; i++){ var p = {x: p1.x, y: i}; if(!isEmpty(p)){ break } } if(i==max){ return true; } return false; } 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<max; j++){ var p = {x: j, y: p1.y}; if(!isEmpty(p)){ break } } if(j==max){ return true; } return false; } } //以下部分为表现层部分,包括绘图, 初始化矩阵, 绑定鼠标事件... function $(id){return document.getElementById(id)}var t1, t2;//테스트용 //이미지 기본 경로 var IMG_PATH = 'http://www.jb51.net'; //초기화 함수 init( ){ //이미지 라이브러리 구성 var imgs = new Array(30); for(var i=1; i<=30; i ){ imgs[i] = 'r_ ' i '.gif'; } tbl = $('tbl'); //테이블 구성 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<total; i ){ tmp[i] = 0; } for(var i=0; i<total; 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; if(tmp[c]= =0){ tmp[c] = t; break; } } } } 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.target ; if(el.parentNode.tagName!='TD'){ return; } if(!img1){ img1 = el; } else { img2 = el; } el.style.border = 'solid #3399FF 3px'; el = el.parentNode; if(el.innerHTML=='' ) { p1 = p2 = e1 = e2 = null; } 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 = el; } else{ p2 = {x:c, y:r}; e2 = el; 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. = 'solid #fff 3px'; p1 = p2 = e1 = e2 = img1 = img2 = null; t1.style.BackgroundColor = t2.style.BackgroundColor = 'lightpink'; } } } </script>

js Lianliankan 완벽한 주석 버전

< ;테이블 ID ="tbl" cellpacing="0" cellpadding="0" border="1">