Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

トップ > HTMLなど > 迷路の舞台裏！（JavaScriptで迷路を書き出す方法）

迷路の舞台裏！（JavaScriptで迷路を書き出す方法）

HTMLなど

　どうも！LSSです！！

 

　昨日の記事、「超巨大（になりそこなった）迷宮」で多くの方にゴールまで遊んでいただき、ありがとうございました！^^

 

　アーシさんに言及＆紹介までしていただきました！

　あちらのブクマコメントにも遊んでくれた方の感想が書かれていてもうウハウハですｗ

 

　今回は、JavaScriptで作ったその迷路ゲームの「迷路描画部分」だけ、解説してみたいと思います！

 

 

f:id:little_strange:20200301235539p:plain

 

コードはこんな感じ

 

<div id="mz"></div>

function maze_w(){
 txt="<table border=0>";
 for(var j=y-s;j<y+s;j++){
  txt+="<tr>";
   for(var i=x-s;i<x+s;i++){
   txt+="<td width=30px height=30px align=center bgcolor=";
   switch(maze_n(i,j)){
    case 0:txt+="black";break;
    case 1:txt+="#eeeeee";break;
   }
   txt+=">";
   if(x==i && y==j){
    txt+="<font color=red>自</font>";
   }else{
    if(gx==i && gy==j){
     txt+="<font color=red>Ｇ</font>";
    }else{
     txt+="　";
    }
   }
   txt+="</td>";
  }
  txt+="</tr>";
 }
 txt+="</table>";
txt+="<br/>現在　X:"+x+"　Y:"+y+" の位置にいます。<br/>ゴールは X:"+gx+" Y:"+gy+" の位置です。";
if(x==gx && y==gy){
txt+="<br/><span style=font-size:50px;color:red;>ゴール到着おめでとうございます！！</span>";
}
 mz.innerHTML=txt;
}

 

 

…階層構造が分かりやすいように色分けしてみました。

（これ正直、迷路スクリプトを作るよりしんどかったｗｗｗ） 

 

 

ざっくりとした説明

 

　関数の外にまず、

<div id="mz"></div>

というのを置いておきます。

 

　この、「mzというidを割り当てたdiv」の中に、迷路となる部分を書き込むために場所を用意している感じです。

 

　そして書き出す中身を用意するために、txtという変数を使用しています。

　そのtxtになんやかんやHTMLタグを追加して、最後に

 mz.innerHTML=txt;

でmzの中にtxtの内容を書き込んで完了！です^^

 

 

tableタグで迷路を表現しています

 

ので、最低限、JavaScriptの前にHTMLのtableタグの知識が必要になります。

　以前、「HTML超入門！…のさわりだけ！！」でも書いた内容になります。

 

　まず、tableタグの構造ですが、

あ

↑のように1×1の表を作る場合、

 

<table border=1>
  <tr>
    <td>あ</td>
  </tr>
</table>

↑こういうタグを書く事になります。
（表の構造を分かりやすくするためborder=1を設定しています。） 

 

<table>と</table>の間に、
１組の<tr>と</tr>があり、さらにその間に
１組の<td>と</td>がある、という構造ですね。 

 

<tr>から</tr>まで、が一つの行、
<td>から</td>まで、が一つの列、という事になっています。

 

なので、例えば、

 

<table border=1>
  <tr>
    <td>あ</td>
    <td>い</td> 
  </tr>
</table>

のように<td>を増やすと、

あ い

 

という形になります。

 

　行を増やすなら、

 

<table border=1>
  <tr>
    <td>あ</td>
    <td>い</td> 
  </tr>
  <tr>
    <td>う</td>
    <td>え</td> 
  </tr>
</table>

↓

あ い
う え

 

という感じですね。

 

　分かりやすいように改行や字下げを入れていますが、HTML上は改行はあってもなくても良くて、 

 

<table border=1><tr><td>あ</td><td>い</td></tr><tr><td>う</td><td>え</td></tr></table>

 

という書き方でも、同じ結果になります。

※はてなブログ、tableタグにCSSかかっているようで、なかなか本来の形で表現できないのが辛いところ^^;

 

 

