So-net無料ブログ作成
迷路自動生成Web プログラム ブログトップ

迷路自動生成プログラムを改良致しました。 [迷路自動生成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) 

HTML5でJavaScriptで迷路を自動生成するプログラムを作成してみました。 [迷路自動生成Web プログラム]

プログラミングは楽しいです。
特に、HTML5Canvas要素とWeb Audio APIを利用してプログラムを作成すると、作っている途中でも画面に表示される画像や発せられる音でプログラムが動いている事が分かり、試行錯誤の過程も楽しめます。
コンパイルやライブラリーへのリンクも必要無く、プログラムの内容を考える事に集中出来ます。
今回私は " 迷路を自動的に生成するプログラム " をJavaScriptにて製作致しました。

Canvas Area.



このHTML ページ内で " JavaScript " を実行します。
迷路を自動生成してみます。

[このプログラムについて]
" HTML5 " の " Canvas " 要素を利用して画面に画像を表示しております。
このプログラムのコードは全てブログ記事のHTML内に記述したものであり、作成するに当たってテキスト エディターとウェブ ブラウザー以外は何も使用しておりません。 実際の使用の際にも、追加のライブラリーなどは一切必要無く、純粋にHTML5対応ブラウザーだけで動作致します。
音に関しては、 " Web Audio API " を利用して、独自の関数で波形を作って鳴らしております。
アルゴリズムは " 壁延ばし法 " に準ずるものです。

JS_Maze_SS_(2017_02_21)_1_Cropped_1 正方形の領域に迷路が描かれている画像。
https://c2.staticflickr.com/4/3698/32213359933_94a1c7714d_o.png
迷路を自動生成した際のスクリーンショット画像です。ダンジョンを探索する " ローグ ライク ゲーム " のようです。
" Yahoo!ボックス " サーヴィスにソース コードのhtml ファイルをアップロードして公開させて頂きます。
次のリンク先のページにある " ダウンロード " ボタンを押すと当プログラムのhtml ファイルをダウンロード出来ます。

[ソース コード]
Yahoo!ボックス: http://yahoo.jp/box/rrJCh0
尚、当ソースコードは御自由に切り貼りして利用して下さって結構です。

おまけに、自作のHTML5 ディジタル インタラクティヴ アート プログラムも御紹介させて頂きます。
次のページで動作致します。
私のブログ記事: HTML5のCamvasと "JavaScript" で音声処理と画像描画。
http://crater.blog.so-net.ne.jp/2016-06-30

[2019年07月03日追記]
迷路自動生成プログラムを改良して専用ページに掲載致しました。
ウェブアプリ: 迷路自動生成プログラム
https://applicationprogram.blog.so-net.ne.jp/2019-07-03

ブログ記事: 迷路自動生成プログラムを改良致しました。
https://crater.blog.so-net.ne.jp/2019-07-03


迷路自動生成Web プログラム ブログトップ