イラスト迷路とは、最短経路で移動すると絵が現れる迷路のことです。
今回はAntigravityを使用してイラスト迷路生成ツールを作成しました。
https://elix.jp/app/illustmaze/
まずは大まかな指示を出し、そこからステップバイステップで機能を追加していきました。
ソースコードは一切書いていませんが、指示を出すために中身を覗いています。
最終的なプロンプトが以下になります。
イラスト迷路最終プロンプト
# イラスト迷路仕様
## 概要
迷路を最短距離で移動すると、イラストが完成するパズルゲーム。JSONファイルをドラッグ＆ドロップして迷路を読み込み、自動解答アニメーションを表示します。
## 基本仕様
### グリッドサイズ
- 可変サイズ対応（JSONファイルのサイズに自動適応）
- イラストデータのサイズに基づいて自動設定
### ビジュアル
- **壁**: グレー (#ccc)
- **通路**: 白 (#fff)
- **スタート地点**: 薄緑 (#8f8) + 「S」の文字（グレー #666）
- **ゴール地点**: 薄赤 (#f88) + 「G」の文字（グレー #666）
- **解答経路**: 半透明の茶色 (rgba(139, 69, 19, 0.1))
### レンダリング仕様
- Canvas APIを使用
- セルサイズ: 20px
- 壁の厚さ: 2px
- 総サイズ計算: `width * 20 + (width + 1) * 2`
- スタート/ゴールの文字: 太字14pxのArialフォント、中央揃え
## JSONデータ読み込み
### ドラッグ＆ドロップ機能
- ドロップゾーン: キャンバス全体
- 対応ファイル: `.json`拡張子のファイル
- ドラッグオーバー時: ビジュアルフィードバック（`drag-over`クラス）
- ドロップ時: 即座にバリデーションと描画を実行
### JSON形式
{
"title": "URLエンコードされたタイトル",
"size": {"x": 64, "y": 64},
"path": [
{"x": 0, "y": 0},
{"x": 1, "y": 0},
...
]
}
### バリデーション
読み込み時に以下をチェック:
1. `size.x`と`size.y`が数値であること
2. `path`が配列で、要素が1つ以上あること
3. 各座標が数値であること
4. 座標がグリッドサイズ内に収まっていること
バリデーション失敗時はアラートで通知。
### 読み込み成功時の動作
1. 迷路を即座に生成・描画
2. Start、Reset、Downloadボタンを有効化
3. 成功メッセージを表示（3秒後に自動的に非表示）
- 形式: `Loaded: {タイトル} ({幅}x{高さ})`
- 色: 緑 (#4CAF50)
## 迷路生成アルゴリズム
### 基本方針
1. イラストパスを主経路として確保
2. 主経路から分岐する袋小路を生成
3. すべてのセルを訪問可能にする
### 実装（`js/maze_generator.js`）
#### フェーズ1: イラストパスの確保
// 1. グリッド初期化（すべての壁を立てる）
// 2. イラストの各座標をマーク
// 3. 連続する座標間の壁を除去
// 4. これらのセルを訪問済みとしてマーク
// 5. スタート地点とゴール地点を設定
#### フェーズ2: 袋小路の生成
// 1. イラストパス上のセルを開始点として登録
// 2. ランダムに選択したセルから未訪問の隣接セルへ拡張
// 3. 壁を除去して接続
// 4. すべてのセルが訪問済みになるまで繰り返し
### データ構造
各セルは以下の情報を保持:
{
x: number,
y: number,
walls: {
top: boolean,
right: boolean,
bottom: boolean,
left: boolean
},
visited: boolean,
isPath: boolean // イラストパスの一部かどうか
}
迷路全体の構造:
{
width: number,
height: number,
grid: Cell[][],
start: {x: number, y: number},
end: {x: number, y: number}
}
## 解答とアニメーション
### 最短経路探索
- BFS（幅優先探索）を使用（`js/solver.js`）
- スタートからゴールまでの最短経路を計算
- 結果はイラストパスと一致する
### アニメーション（`js/main.js`）
1. Startボタンをクリック
2. ドロップメッセージを非表示
3. Startボタンを無効化（アニメーション中の重複実行を防止）
4. 最短経路を計算
5. 20msごとに1セルずつ塗りつぶし
6. セル間の壁も塗りつぶして連続性を確保
7. イラストが完成したら終了
## コントロール機能
### Startボタン
- 初期状態: 無効（JSONファイル読み込み後に有効化）
- クリック時: 解答アニメーションを開始
- アニメーション中: 無効化
### Resetボタン
- 初期状態: 無効（JSONファイル読み込み後に有効化）
- クリック時: 迷路を初期状態（読み込み直後）に戻す
- 動作:
- 迷路を再描画（解答経路をクリア）
- Startボタンを再度有効化
- ドロップメッセージは非表示のまま
### Downloadボタン
- 初期状態: 無効（JSONファイル読み込み後に有効化）
- クリック時: 現在のキャンバスをPNG画像としてダウンロード
- ファイル名: `maze_{タイトル}.png`（タイトルがない場合は`maze.png`）
- タイトルはURLデコードされた状態で使用
## UI/UX
### レイアウト
- **ヘッダー**: タイトル「IllustMaze」
- **ドロップゾーン**: キャンバスとドロップメッセージを含む
- **コントロール**: Start、Reset、Downloadボタンを横並びで配置
### メッセージ表示
- **初期メッセージ**:
- 画像: `img/maze_16heart.png`（最大幅180px）
- テキスト: 「Drop JSON file here to load maze data」
- リンク: 「or create a new maze」（`editor.html`へのリンク）
- **読み込み成功**: 「Loaded: {タイトル} ({幅}x{高さ})」（緑色、3秒後に非表示）
- **エラー**: アラートダイアログで表示
### ビジュアルフィードバック
- ドラッグオーバー時: ドロップゾーンのスタイル変更
- ボタンの有効/無効状態の明確な表示
## ゲームフロー
1. **JSONファイルのドラッグ＆ドロップ**
- ファイルをドロップゾーンにドロップ
- バリデーション実行
- 成功時: 迷路を生成・描画、ボタンを有効化
2. **迷路の確認**
- 生成された迷路を確認
- スタート地点（S）とゴール地点（G）を確認
3. **解答アニメーション**
- Startボタンをクリック
- 最短経路がアニメーション表示される
- イラストが浮かび上がる
4. **リセットと再生**
- Resetボタンで初期状態に戻す
- 何度でも再生可能
5. **画像のダウンロード**
- Downloadボタンで現在の状態を画像として保存
- 解答前、解答後のどちらでもダウンロード可能
## ファイル構成
- `index.html`: メインUI（ドロップゾーン、コントロールボタン）
- `js/main.js`: ゲーム制御、レンダリング、アニメーション、ドラッグ＆ドロップ処理
- `js/maze_generator.js`: 迷路生成アルゴリズム
- `js/solver.js`: 最短経路探索（BFS）
- `css/style.css`: スタイル定義
## 技術仕様
### レンダリング詳細
- セル描画: 白い矩形（20x20px）
- 壁の除去: 隣接セル間の2px幅の壁を白で塗りつぶし
- スタート/ゴール: セル全体を色付け + 中央に文字を描画
- 解答経路: 半透明の茶色で重ね塗り
### パフォーマンス
- アニメーション速度: 20ms/セル
- 64x64グリッドで約1.3秒で完了
- Canvas描画のため高速レンダリング
### データ管理
- `currentMaze`: 現在読み込まれている迷路データ
- `loadedIllustration`: 読み込まれたJSONデータ（タイトル情報を含む）
## 連携機能
### エディタとの連携
- `editor.html`で作成したJSONファイルをドラッグ＆ドロップして使用
- エディタの保存成功ダイアログから直接IllustMazeを開くことができる
- タイトル情報はダウンロード時のファイル名に使用される
### 拡張性
#### カスタムイラスト
JSONファイル形式に従えば、任意のイラストを読み込み可能:
- 一筆書きの座標配列
- スタート/ゴールは外枠上に配置
- 4-connectivity（上下左右のみの接続）
#### サイズ調整
- 任意のグリッドサイズに対応（8x8 ～ 128x128推奨）
- キャンバスサイズは自動計算
一筆描きエディター最終プロンプト
# イラスト迷路用一筆書きエディタ仕様
## 概要
迷路を最短距離で移動するとイラストが完成する迷路のための、一筆書きを作成するツール
## 基本機能
### グリッドサイズ
- サイズ範囲: 8x8 ～ 128x128（可変）
- Width/Height入力フィールドで変更可能
- 既存の描画がある場合、その範囲より小さくはできない
- サイズ変更時は既存の描画を保持
- 左/上に空白がある場合は自動的に削除してサイズを最適化
### 描画機能
- **色の定義**:
- 壁: グレー (#ccc)
- 通路: 白 (#fff)
- 描画された通路: オレンジ (#FF8C00、70%の太さで線として表示)
- **描画モード**:
- 空白セルをクリック → ペイントモード開始（オレンジで塗る）
- 塗られたセルをクリック → 消去モード開始（白に戻す）
- ドラッグ中は同じモードを継続
- 競合するセル（ペイント中に塗られたセルに遭遇、または消去中に空白セルに遭遇）に到達したら描画を停止
- **タッチ操作対応**: スマホやタブレットでのタッチによる描画に対応（スクロール防止）
- **パス補間**:
- マウスを素早く動かしても途切れない線を描画
- Bresenhamアルゴリズムを使用
- 斜め移動は自動的に4-connectivity（上下左右のみの接続）に変換
- **明示的な接続管理**:
- セルの塗りつぶし状態とは別に、セル間の接続情報を管理
- 並行する通路が誤って接続されることを防止
### 編集機能
#### シフト機能
- **→ボタン**: 描画を1マス右にシフト
- **↓ボタン**: 描画を1マス下にシフト
- グリッドサイズからはみ出す場合はシフトしない（日本語のアラートダイアログで警告表示）
#### リセット機能
- **Reset Gridボタン**: グリッド内の道を消去
- 描画がある場合は確認ダイアログを表示（日本語）
- OKを選択した場合のみクリア実行
#### インポート機能
- **ドラッグ＆ドロップ**:
- JSONファイルをキャンバスにドラッグ＆ドロップして読み込み
- ドラッグ中はキャンバスの枠線が緑色の点線に変化
- 読み込み時に以下を実行:
- グリッドサイズを自動調整
- タイトルを反映
- 道のデータを復元（接続情報も再構築）
- 既存の描画は上書きされる
- JSON以外のファイルがドロップされた場合はアラートを表示
#### 未保存変更の保護
- **ページ遷移時の警告**:
- 以下の条件を満たす場合に、ページを離れようとするとブラウザの警告を表示:
- グリッドに描画が存在する
- 前回の保存（または読み込み/リセット）から変更が加えられている
- 保存直後や、描画が空の場合は警告を表示しない
#### ヘルプ機能
- **Helpボタン**: エディタの使用方法を表示
- モーダルダイアログで以下の情報を表示:
- 基本操作（左クリック、ドラッグ）
- グリッド設定（Width/Height、シフトボタン、Reset Grid）
- 保存方法（Title入力、Save & Export JSON）
- 注意事項（一筆書き、端点の配置）
- ×ボタンまたはダイアログ外クリックで閉じる
### 検証とエクスポート
#### タイトル入力
- 最大30文字のタイトルを入力可能
- JSONファイルに含まれる（URLエンコード）
- ファイル名にも使用される（URLエンコードなし）
#### 一筆書き検証
保存時に以下をチェック（すべて日本語のアラートダイアログで表示）:
1. **道の存在**: 道が描かれているか
2. **接続性**: すべての塗られたセルが接続されているか
3. **分岐なし**: 各セルの接続数が2以下か（端点は1）
4. **端点数**: 正確に2つの端点があるか（ループは不可）
5. **境界チェック**: 両端点がグリッドの外枠上にあるか
エラーがある場合:
- エラーセルを赤色でハイライト表示
- 日本語のエラーメッセージをアラートダイアログで表示
#### 保存成功時の動作
- JSONファイルを自動ダウンロード
- 成功ダイアログを表示:
- タイトル: 「✓ 保存しました！」
- メッセージ: 保存成功の確認
- リンクボタン: 「IllustMaze を開く」（index.htmlへのリンク、新しいタブで開く）
- ×ボタンまたはダイアログ外クリックで閉じる
#### JSON出力形式
{
"title": "エンコードされたタイトル",
"size": {"x":64,"y":64},
"path": [
{"x":0,"y":0},{"x":1,"y":0},...
]
}
- タイトル: URLエンコードされた文字列
- サイズ: `{x: width, y: height}` 形式
- パス: 始点から終点まで順序付けられた座標配列
- 座標は1行あたり約240文字でコンパクトに整形
- ファイル名: `{タイトル}.json`（タイトルが空の場合は`Untitled.json`）
## UI/UXの特徴
### レイアウト
- **ヘッダー**: タイトル「IllustMaze Editor」
- **キャンバス**: 中央に配置、レスポンシブサイズ
- **フッターコントロール**: 2つのグループに分割
- **左グループ**: Width/Height入力、シフトボタン、Reset Grid、Help（10pxの間隔）
- **右グループ**: Title入力、Save & Export JSONボタン（10pxの間隔）
- グループ間: 100pxの間隔
- **メッセージエリア**: エラー表示用（現在は主にアラートダイアログを使用）
### モーダルダイアログ
- **共通スタイル**:
- 半透明の黒背景（rgba(0, 0, 0, 0.5)）
- 白い丸角のコンテンツボックス
- フェードイン＆スライドダウンアニメーション
- ×ボタンで閉じる
- ダイアログ外クリックで閉じる
- **ヘルプダイアログ**:
- 緑色のアクセントカラー（#4CAF50）
- 使用方法を階層的に表示
- **成功ダイアログ**:
- 緑色のテーマ（#4CAF50）
- 中央揃えのコンテンツ
- スタイル付きのリンクボタン（ホバー効果付き）
### エラーハンドリング
- すべてのエラーメッセージは日本語
- アラートダイアログで表示
- エラーがある場合は該当セルを赤色でハイライト
- ユーザーが修正すると自動的にハイライトをクリア
## 技術仕様
### データ構造
- `grid[y][x]`: セルの塗りつぶし状態（boolean）
- `hConnections[y][x]`: (x,y)と(x+1,y)の水平接続（boolean）
- `vConnections[y][x]`: (x,y)と(x,y+1)の垂直接続（boolean）
- `errorCells`: エラーのあるセルのSet（"x,y"形式の文字列）
### レンダリング
- Canvas APIを使用
- グリッドサイズ: ビューポートの小さい方の70%（70vmin）
- セルサイズは自動計算
- 線の太さ: セルサイズの70%
- エラーセルは赤色（#FF0000）で表示
### イベント処理
- `mousedown`: 描画開始、モード決定
- `mousemove`: 描画継続（補間あり）
- `mouseup`: 描画終了
- `change`: グリッドサイズ変更（既存描画を保持）
- `click`: リセット（確認あり）、シフト、保存、ヘルプ表示
- `dragover`, `dragleave`, `drop`: JSONファイルのインポート処理
- `touchstart`, `touchmove`, `touchend`: タッチデバイスでの描画処理
- `beforeunload`: 未保存の変更がある場合の警告表示
### メッセージの国際化
すべてのユーザー向けメッセージは日本語:
- 検証エラー
- 確認ダイアログ
- 成功メッセージ
- ヘルプコンテンツ
## ファイル構成
- `editor.html`: エディタUI（ヘルプダイアログ、成功ダイアログを含む）
- `js/editor.js`: エディタロジック（描画、検証、保存、ダイアログ制御）
- `css/editor.css`: スタイル定義（モーダルダイアログスタイルを含む）
## 連携機能
- 保存したJSONファイルは`index.html`（IllustMaze）でドラッグ＆ドロップして使用可能
- 成功ダイアログから直接IllustMazeを開くことができる
追記：イラスト迷路をユーザーが解く機能を追加しました
