続・コンピュータゲームにおける迷路の表現について(まだ駄文)
どうも!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>
…書いてる本人にも、わけがわからなくなってきましたwww
「まずは試しに5×5の迷路を描いてみよう」と思い、作り始めたのですが、このタイプの迷路の場合、「マスが5×5だと壁は6×6になる」んですね。
(しかも5つになる要素と6つになる要素が縦と横で違う)
そして、描画順としては「横棒になる壁」と「縦棒になる壁」を交互に描き、しかも最後は「横棒になる壁」で終わる事になります。
この特異性をちゃんと把握しないまま作り始めると、ループの組み方に苦労する事になり、ゴリ押しでクリアしようとしたのが↑のコードですw
一応、意図した構図で描画できるようになるまでに頭が湧きそうでしたwww
書く前にあらかじめ、どういう構成にするか考えて書く、のは文章もプログラムも同じですが、ちょっと練りたりなかったみたいですね^^;;;
今一度、考えなおします。
久々に「つまづき」カテゴリの記事でした^^;