JS連聯館ソースコード完全アノテーション版（推奨）_javascriptスキル-jsチュートリアル-php.cn

やる事がない時に、続けて読むためのJavaScriptも書きました。学びたい友達は読んでください。

Lianliankan で最も難しい部分はおそらくパス検索、つまりマウスでクリックした 2 点間にパスがあるかどうかを確認することです。誰かの再帰の書き方を見てムズムズしたので考えてみたら、再帰を使わなければそれほど難しくないことが分かりました。

経路探索は、簡単なものから難しいものまで、まず直線が直線で結べるかどうかを分析し、次に直線上の2点が2回転して結べるかどうかを分析し、最後にどのような状況になるかを分析します。それらは直線上にありません。

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个点对应的元素 //パス検索、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; } } //2点の位置関係を分析することで、簡単なものから難しいものまで段階的に分析していきます //最初のタイプ、2点が直線上にあるかどうか直線と 2 点を直線で結ぶことができます if((onlineY(p1, p2)||onlineX(p1, p2)) && hasLine(p1, p2)){ status = ' type 1 '; return [p1,p2]; } //2 番目のタイプは、2 つの点のいずれかが完全に囲まれている場合は機能しません。 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}) ){ ステータス = 'タイプ 2'; return null; } //3 番目のタイプ、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){ continue; } pt0 = p1; pt1 = {x: p1.x, y: i}; pt2 = {x: p2.x, y: i}; pt3 = p2; //If頂点が空でない場合、道路はブロックされます。 if(!isEmpty(pt1) || !isEmpty(pt2)){ continue; } if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2) , pt3) ){ ステータス = '(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)){ continue; } if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2) , pt3) ){ ステータス = '(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 番目のタイプ。2 つの点が一直線上にありません。 //先纵向扫描可能的路径 //同样，每次构造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'; //初期化 function 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">