JS連聯館ソースコード完全アノテーション版（推奨）_javascriptスキル

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

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

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

IE6、IE8、firefox3.0.3 でテスト済み。

コードをコピーします コードは次のとおりです:

<script><BR>//以下部分为路径搜索算法部分,与表现层无关 <P>//全局变量<BR>var X = 16;//总行数<BR>var Y = 14;//总列数<BR>var types = 15;//图形种类 <P>//布局矩阵<BR>//为了算法方便，矩阵的第一行，第一列，最后一行，最后一列都标注为0，天然通路。<BR>var arr = new Array(Y);<BR>var tbl;//显示布局的table元素 <P>var p1 = null;//搜索路径用的第1个点的坐标<BR>var p2 = null;//搜索路径用的第2个点的坐标<BR>var e1 = null;//第1个点对应的元素<BR>var e2 = null;//第2个点对应的元素<P>//パス検索、2 つの点が与えられた場合、パスを検索します<BR>//パスは接続可能な点で表されます<BR>function getPath(p1, p2){<BR> //検索を開始する前に P1 、 p2 は、p2 が p1 のできるだけ右下になるようにソートされます。 <BR> //これによりアルゴリズムが簡略化されます<BR> if(p1.x>p2.x){<BR> var t = p1; <BR> p1 = p2;<BR> p2 = t; <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> //2点の位置関係を分析することで、簡単なものから難しいものまで段階的に分析していきます <BR> //最初のタイプ、2点が直線上にあるかどうか直線と 2 点を直線で結ぶことができます<BR> if((onlineY(p1, p2)||onlineX(p1, p2)) && hasLine(p1, p2)){<BR> status = ' type 1 ';<BR> return [p1,p2];<BR> }<BR> //2 番目のタイプは、2 つの点のいずれかが完全に囲まれている場合は機能しません。 <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> ステータス = 'タイプ 2';<BR> return null;<BR> }<BR> //3 番目のタイプ、2 点は直線上にありますが、直線で結ぶことはできません<BR> var pt0, pt1, pt2, pt3;<BR> //それらがすべて x 軸上にある場合、可能なパスを左から右にスキャンします。 <BR> //毎回 4 つの頂点 pt0、pt1、pt2、pt3 を構築し、それらが相互に接続されているかどうかを確認します <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頂点が空でない場合、道路はブロックされます。 <BR> if(!isEmpty(pt1) || !isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2) , pt3) ){<BR> ステータス = '(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> //それらがすべて Y 軸上にある場合、可能なパスを上から下にスキャンします。 <BR> // 毎回 4 つの頂点 pt0 を構築します、pt1、pt2、pt3 を調べ、それらが相互に接続されているかどうかを確認します <BR> if(onlineY(p1, p2)){<BR> for(var j=0; j<X; j ){<BR> if( j==p1.x){<BR> 続行; <BR> }<BR> pt0 = p1;<BR> pt1 = {x:j, y:p1.y};<BR> pt2 = {x :j , y:p2.y};<BR> pt3 = p2;<BR> //頂点が空でない場合、道路はブロックされています。 <BR> if(!isEmpty(pt1) || !isEmpty(pt2)){<BR> continue;<BR> }<BR> if( hasLine(pt0, pt1) && hasLine(pt1, pt2) && hasLine(pt2) , pt3) ){<BR> ステータス = '(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> //4 番目のタイプ。2 つの点が一直線上にありません。<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>function equal(p1, p2){<BR> return ((p1.x==p2.x)&&(p1.y==p2.y));<BR>} <P>function onlineX(p1, p2){<BR> return p1.y==p2.y;<BR>} <P>function onlineY(p1, p2){<BR> return p1.x==p2.x; <BR>} <P>function isEmpty(p){<BR> return (arr[p.y][p.x]==0); <BR>} <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>var t1, t2;//テスト用<BR>//画像ベースパス<BR>var IMG_PATH = 'http://www.jb51.net';<BR>//初期化<BR>function init( ){<BR> //画像ライブラリを構築<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> //テーブル<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> //行列 <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);//<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]] '" / alt="JS連聯館ソースコード完全アノテーション版（推奨）_javascriptスキル" >';<BR> } <BR> }<BR> //マウスイベントをバインド<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. = '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 完全注釈付きバージョン

< ;テーブル ID ="tbl" cellpacing="0" cellpadding="0" border="1">