So-net無料ブログ作成

迷路自動生成プログラムを改良致しました。 [迷路自動生成Web プログラム]

この度、かつて自作した迷路自動生成プログラムを改良し、アプリケーション プログラム掲載専用ブログに掲載致しました。
これはそのスクリーンショット画像です。
Maze_SS_(2019_07_03)_1_cropped_1 "HTML5" の "Canvas" を利用して作られた迷路自動生成プログラムの迷路のスクリーンショット画像。 Lv3の文字と共にやや簡単な迷路が表示されている。 迷路の中に赤色と青色と緑色の枡が1つづつある。
今回の迷路自動生成プログラムは、画面サイズに応じて表示サイズが変わるレスポンシヴ デザインです。

ウェブアプリ: 迷路自動生成プログラム
https://applicationprogram.blog.so-net.ne.jp/2019-07-03

迷路の規模がボタンを押す事で、 "Level 0" から "Level 7" まで変更出来ます。
Level 0は2x2枡でもはや迷路でさえありませんが、Level 4だと解くまでに私の場合で1分前後掛かります。

Maze_SS_(2019_07_03)_2_cropped_1 "HTML5" の "Canvas" を利用して作られた迷路自動生成プログラムの迷路のスクリーンショット画像。 Lv5の文字と共に複雑な迷路が表示されている。 迷路の中に赤色と青色と緑色の枡が1つづつある。
Level 5は解くまでに10分前後掛かりました、それ以上だとちょっと解ける気が致しません。

この迷路は "壁延ばし法" というアルゴリズムで迷路を生成しております。
開始地点(赤色の枡)と終着地点(緑色の枡)は "幅優先探索" というアルゴリズムで、迷路の中で互いに最も遠い位置になるように配置しています。
青い枡は自分の位置で、キーボードの "E (上), S (左), D (下), F (右)" または "I (上), J (左), K (下), L (右)" キーで移動出来ます。
プログラムはHTML5のCanvas要素のみを利用してJavaScriptで作りました。
ソース コードも公開しております。

因みに、以前製作したプログラムは自作のアート プログラムを書き換えて作ったもので、不必要な描画処理や音の出力がある反面、表示サイズも迷路の規模も固定であり、駒を移動させる機能もありませんでした。

以前製作した迷路自動生成プログラムのブログ記事: HTML5でJavaScriptで迷路を自動生成するプログラムを作成してみました。
https://crater.blog.so-net.ne.jp/2017-02-21

nice!(0)  コメント(0) 

nice! 0

コメント 0

コメントを書く

お名前:
URL:
コメント:
画像認証:
下の画像に表示されている文字を入力してください。

※ブログオーナーが承認したコメントのみ表示されます。

Facebook コメント