どうも！LSSです！！（今回もわけわかめな記事となります）
「言うは易し、行うは難し」とはよく言ったもので。
昨日の記事、実際にスクリプトを書こうとすると、思いがけず苦戦しました。
とりあえず今の時点で↓こんな感じの描画をするところまで行ったんですが…
…問題はそのコード。
<div id="maze"> </div>
<script>// <![CDATA[
var yoko=[[1,1,1,1,1],[1,1,1,0,0],[0,1,0,0,0],[0,0,0,0,0],[0,1,0,1,0],[1,1,1,1,1]];
var tate=[[1,0,0,0,1,1],[1,0,0,0,1,1],[1,0,1,1,0,1],[1,1,0,1,1,1],[1,0,0,1,0,1]];
var txt='';
txt='<div style="display:grid;grid-template-columns:repeat(5,2px 20px) 2px;grid-template-rows:repeat(5,2px 20px) 2px;">';
for(i=0;i<6;i++){
for(j=0;j<5;j++){
txt+='<div style="background-color:white;"></div>';
if(yoko[i][j]==1){txt+='<div style="background-color:black;"></div>';}else{txt+='<div style="background-color:white;"></div>';}
}
txt+='<div style="background-color:white;"></div>';
if(i<5){
for(j=0;j<5;j++){
if(tate[i][j]==1){txt+='<div style="background-color:black;"></div>';}else{txt+='<div style="background-color:white;"></div>';}
txt+='<div style="background-color:white;"></div>';
}
if(tate[i][5]==1){txt+='<div style="background-color:black;"></div>';}else{txt+='<div style="background-color:white;"></div>';}
}
}
maze.innerHTML=txt;
// ]]></script>
…書いてる本人にも、わけがわからなくなってきましたｗｗｗ
「まずは試しに５×５の迷路を描いてみよう」と思い、作り始めたのですが、このタイプの迷路の場合、「マスが５×５だと壁は６×６になる」んですね。
（しかも５つになる要素と６つになる要素が縦と横で違う）
そして、描画順としては「横棒になる壁」と「縦棒になる壁」を交互に描き、しかも最後は「横棒になる壁」で終わる事になります。
この特異性をちゃんと把握しないまま作り始めると、ループの組み方に苦労する事になり、ゴリ押しでクリアしようとしたのが↑のコードですｗ
一応、意図した構図で描画できるようになるまでに頭が湧きそうでしたｗｗｗ
書く前にあらかじめ、どういう構成にするか考えて書く、のは文章もプログラムも同じですが、ちょっと練りたりなかったみたいですね^^;;;
今一度、考えなおします。
久々に「つまづき」カテゴリの記事でした^^;
