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> <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>//パス検索、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> 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> 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> <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;//テスト用<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]] '" />';<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">