JavaScriptでtableタグを書き出してみます！

 

<div id="test1"></div>
<script>
var txt="";
txt+="<table>";
for (j=1;j<10;j++){
 txt+="<tr><td>あ</td></tr>";
}
txt+="</table>";
test1.innerHTML=txt;
</script>

 

↑これを実行すると、 

 

 

 

 ↑こういう結果になります！

 

for (j=1;j<10;j++){
処理;
}
がループ構文で、
「変数jの初期値は1から始めて、j<10である間は処理を行い、その度にj++（jの値を1増やす）する」

という意味になります。

txt+="<tr><td>あ</td></tr>";

を９回書く手間を省いてくれているんですね^^

 

　ちなみに、「+=」は「文字列の場合、後ろにつけたす」事を意味しています。
　例えば、
a="あ";
a+="い";
とするとaの中身は「あい」になります。

 

  

ループを２重にして、<tr>内の<td>も繰り返してみます！

 

<div id="test2"></div>
<script>
var txt="";
txt+="<table>";
for (j=1;j<10;j++){
  txt+="<tr>";
 for(i=1;i<10;i++){
  txt+="<td>あ</td>";
 }
 txt+="</tr>";
}
txt+="</table>";
test2.innerHTML=txt;
</script>

↓

 

 

　ここまでの数になると、HTMLタグを書くよりもJavaScriptでやった方がだいぶラクですね^^

 

  

もうひとひねり（というか脱線？）

 

<div id="test3"></div>
<script>
var txt="";
txt+="<table>";
for (j=1;j<10;j++){
  txt+="<tr>";
 for(i=1;i<10;i++){
  txt+="<td>"+i*j+"</td>";
 }
 txt+="</tr>";
}
txt+="</table>";
test3.innerHTML=txt;
</script>


↑<td>タグを書き出す部分だけ、こんな風に変更してみました。

　ループを制御するために使っていた変数、iとjを掛けたものを書きだそうとしています。

 

　どうなるか予測がつきますか？

 

↓

 

↓

  

↓

  

↓

 

 

 

　どこか懐かしい…そう、「九九の表」ですｗ

 

 

実際に迷路を書き出してみるサンプル

 

<div id="test4"></div>
<script>
var meiro=""
meiro+="000000000"
meiro+="011111110"
meiro+="000100010"
meiro+="010111110"
meiro+="010100010"
meiro+="011101110"
meiro+="000101000"
meiro+="011111110"
meiro+="000000000"
var txt="";
txt+="<table>";
for (j=0;j<9;j++){
  txt+="<tr>";
 for(i=0;i<9;i++){
  if(meiro.substr(j*9+i,1)=="0"){
   txt+="<td bgcolor=black>　</td>";
  }else{
   txt+="<td bgcolor=gray>　</td>"; 
  }
 }
 txt+="</tr>";
}
txt+="</table>";
test4.innerHTML=txt;
</script> 

↓

 

 

 <td bgcolor=black>
のように、tdタグにbgcolor（背景色）を設定する…のを、迷路情報に応じてblackかgrayかを分ける事で、迷路として表示する事ができました^^

 

meiro+="010111110"
のように書いている部分が迷路デザイン部分で、この0と1の並びを書き換える事で迷路のデザインが変わります！

 

　変数meiroに設定した迷路情報は
meiro.substr(j*9+i,1)
の部分で「Y（縦）座標はj、X（横）座標はi」という事にして取り出しているわけです。

 

　同様にif文などで判定をつけ加える事で、自分の位置を表示するなど色々な工夫ができるようになります^^

 

 

まとめ~

 

  • 迷路面表示にはtableタグを使って表形式として書き出す
  • 繰り返し部分はforによるループを使う
  • <td>タグを書き出す部分をifとかで工夫する事で、マスの内容を変化させる

 

という感じです。

　久々にJavaScriptでがっつり何か作ったなぁｗ

　この記事も結構時間かかりましたが、どなたかの参考になれば幸いです^^

 

てなとこで、今回はこのへんで！

　次回もまた、よろしくお願いします^^