CSS 迷路ジェネレーター & ソルバー【登録不要・サーバー送信なし】

15・21・31・41マスの盤面を,穴掘り法・棒倒し法・再帰分割法から選んで生成できます.方向ボタンや矢印キー,W・A・S・Dでゴールを目指すほか,BFS・DFS・A*がマスを調べる順序と得られた経路をアニメーションで確認できます.生成した盤面は,壁・スタート・ゴールを表すTXTまたはSVGとして保存できます.

CSS 迷路ジェネレーター & ソルバー【登録不要・サーバー送信なし】

迷路生成 • 自動探索アルゴリズム & 可視化ツール

迷路生成設定

生成アルゴリズム

自動探索ソルバー

探索アルゴリズム
探索スピード30 ms

ビジュアルテーマ

スタート
ゴール
プレイヤー
経過時間0 秒
歩数0 歩
S
G
Move

エクスポート

操作方法

移動 (Keyboard):W A S D
移動 (Arrow keys):↑ ↓ ← →

アルゴリズム解説

■ 迷路生成手法

  • 穴掘り法:壁で埋めたグリッドから,ランダムに選んだ方向へ通路を掘り進めます.
  • 棒倒し法:柱を等間隔に配置し,選んだ方向へ壁を伸ばして通路を区切ります.
  • 再帰分割法:空間を壁で分割し,各壁に通路を一つ設ける処理を再帰的に繰り返します.

■ 探索・探索順序

  • 幅優先探索 (BFS):スタート位置から距離の近いマスを順に調べ,この等コスト格子では到達できる最短経路を探します.
  • 深さ優先探索 (DFS):一方向へ進めるだけ進み,行き止まりで戻って別ルートを探索します.得られる経路は最短とは限りません.
  • A* (エースター):現在までの移動コストとゴールまでのManhattan距離を合計し,値が小さい候補から探索します.

このツールが向いている用途

操作欄に戻る ↑

迷路を生成し,手動で解いたり探索の様子を観察したりできます.

まず試せること

小さい迷路を生成し,BFSを選んで探索を開始します.探索済みのセルと表示される経路を見比べます.

利用条件

同じ設定でも生成する迷路は変わります.探索の見え方は迷路の配置と選んだアルゴリズムに依存します.

ZeroToolsのブラウザ内処理とプライバシー

ZeroToolsは,入力内容を端末内で処理するツールを中心に提供しています.各ツールの対応範囲と制限を確認して利用してください.

データの取り扱い・プライバシー方針
第1章

迷路を表す二次元グリッドと開始・終了位置

このツールは,迷路を行と列からなる二次元配列として保持します.各マスは行番号r,列番号cと,壁・通路・スタート・ゴール・探索中・探索済み・解答経路のいずれかを表すtypeを持ちます.画面で選べる大きさは15×15,21×21,31×31,41×41で,いずれも奇数です.生成関数には偶数が渡された場合に1を加える処理もありますが,現在の操作画面から選択できるのは前記の4種類です.

外周は壁として扱い,スタートは左上の外周から一マス内側にある座標[1, 1],ゴールは右下の外周から一マス内側にある座標[サイズ−2, サイズ−2]です.生成処理の最後にはこの二つのマスへ専用の種類を設定し,ゴールの左隣と上隣を通路にします.この後処理はゴールへ接続しやすくするためのものですが,生成直後の位相を変更するため,生成方式について「完全迷路である」「経路が必ず一意である」とは説明できません.

初回表示では,サーバー描画とクライアント描画の差を避けるため,固定値から作る疑似乱数を使って21×21の穴掘り法の盤面を用意します.「新しい迷路を生成」を押した場合や,サイズ・生成方法を変更した場合はMath.randomを使います.利用者がシード値を指定したり,後から同じ盤面を復元したりする機能はありません.

第2章

穴掘り法・棒倒し法・再帰分割法の実装範囲

穴掘り法は,全マスが壁の配列から[1, 1]を通路にし,上下左右の二マス先を候補として再帰的に掘ります.二マス先が外周の内側にあり,まだ壁なら,中間の一マスと移動先を通路にして同じ処理を続けます.候補方向の順序は乱数で並べ替えます.これは本実装の具体的な掘り方を示すものであり,盤面の難しさ,袋小路の数,遊びやすさを他の方式より優れていると保証するものではありません.

棒倒し法は,まず外周を除く内側を通路にし,偶数行・偶数列の交点へ柱となる壁を置きます.最初の柱の行では上下左右から一方向,それ以降の行では下・左・右から一方向を乱数で選び,柱に隣接する一マスも壁にします.最後に外周を壁へ戻します.この方向制限は,上方向へ伸ばした壁が既存の壁と重なる組合せを避けるための実装上の規則です.「標準的な難易度」「必ずバランスがよい」といった評価をツールは計算していません.

再帰分割法は,外周を壁,内側を通路にした領域から始めます.領域の高さが幅より大きければ水平,幅が高さより大きければ垂直,同じなら乱数で向きを決めます.選んだ向きに壁を引き,その壁に一つの開口部を残して,分かれた二領域へ同じ処理を適用します.画面上の名称は「再帰分割法(Recursive Division)」であり,穴掘り法や探索用DFSとは別の生成処理です.

どの方式についても,一意解や特定の難易度を判定する検査は行いません.

第3章

手動攻略,移動判定,手数と経過時間

生成後はプレイ状態になり,方向ボタン,キーボードの矢印キー,またはW・A・S・Dで上下左右へ一マスずつ移動できます.移動先が配列の範囲内で,壁でない場合だけプレイヤー座標を更新します.壁へ向けた入力は移動として数えず,実際に通路へ進んだ回数だけ手数へ加算します.斜め移動や壁越しの移動はありません.

経過時間はプレイ状態の間,setIntervalを使って一秒ずつ増やします.ゴール座標へ移動すると状態をsolvedへ変更し,タイマーを止めます.表示値は一秒刻みであり,高精度タイマーによる競技用計測ではありません.ブラウザのバックグラウンドタブ制御や端末負荷によってコールバックの実行時刻が遅れる可能性もあります.迷路を作り直すとプレイヤーをスタートへ戻し,経過時間と手数を0へリセットします.

テーマはサイバーネオン,レトロゲーム,クラシック,ミニマルの4種類です.テーマはマスのCSS表現を切り替えるもので,壁と通路の配列,探索順序,経路の長さを変更しません.手動攻略の途中で自動探索を開始すると,状態は探索中へ移り,手動移動は受け付けなくなります.

第4章

BFS・DFS・A*の探索順序と経路復元

自動探索を始めると,以前の探索済み・解答経路・探索中の印を通常の通路へ戻し,[1, 1]から右・下・左・上の順で隣接マスを候補にします.各候補には,そのマスへ初めて到達した親座標を記録します.ゴールを見つけた後は,親座標を逆にたどってスタートまで戻り,配列を反転して解答経路を描画します.画面の手数は,この経路に含まれるマス数から1を引いた値へ更新されます.

BFSは候補配列の先頭から取り出すキューとして動きます.上下左右の一回の移動コストがすべて1で,候補を初めて追加した時点で訪問済みにするため,本ツールの無重み格子では,到達可能なゴールまでの最短手数を求めます.一方,DFSは候補配列の末尾から取り出すスタックとして動き,一方向へ深く調べます.ゴールに到達する経路を得られても,その経路が最短である保証はありません.

A*は,スタートから現在位置までの移動回数gと,現在位置からゴールまでのManhattan距離hを足したfを計算し,fが小さい候補から取り出します.ただし本実装は,候補へ追加した時点で訪問済みにし,後からより小さいgが見つかった場合のコスト更新や候補の再登録を行いません.

そのため,一般的なA*の最短経路証明を本実装へ無条件に適用せず,Manhattan距離を使った優先探索の可視化として扱うのが適切です.

第5章

探索アニメーションと速度設定の意味

探索中は,現在調べているマスをscanning,調査を終えたマスをvisitedとして順次表示します.ゴールが見つかると,親座標から復元した経路の内部マスをsolutionへ変えます.探索速度は5〜200ミリ秒の範囲で,探索した一マスごとの待ち時間として使います.値が小さいほど画面更新の間隔が短くなります.経路描画の待ち時間は探索速度の半分を基準にし,最小10ミリ秒です.

この設定はアルゴリズム自体の計算量を変えるものではありません.また,ブラウザのタイマーは指定した時間より前に実行しないための目安であり,描画負荷や端末性能によって実際の間隔は長くなる場合があります.「探索停止」や迷路の再生成では実行中フラグを下げ,予約済みのタイマーを解除します.停止直後の表示には,それまでに付けた探索状態が残ることがありますが,次回の自動探索開始時には探索表示を通路へ戻します.

探索アニメーションが示すのは,本実装が候補を取り出した順序と,その親情報から復元した経路です.全候補の優先度値,キューやスタックの中身,計算時間の厳密な比較は表示しません.生成法ごとの優劣や迷路の難易度を測るベンチマークでもありません.

第6章

TXT・SVG出力の内容と利用上の制約

TXT保存では,壁を全角幅の「██」,スタートを「S」,ゴールを「G」,それ以外を空白二文字として行ごとに書き出します.そのため,通常の通路だけでなく,探索済み,探索中,解答経路も空白になります.フォントによる文字幅の違いで表示がずれる場合があるので,等幅フォントで開くか,保存後の内容を確認してください.ファイル名には選択中の迷路サイズが入ります.

SVG保存では,一マスを10×10のrect要素にして,盤面全体を矩形の集合として書き出します.壁,スタート,ゴールには別の塗り色を使い,その他のマスは同じ通路色です.画面で選んだテーマ,プレイヤーの位置,訪問済みの色,解答経路,手数,経過時間は含みません.SVGは盤面の矩形要素を直接生成しますが,印刷用紙への余白調整やPDF生成,PNG生成はこのツールの保存機能にはありません.

迷路の生成・探索・ファイル組み立てはページ上のJavaScriptで行い,編集中の盤面をサーバーへ保存する機能は設けていません.ただし,この実装事実だけからページ全体の無通信,オフライン動作,情報保護を保証するものではありません.盤面は永続保存されず,ページを再読み込みすると初期状態へ戻ります.教材や印刷物へ利用するときは,経路の到達可否,目的に合う難易度,保存結果を利用者自身で確認してください.

よくある質問(FAQ)

A.
サイズは15×15,21×21,31×31,41×41の4種類です.生成方法は,壁を二マス先へ掘り進める穴掘り法,柱から壁を伸ばす棒倒し法,領域を壁と一つの開口部で分ける再帰分割法から選べます.方法による難易度や経路の一意性は保証していません.
A.
画面の方向ボタンに加え,キーボードの矢印キーまたはW・A・S・Dで移動できます.通路へ移動した回数と経過秒数を表示し,右下のゴールに到達すると計測を止めます.
A.
BFSは,移動コストがすべて1の本ツールの格子で,スタートから近いマスを順に調べるため,到達可能な最短経路を求めます.DFSは一方向へ深く進んでから戻る探索で,ゴールへ到達しても経路が最短になるとは限りません.
A.
本ツールでは,移動済みコストとゴールまでのManhattan距離の合計が小さい候補から調べます.ただし候補追加時に訪問済みとし,後からより小さいコストが見つかっても再評価しない実装なので,一般的なA*の最短経路保証をそのまま当てはめず,探索順序の可視化として利用してください.
A.
いいえ.TXTは壁・スタート・ゴールを文字で表し,SVGは各マスを矩形で描画します.どちらにもプレイヤー位置,探索済み表示,解答経路,手数,経過時間は含まれません.必要な状態になっているか保存後に確認してください.