迷路ゲーム改立体(ThreeJS版3Dダンジョン) - 迷路自動生成付 📖

ThreeJSプラグインを取り込んで動かすテスト。こんどはほんとの3Dで迷路も立体。dialogをサポートしているブラウザならば、オプションで立体か平坦か選べます。視界的に直上下左右の壁は見えないの可能性があるので注意。Turtle3Dの同時利用により「a」で今いるマスの向いている方向奥に四角を描きます。「c」で描いた全ての四角を消します。行き止まりのマークなどに活用してみてください。

プログラム: (→大)
# plugin_weykturtle3d.jsの替わりに取り込む !「https://n3s.nadesi.com/plain/762.js」を取り込む # plugin_weykthree.jsの替わりに取り込む !「http://n3s.nadesi.com/plain/576.js」を取り込む ##### 起動時のオプション。dialog要素が使える場合はdaialogから変更可能。 # 指定したサイズの通路を持つ３次元の迷路になる。 # ステージクリア毎にどんどん大きくなる 迷路サイズ初期値 = 2 # オンにすると迷路はNxNxNになる。 # オフにするとNxNx1となり１階層のみになる。 迷路上下有 = オン # レンガ：各壁面にレンガ壁を使用する。 # 枠なし：向いた方向に対する正面が「上:黄/下:青/東:緑/北:紫/西:赤/南:水」となる単色を使用する。 # 枠付き：壁を赤地の紫枠で表示する。 壁面 = 「枠なし」 # 迷路の3Dモデル生成後にOrbitalControlで表示する。 # ゲームとしては動かず、ブロック群を眺めることになる。 確認モード = オフ # 全体を一様に照らす環境光を設定する。遠くが暗くなることがなくなり立体感は薄れる。 # オフにした場合は視点と同じ位置にある点の光源を利用する。 環境光使用 = オフ # 方向転換する際と移動する際に掛けるフレーム数 # 壁に向かって移動最多場合、移動失敗判定フレームまでは移動してから元の位置に戻される。 回転フレーム数 = 15 移動フレーム数 = 20 移動失敗判定フレーム = 5 ##### ほぼ固定された変数 # プレイヤーの初期座標と視線の方向と頭の方向を指定 # ゴールは+X,+Y,+Zが最大の角になる。 PLO = { X:1, Y:1, Z:1. D:"+X" , H:"+Y" } # 壁とゴールの色の設定 # 0:ゴールの球の色 # 1-6:枠なし壁を指定した際の各方向の壁の色 # 1:西(-X) # 2:東(+X) # 3:下(-Y) # 4:上(+Y) # 5:北(-Z) # 6:南(+Z) COLORS = [0xffffff, 0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff] BLOCKSIZE=1 WALLWIDTH=0.2 MW=BLOCKSIZE IW=WALLWIDTH テクスチャサイズ=512 HELP3 = 「前進:[SPC],向く:[←][↑][↓][→]/マウス可」 HELP2 = 「前進:[SPC][↑],向く:[←][↓][→]/マウス可」 回転角 = { 　上:[ -90,[-1,0,0]], 　下:[ 90,[-1,0,0]], 　右:[ 90,[0,-1,0]], 　左:[ -90,[0,-1,0]], 　後:[ 180,[0,-1,0]] } 方向名 = { 　"+X":"東", 　"-X":"西", 　"+Y":"上", 　"-Y":"下", 　"+Z":"南", 　"-Z":"北" } 方向V = { 　"+X":[ 1, 0, 0], 　"-X":[-1, 0, 0], 　"+Y":[ 0, 1, 0], 　"-Y":[ 0,-1, 0], 　"+Z":[ 0, 0, 1], 　"-Z":[ 0, 0,-1] } WEBGLキャンバスはNULL ココはNULL カメラはNULL コントローラはNULL ヒカリゴケはNULL ランタンはNULL 壁テクスチャは空配列 壁キャンバスは空配列 壁構造はNULL 壁材質はNULL ゴール球構造はNULL ゴール球材質はNULL レンダラはNULL カメIDは-1 オプション選択ダイアグはNULL # ステージクリア時のThreeJSオブジェクト再利用用 ブロックリスト = 空配列 ゴール球 = 空配列 迷路サイズ = 0 迷路は空 # プレイヤーの情報 PX = 0。PY = 0。PZ = 0 PD = ""。PH = "" # 移動時ワーク変数 DX = 0。DY = 0。DZ = 0。 # 回転時ワーク変数 DRA = 0。DRV = [0,0,0]。 継続中はオフ 状態 = 「開始」 行動状態は「停止中」 行動オプションは空 行動フレームは０ 追加メッセージ = 空 # 起動時のオプション選択画面 sは『<form method="dialog"> <table> <tbody> <tr> <th>開始サイズ</th> <td> <label><input type="radio" name="size" value="2" checked="checked">2</label> <label><input type="radio" name="size" value="5">5</label> <label><input type="radio" name="size" value="10">10</label> </td> </tr> <tr> <th>２次元迷路or３次元迷路</th> <td> <label><input type="radio" name="dim" value="2">２次元</label> <label><input type="radio" name="dim" value="3" checked="checked">３次元</label> </td> </tr> <tr> <th>動きの速さ</th> <td> <label><input type="radio" name="spd" value="0">速い</label> <label><input type="radio" name="spd" value="1" checked="checked">普通</label> <label><input type="radio" name="spd" value="2">遅い</label> </td> </tr> <tr> <th>壁面</th> <td> <label><input type="radio" name="wall" value="0">レンガ</label> <label><input type="radio" name="wall" value="1">単色枠付き</label> <label><input type="radio" name="wall" value="2" checked="checked">６色枠なし</label> </td> </tr> <tr> <th>光源</th> <td> <label><input type="radio" name="light" value="0">ヒカリゴケ(環境光)</label> <label><input type="radio" name="light" value="1" checked="checked">ランタン(点光源)</label> </td> </tr> <tr> <th>開発者用オプション</th> <td> <label><input type="radio" name="test" value="0" checked="checked">通常</label> <label><input type="radio" name="test" value="1">確認</label> </td> </tr> </tbody> </table> <div style="text-align: center"> <button value="cancel">Cancel</button> <button value="start">開始</button> </div> </form>』 ##### プログラム開始 開始する ●開始とは 　　もし、再実行チェックでなければ、 　　　　「連続で実行できません。画面を読み込みなおしてください」を言う 　　　　戻る 　　ここまで 　　オプション選択画面表示 ここまで ●オプション選択画面表示とは 　もし、ダイアログ使用可能でなければ、 　「ダイアログ要素が使用できないため、既定の設定で開始します」を表示する 　　初期化開始する 　　戻る 　ここまで 　オプション選択ダイアグはsでダイアログ作成する。 　オプション選択ダイアグを"body"にDOM子要素追加する 　オプション選択ダイアグの"close"に「DIALOG_CLOSE」をDOMイベント追加 　対象テーブルはオプション選択ダイアグの"querySelector"を["table"]でJSメソッド実行 　対象テーブルに初期選択色設定 　対象テーブルの"change"に「RADIO_CLICK」をDOMイベント追加 　オプション選択ダイアグのダイアログモーダル開く ここまで ●DIALOG_CLOSEとは 　全要素はオプション選択ダイアグの"querySelectorAll"を["input:checked"]でJSメソッド実行 　全要素数は全要素の配列要素数 　全要素数回、 　　要素は全要素[回数-1] 　　要素名は要素["name"]の大文字変換 　　値は(要素["value"]-0) 　　要素名で条件分岐 　　　「SIZE」ならば、 　　　　迷路サイズ初期値 = 値 　　　ここまで 　　　「DIM」ならば、 　　　　もし、値が２ならば、 　　　　　迷路上下有 = オフ 　　　　違えば 　　　　　迷路上下有 = オン 　　　　ここまで 　　　ここまで 　　　「WALL」ならば、 　　　　値で条件分岐 　　　　　０ならば、 　　　　　　壁面 = 「レンガ」 　　　　　ここまで 　　　　　１ならば、 　　　　　　壁面 = 「枠付き」 　　　　　ここまで 　　　　　２ならば、 　　　　　　壁面 = 「枠なし」 　　　　　ここまで 　　　　　違えば、 　　　　　　壁面 = 「レンガ」 　　　　　ここまで 　　　　ここまで 　　　ここまで 　　　「SPD」ならば、 　　　　値で条件分岐 　　　　　０ならば、 　　　　　　回転フレーム数 = 5 　　　　　　移動フレーム数 = 10 　　　　　　移動失敗判定フレーム = 3 　　　　　ここまで 　　　　　１ならば、 　　　　　　回転フレーム数 = 15 　　　　　　移動フレーム数 = 20 　　　　　　移動失敗判定フレーム = 5 　　　　　ここまで 　　　　　２ならば、 　　　　　　回転フレーム数 = 30 　　　　　　移動フレーム数 = 30 　　　　　　移動失敗判定フレーム = 10 　　　　　ここまで 　　　　　違えば、 　　　　　　壁面 = 「レンガ」 　　　　　ここまで 　　　　ここまで 　　　ここまで 　　　「LIGHT」ならば、 　　　　もし、値が０ならば、 　　　　　環境光使用 = オン 　　　　違えば 　　　　　環境光使用 = オフ 　　　　ここまで 　　　ここまで 　　　「TEST」ならば、 　　　　もし、値が１ならば、 　　　　　確認モード = オン 　　　　違えば 　　　　　確認モード = オフ 　　　　ここまで 　　　ここまで 　　ここまで 　ここまで 　結果はオプション選択ダイアグ["returnValue"] 　オプション選択ダイアグの"close"から「DIALOG_CLOSE」をDOMイベント削除 　対象テーブルはオプション選択ダイアグの"querySelector"を["table"]でJSメソッド実行 　対象テーブルの"change"から「RADIO_CLICK」をDOMイベント削除 　オプション選択ダイアグを"body"からDOM子要素削除する 　もし、結果が「start」ならば、 　　初期化開始する 　違えば、 　　「キャンセルされました。」を表示する。 　ここまで ここまで ●(対象テーブルに)初期選択色設定とは 　LABELSは対象テーブルの"querySelectorAll"を["label"]でJSメソッド実行 　ラベル数はLABELSの配列要素数 　ラベル数回、 　　LはLABELS[回数-1] 　　IはLの"querySelector"を["input"]でJSメソッド実行 　　もし、I["checked"]ならば、 　　　Lの"背景色"に"#48f"をDOMスタイル設定 　　違えば、 　　　Lの"背景色"に"#fff"をDOMスタイル設定 　　ここまで 　ここまで ここまで ●RADIO_CLICKとは 　EVTはWINDOW["event"] 　対象はEVT["target"] 　もし、(対象["tagName"]を大文字変換)＝"INPUT"＆＆(対象["type"]を大文字変換)＝"RADIO"ならば、 　　LABELは対象 　　LABELの間、 　　　もし、(LABEL["tagName"]を大文字変換)＝"LABEL"ならば、 　　　　抜ける 　　　ここまで 　　　LABELはLABEL["parentNode"] 　　ここまで 　　もし、LABELでなければ、 　　　戻る 　　ここまで 　　TDはLABEL 　　TDの間、 　　　もし、(TD["tagName"]を大文字変換)＝"TD"ならば、 　　　　抜ける 　　　ここまで 　　　TDはTD["parentNode"] 　　ここまで 　　もし、TDでなければ、 　　　戻る 　　ここまで 　　LABELSはTDの"querySelectorAll"を["label"]でJSメソッド実行 　　ラベル数はLABELSの配列要素数 　　ラベル数回、 　　　LはLABELS[回数-1] 　　　Lの"背景色"に"#fff"をDOMスタイル設定 　　ここまで 　　LABELの"背景色"に"#48f"をDOMスタイル設定 　ここまで ここまで ●初期化開始とは 　ライブラリ準備 ここまで ●ライブラリ準備とは 　TJSライブラリ読み込み後には 　　T3Dライブラリ読み込み後には 　　　もし、確認モードならば、 　　　　プラグイン準備 　　　違えば、 　　　　準備完了 　　　ここまで 　　ここまで 　ここまで ここまで ●プラグイン準備とは 　["controls/OrbitControls.js"]をTJSプラグイン読み込み後には 　　準備完了 　ここまで ここまで ●準備完了とは 　　WEBGLキャンバス要素準備 　　T3D自動実行 = オフ 　　T3D自動描画 = オフ 　　描画環境準備する 　　継続中はオン 　　もし、確認モードでなければ、 　　　　入力受付設定 　　ここまで 　　状態 = 「開始」 　　0でアニメーション ここまで ●再実行チェックとは 　　WEBGLキャンバスは"#three_cv"のDOM要素取得 　　もし、WEBGLキャンバスならば、 　　　　オフで戻る 　　ここまで 　　オンで戻る ここまで ●WEBGLキャンバス要素準備とは 　　WEBGLキャンバスは"#three_cv"のDOM要素取得 　　もし、WEBGLキャンバスでなければ、 　　　　Pは描画中キャンバス["parentNode"] 　　　　WEBGLキャンバスは"CANVAS"のDOM要素作成 　　　　WEBGLキャンバス["id"]は"three_cv" 　　　　WEBGLキャンバス["width"]は描画中キャンバス["width"] 　　　　WEBGLキャンバス["height"]は描画中キャンバス["height"] 　　　　WEBGLキャンバス["style"]["display"]は「none」 　　　　PにWEBGLキャンバスをDOM子要素追加 　　ここまで 　　描画中キャンバス["parentNode"]にDOM親要素設定 ここまで ●入力受付設定とは 　　# キー操作に応じてゲームを進める 　　DOCUMENTをキー押した時には 　　　　K=押されたキー。 　　　　もし、状態＝「メイン」ならば、 　　　　　　もし、K=「ArrowUp」ならば、 　　　　　　　もし、迷路上下有ならば、 　　　　　　　　上向く。 　　　　　　　違えば、 　　　　　　　　前進む。 　　　　　　　ここまで 　　　　　　違えば、もし、K=「ArrowDown」ならば、 　　　　　　　もし、迷路上下有ならば、 　　　　　　　　下向く。 　　　　　　　違えば、 　　　　　　　　後向く。 　　　　　　　ここまで 　　　　　　違えば、もし、K=「ArrowLeft」ならば、左向く。 　　　　　　違えば、もし、K=「ArrowRight」ならば、右向く。 　　　　　　違えば、もし、K=「 」ならば、前進む。 　　　　　　違えば、もし、K=「a」ならば、 　　　　　　　もし、カメID＜0ならば、 　　　　　　　　カメID = T3Dカメ作成 　　　　　　　　T3Dカメ速度 = 50 　　　　　　　　0xffffffにT3Dカメペン色設定 　　　　　　　ここまで 　　　　　　　T3Dカメ表示 　　　　　　　(カメラのTJS位置取得)にT3Dカメ起点移動 　　　　　　　(カメラのTJS四元数取得)にT3Dカメ角度設定 　　　　　　　オフにT3Dカメペン設定 　　　　　　　90だけT3Dカメ上回転 　　　　　　　(BLOCKSIZE*0.9)だけT3Dカメ進む 　　　　　　　90だけT3Dカメ上回転 　　　　　　　(BLOCKSIZE*0.2)だけT3Dカメ進む 　　　　　　　90だけT3Dカメ右回転 　　　　　　　(BLOCKSIZE*0.2)だけT3Dカメ進む 　　　　　　　オンにT3Dカメペン設定 　　　　　　　４回、 　　　　　　　　6回、 　　　　　　　　　(90/6)だけT3Dカメ右回転 　　　　　　　　ここまで 　　　　　　　　5回、 　　　　　　　　　(BLOCKSIZE*(0.4/5))だけT3Dカメ進む 　　　　　　　　ここまで 　　　　　　　ここまで 　　　　　　違えば、もし、K=「c」ならば、 　　　　　　　T3Dカメ非表示 　　　　　　　T3D線全消去 　　　　　　ここまで 　　　　ここまで。 　　　　もし、K=「Escape」ならば、状態 = 「終了」。 　　　　違えば、もし、K=「q」ならば、状態 = 「終了」。 　　　　WINDOW["event"]の"preventDefault"を[]でJSメソッド実行 　　ここまで。 　　描画中キャンバスをマウス押した時には 　　　　もし、マウスX=0ならば戻る。 　　　　W=描画中キャンバスの「width」をDOM属性取得。 　　　　H=描画中キャンバスの「height」をDOM属性取得。 　　　　XX=W/2-マウスX 　　　　YY=H/2-マウスY 　　　　もし、状態＝「メイン」ならば、 　　　　　　もし、ABS(XX) < W*0.3かつABS(YY) < H*0.3ならば、 　　　　　　　　前進む。 　　　　　　違えばもし、ABS(XX) > ABS(YY)ならば 　　　　　　　　もしXX<0ならば 　　　　　　　　　　右向く。 　　　　　　　　違えば 　　　　　　　　　　左向く。 　　　　　　　　ここまで 　　　　　　違えば 　　　　　　　　もしYY<0ならば 　　　　　　　　　　もし、迷路上下有ならば、 　　　　　　　　　　　　下向く。 　　　　　　　　　　違えば、 　　　　　　　　　　　　後向く。 　　　　　　　　　　ここまで 　　　　　　　　違えば 　　　　　　　　　　もし、迷路上下有ならば、 　　　　　　　　　　　　上向く。 　　　　　　　　　　違えば、 　　　　　　　　　　　　前進む。 　　　　　　　　　　ここまで 　　　　　　　　ここまで。 　　　　　　ここまで。 　　　　ここまで。 　　ここまで。 ここまで ●入力受付解除とは 　　DOCUMENTをキー押した時には 　　ここまで 　　描画中キャンバスをマウス押した時には 　　ここまで ここまで # 移動先の座標に移動できるか確認する ●右向くとは 　　「右」に方向転換。 ここまで ●左向くとは 　　「左」に方向転換。 ここまで ●上向くとは 　　「上」に方向転換。 ここまで ●下向くとは 　　「下」に方向転換。 ここまで ●前進むとは 　　「前」に移動開始。 ここまで ●後ろ向くとは 　　「後」に方向転換。 ここまで ●後戻るとは 　　「後」に移動開始。 ここまで ●(Dに)方向転換とは 　　もし、行動状態が「停止中」ならば、 　　　　行動状態は「回転中」 　　　　行動オプションはD 　　　　行動フレームは０ 　　　　追加メッセージ = 空 　　　　DRA = 回転角[行動オプション][0] 　　　　DRV = 回転角[行動オプション][1] 　　ここまで ここまで ●(Dに)移動開始とは 　　もし、行動状態が「停止中」ならば、 　　　　行動状態は「移動中」 　　　　行動オプションはD 　　　　行動フレームは０ 　　　　追加メッセージ = 空 　　　　DX = 0。DY = 0。DZ = 0。 　　　　もし、(PDの2文字目) = 「X」ならば、DX = 1 　　　　もし、(PDの2文字目) = 「Y」ならば、DY = 1 　　　　もし、(PDの2文字目) = 「Z」ならば、DZ = 1 　　　　もし、(PDの1文字目) = 「-」ならば、 　　　　　　DX = -DX。DY = -DY。DZ = -DZ。 　　　　ここまで 　　ここまで ここまで ●(タイムスタンプで)アニメーションとは 　　もし、継続中ならば、 　　　　状態管理 　　　　画面更新時実行には(タイムスタンプ) 　　　　　　タイムスタンプでアニメーション 　　　　ここまで 　　ここまで ここまで ●状態管理とは 　　状態で条件分岐する 　　　　「開始」ならば、 　　　　　　迷路サイズ = 迷路サイズ初期値 　　　　　　迷路高さ = 1 　　　　　　もし、迷路上下有ならば、迷路高さ = 迷路サイズ。 　　　　　　[迷路サイズ,迷路高さ,迷路サイズ]で迷路探索開始 　　　　　　状態 = 「メイン」 　　　　ここまで 　　　　「メイン」ならば 　　　　　　メイン 　　　　ここまで 　　　　「次ステージ」ならば、 　　　　　　次ステージ 　　　　ここまで 　　　　「終了」ならば、 　　　　　　入力受付解除 　　　　　　# 全ブロッククリア 　　　　　　TJS全消去 　　　　　　全描画クリア 　　　　　　継続中はオフ 　　　　ここまで 　　ここまで ここまで ●(サイズで)迷路探索開始とは 　　迷路 = サイズの迷路作成。 　　PX=PLO["X"]。PY=PLO["Y"]。PZ=PLO["Z"]。 　　PD=PLO["D"]。PH=PLO["H"] 　　迷路[サイズ[2]*2-1][サイズ[1]*2-1][サイズ[0]*2-1]=2 # ゴール生成 　　ココに迷路を迷路構造構築 　　もし、迷路上下有ならば、 　　　　追加メッセージ = 「サイズ({サイズ[0]*2+1},{サイズ[1]*2+1},{サイズ[2]*2+1})スタート！！」 　　違えば、 　　　　追加メッセージ = 「サイズ({サイズ[0]*2+1},{サイズ[2]*2+1})スタート！！」 　　ここまで ここまで ●次ステージとは 　　もし、迷路上下有ならば、 　　　　迷路サイズ = 迷路サイズ + 1。 　　　　迷路高さ = 迷路サイズ。 　　違えば、 　　　　迷路サイズ = 迷路サイズ * 2。 　　　　迷路高さ = 1。 　　ここまで 　　「ゲームクリア！{改行}そして新しい迷路{迷路サイズ*2+1}へようこそ！」と言う。 　　[迷路サイズ,迷路高さ,迷路サイズ]で迷路探索開始 　　状態 = 「メイン」 ここまで ●メインとは 　　もし、確認モードならば、 　　　　ココをカメラでレンダラにTJS描画 　　　　WEBGLキャンバスを[0,0]へ画像描画 　　　　戻る 　　ここまで 　　# 座標と移動の処理 　　もし、行動状態が「移動中」ならば、 　　　　# アニメーション処理と移動中終了の判定 　　　　行動フレームは行動フレーム＋１ 　　　　もし、行動フレーム＝移動失敗判定フレームならば、 　　　　　　NXはPX+DX 　　　　　　NYはPY+DY 　　　　　　NZはPZ+DZ 　　　　　　もし、NX<0または、NY<0または、NZ<0ならば 　　　　　　　　追加メッセージ = 「不正な座標」 　　　　　　　　行動状態は「停止中」 　　　　　　違えば 　　　　　　　　NO＝INT(迷路[NZ][NY][NX]) 　　　　　　　　もし、NO=1ならば 　　　　　　　　　　追加メッセージ = 「そこは壁！」 　　　　　　　　　　行動状態は「停止中」 　　　　　　　　ここまで 　　　　　　ここまで 　　　　違えばもし、行動フレーム≧移動フレーム数ならば 　　　　　　PXはPX+DX 　　　　　　PYはPY+DY 　　　　　　PZはPZ+DZ 　　　　　　行動状態は「停止中」 　　　　ここまで 　　ここまで 　　CXはPX*MW+MW/2 　　CYはPY*MW+MW/2 　　CZはPZ*MW+MW/2 　　もし、行動状態が「移動中」ならば、 　　　　# アニメーション処理による差分適用 　　　　CXはCX+DX*MW*(行動フレーム/移動フレーム数) 　　　　CYはCY+DY*MW*(行動フレーム/移動フレーム数) 　　　　CZはCZ+DZ*MW*(行動フレーム/移動フレーム数) 　　ここまで 　　もし、行動状態が「回転中」ならば、 　　　　# アニメーション処理と回転終了の判定 　　　　行動フレームは行動フレーム＋１ 　　　　もし、行動フレーム≧回転フレーム数ならば 　　　　　　もし、行動オプション = 「上」または行動オプション = 「下」ならば、 　　　　　　　　NH = PDの2文字目 　　　　　　　　ND = PHの2文字目 　　　　　　　　もし、行動オプション = 「上」ならば、 　　　　　　　　　　ND = 「{PHの1文字目}{ND}」 　　　　　　　　　　NH = 「{PDの1文字目の符号反転}{NH}」 　　　　　　　　違えば、 　　　　　　　　　　ND = 「{PHの1文字目の符号反転}{ND}」 　　　　　　　　　　NH = 「{PDの1文字目}{NH}」 　　　　　　　　ここまで 　　　　　　　　PD = ND 　　　　　　　　PH = NH 　　　　　　違えば、 　　　　　　　　四方 = 空配列 　　　　　　　　向き = 0 　　　　　　　　(PHの2文字目)で条件分岐 　　　　　　　　　　「X」ならば、 　　　　　　　　　　　　四方 = ["-Z","-Y","+Z","+Y"] 　　　　　　　　　　ここまで 　　　　　　　　　　「Y」ならば、 　　　　　　　　　　　　四方 = ["-Z","+X","+Z","-X"] 　　　　　　　　　　ここまで 　　　　　　　　　　「Z」ならば、 　　　　　　　　　　　　四方 = ["-Y","-X","+Y","+X"] 　　　　　　　　　　ここまで 　　　　　　　　ここまで 　　　　　　　　(PHの1文字目)で条件分岐 　　　　　　　　　　「+」ならば、 　　　　　　　　　　　　向き = 1 　　　　　　　　　　ここまで 　　　　　　　　　　「-」ならば、 　　　　　　　　　　　　向き = -1 　　　　　　　　　　ここまで 　　　　　　　　ここまで 　　　　　　　　行動オプションで条件分岐 　　　　　　　　　　「右」ならば、 　　　　　　　　　　　　向き = 向き * 1 　　　　　　　　　　ここまで 　　　　　　　　　　「左」ならば、 　　　　　　　　　　　　向き = 向き * -1 　　　　　　　　　　ここまで 　　　　　　　　　　「前」ならば、 　　　　　　　　　　　　向き = 向き * 0 　　　　　　　　　　ここまで 　　　　　　　　　　「後」ならば、 　　　　　　　　　　　　向き = 向き * 2 　　　　　　　　　　ここまで 　　　　　　　　ここまで 　　　　　　　　I = 四方からPDを配列検索 　　　　　　　　もし、I≧0ならば、 　　　　　　　　　　I = (I + 向き + 4) % 4 　　　　　　　　　　PD = 四方[I] 　　　　　　　　ここまで 　　　　　　ここまで 　　　　　　行動状態は「停止中」 　　　　ここまで 　　ここまで 　　EX = CX + 方向V[PD][0] 　　EY = CY + 方向V[PD][1] 　　EZ = CZ + 方向V[PD][2] 　　カメラをPHにTJSカメラ上方設定 　　カメラを[CX, CY, CZ]にTJS位置設定 　　カメラを[EX, EY, EZ]にTJS視点設定 　　もし、行動状態が「回転中」ならば、 　　　　# アニメーション処理による差分適用 　　　　angle = DRA*(行動フレーム/回転フレーム数) 　　　　Q = DRVにangleで四元数作成 　　　　カメラ["quaternion"]にQを四元数乗算 　　ここまで 　　カメラの"translateZ"を[MW*0.4]でJSメソッド実行 　　カメラのTJS投影マトリクス更新 　　もし、ランタン≠NULLならば、 　　　　ランタンをカメラ["position"]にTJS位置設定 　　ここまで。 　　T3D実行 　　レンダラをTJSクリア 　　ココをカメラでレンダラにTJS描画 　　# T3D上書描画 　　WEBGLキャンバスを[0,0]へ画像描画 　　情報パネル表示 　　もし、行動状態が「停止中」ならば、 　　　　NO＝INT(迷路[PZ][PY][PX]) 　　　　もし、NO=2ならば 　　　　　　状態 = 「次ステージ」 　　　　ここまで 　　ここまで ここまで ●情報パネル表示とは 　「14px sans-serif」に描画フォント設定 　描画中コンテキスト["textAlign"]は"center" 　描画中コンテキスト["textBaseline"]は"middle" 　H = 16 　Y = 0 　X = 0 　# 地色描画 　"#000000"に線色設定 　"#ccccccFF"に塗り色設定 　[0,0,描画中キャンバス["width"],H*2]に四角描画 　# HELP表示 　もし、迷路上下有ならば、 　　文言 = HELP3 　違えば、 　　文言 = HELP2 　ここまで 　W = 300 　"#88ff88FF"に塗り色設定 　[X,0,W,H]に四角描画 　"#000000"に塗り色設定 　[X+W/2,Y+H/2]に文言を文字描画 　X=X+W 　もし、迷路上下有ならば、 　　文言 = 「ゴール:({(迷路[0][0]の配列要素数)-2},{(迷路[0]の配列要素数)-2},{(迷路の配列要素数)-2})」 　違えば、 　　文言 = 「ゴール:({(迷路[0][0]の配列要素数)-2},{(迷路の配列要素数)-2})」 　ここまで 　W = 描画中キャンバス["width"]-X-60 　"#88ff88FF"に塗り色設定 　[X,0,W,H]に四角描画 　"#000000"に塗り色設定 　[X+W/2,Y+H/2]に文言を文字描画 　X=X+W 　文言 = 行動状態 　W = 60 　"#88ff88FF"に塗り色設定 　[X,0,W,H]に四角描画 　"#000000"に塗り色設定 　[X+W/2,Y+H/2]に文言を文字描画 　X=X+W 　X = 0 　Y = H 　もし、迷路上下有ならば、 　　文言 = 「位置:({PX},{PY},{PZ})」 　違えば、 　　文言 = 「位置:({PX},{PZ})」 　ここまで 　W = 140 　"#88ff88FF"に塗り色設定 　[X,H,W,H]に四角描画 　"#000000"に塗り色設定 　[X+W/2,Y+H/2]に文言を文字描画 　X=X+W 　もし、迷路上下有ならば、 　　文言 = 「正面:{方向名[PD]},頭上:{方向名[PH]}」 　違えば、 　　文言 = 「正面:{方向名[PD]}」 　ここまで 　W = 120 　"#88ff88FF"に塗り色設定 　[X,H,W,H]に四角描画 　"#000000"に塗り色設定 　[X+W/2,Y+H/2]に文言を文字描画 　X=X+W 　文言 = 追加メッセージ 　W = 描画中キャンバス["width"]-X 　"#88ff88FF"に塗り色設定 　[X,H,X*W,H]に四角描画 　"#000000"に塗り色設定 　描画中コンテキスト["textAlign"]は"left" 　[X+2,Y+H/2]に文言を文字描画 　X=X+W ここまで ●描画環境準備とは 　　レンダラはWEBGLキャンバスにT3D描画準備 　　T3Dカメデフォルトサイズ = 1/30/10 　　# シーン作成 　　# ココは、TJSシーン作成 　　ココは、T3D内部シーン取得 　　ココに0x004400をTJS背景設定 　　# カメラ作成 　　カメラは、[60,WEBGLキャンバス["width"]/WEBGLキャンバス["height"],0.001,200]のTJS透視投影カメラ作成 　　ココにカメラをTJS登場 　　カメラのTJS投影マトリクス更新 　　# 光源作成 　　もし、環境光使用ならば、 　　　　ヒカリゴケは0xffffffのTJS環境光源作成 　　　　ココにヒカリゴケをTJS登場 　　違えば、 　　　　ランタンは[0xffffff, 1, 10, 1]のTJS点光源作成 　　　　ランタンをカメラ["position"]にTJS位置設定 　　　　ココにランタンをTJS登場 　　ここまで 　　＃マップ表示用の素材を準備 　　壁面で条件分岐 　　　　「レンガ」ならば、 　　　　　　CV = レンガ壁画像作成 　　　　　　CVTEX = {canvas:CV}をTJSキャンバステクスチャ作成 　　　　　　壁材質 = {map:CVTEX}のTJS拡散反射材質作成 　　　　　　CVを壁キャンバスに配列追加 　　　　　　CVTEXを壁テクスチャに配列追加 　　　　ここまで 　　　　「枠付き」ならば、 　　　　　　壁材質 = 空配列 　　　　　　６回繰り返す 　　　　　　　　C = 回数-1 　　　　　　　　N = (C + 1) % 6 　　　　　　　　壁キャンバス[C] = 枠付単色壁画像作成 　　　　　　　　壁テクスチャ[C] = {canvas:壁キャンバス[C]}をTJSキャンバステクスチャ作成 　　　　　　　　壁材質[C] = {map:壁テクスチャ[C]}のTJS拡散反射材質作成 　　　　　　ここまで 　　　　ここまで 　　　　違えば、 　　　　　　壁材質 = 空配列 　　　　　　６回繰り返す 　　　　　　　　C = 回数-1 　　　　　　　　壁材質[C] = {color: COLORS[C+1]}のTJS拡散反射材質作成 　　　　　　ここまで 　　　　ここまで 　　ここまで 　　壁構造は{W:BLOCKSIZE,H:BLOCKSIZE,D:BLOCKSIZE,buffer:1=1}のTJS箱作成 　　ゴール球構造は{R:BLOCKSIZE*0.3,buffer:1=1}のTJS球体作成 　　ゴール球材質は{color: COLORS[0]}のTJS拡散反射材質作成 　　# レンダラはWEBGLキャンバスにTJS描画準備 　　# レンダラに[WEBGLキャンバス["width"],WEBGLキャンバス["height"]]をTJSサイズ設定 　　レンダラに0x000000をTJSクリア色設定 　　レンダラに1をTJSクリア透過設定 　　もし、確認モードならば、 　　　　コントローラはカメラに描画中キャンバスのTJS衛星軌道コントローラ作成 　　ここまで ここまで ●(ココに迷路を)迷路構造構築とは 　　# ゴール球は空配列 　　# ブロックリストは空配列 　　ゴール数 = 0 　　ブロック数 = 0 　　＃マップ全体の３Dデータを構築 　　(迷路の配列要素数)回 　　　　OZは回数-1 　　　　(迷路[OZ]の配列要素数)回 　　　　　　OYは回数-1 　　　　　　(迷路[OZ][OY]の配列要素数)回 　　　　　　　　OXは回数-1 　　　　　　　　NO = INT(迷路[OZ][OY][OX]) 　　　　　　　　もし、NO≠0ならば、 　　　　　　　　　　X = OX * BLOCKSIZE 　　　　　　　　　　Y = OY * BLOCKSIZE 　　　　　　　　　　Z = OZ * BLOCKSIZE 　　　　　　　　　　もし、NOが1ならば、 　　　　　　　　　　　　もし、ブロック数＜(ブロックリストの配列要素数)ならば、 　　　　　　　　　　　　　　物体 = ブロックリスト[ブロック数] 　　　　　　　　　　　　違えば、 　　　　　　　　　　　　　　物体は壁構造と壁材質のTJSメッシュ作成 　　　　　　　　　　　　　　ブロックリストに物体を配列追加 　　　　　　　　　　　　ここまで 　　　　　　　　　　　　ブロック数 = ブロック数 + 1 　　　　　　　　　　違えばもし、NOが2ならば、 　　　　　　　　　　　　もし、ゴール数＜(ゴール球の配列要素数)ならば、 　　　　　　　　　　　　　　物体 = ゴール球[ゴール数] 　　　　　　　　　　　　違えば、 　　　　　　　　　　　　　　物体 = ゴール球構造とゴール球材質のTJSメッシュ作成 　　　　　　　　　　　　　　ゴール球に物体を配列追加 　　　　　　　　　　　　ここまで 　　　　　　　　　　　　ゴール数 = ゴール数 + 1 　　　　　　　　　　ここまで 　　　　　　　　　　物体を[X+BLOCKSIZE/2,Y+BLOCKSIZE/2,Z+BLOCKSIZE/2]にTJS位置設定 　　　　　　　　　　物体をTJS表示 　　　　　　　　　　物体をココにTJS登場 　　　　　　　　ここまで 　　　　　　ここまで 　　　　ここまで 　　ここまで。 　　もし、ブロック数＜(ブロックリストの配列要素数)ならば、 　　　　ブロック数から(ブロックリストの配列要素数)-1まで繰り返す 　　　　　　ブロックリスト[ブロック数]をTJS非表示 　　　　　　ブロック数 = ブロック数 + 1 　　　　ここまで 　　ここまで 　　もし、ゴール数＜(ゴール球の配列要素数)ならば、 　　　　ゴール数から(ゴール球の配列要素数)-1まで繰り返す 　　　　　　ゴール球[ゴール数]をTJS非表示 　　　　　　ゴール数 = ゴール数 + 1 　　　　ここまで 　　ここまで ここまで ●全ブロッククリアとは 　　ブロックリストを反復する 　　　　ブロックはそれ 　　　　ココからブロックをTJS退場 　　ここまで 　　ココからゴール球[0]をTJS退場 　　ブロックリストは空配列 　　ゴール球は空配列 ここまで ●枠付単色壁画像作成とは 　元キャンバスは描画中キャンバス 　テンポは"canvas"のDOM要素作成する。 　テンポ["width"]はテクスチャサイズ 　テンポ["height"]はテクスチャサイズ 　テンポの描画開始する。 　[0, 0, テンポ["width"], テンポ["height"]]に描画クリアする。 　8に線太さ設定 　紫色に線色設定 　赤色に塗り色設定 　[0,0]に一枚壁 　元キャンバスの描画開始する。 　テンポで戻る ここまで ●レンガ壁画像作成とは 　元キャンバスは描画中キャンバス 　テンポは"canvas"のDOM要素作成する。 　テンポ["width"]はテクスチャサイズ 　テンポ["height"]はテクスチャサイズ 　テンポの描画開始する。 　[0, 0, テンポ["width"], テンポ["height"]]に描画クリアする。 　倍率は6 　1に線太さ設定 　空に線色設定 　白色に塗り色設定 　[0,0]に一枚壁 　赤色に塗り色設定 　[0,0]に倍率でレンガ群 　元キャンバスの描画開始する。 　テンポで戻る ここまで ●(XYに)一枚壁とは 　[XY[0]-0.5, XY[1]-0.5, テクスチャサイズ+1, テクスチャサイズ+1]へ四角描画 ここまで ●(XYに倍率で)レンガ群とは 　BASEXはXY[0] 　BASEYはXY[1] 　Iで0からINT(テクスチャサイズ/4/倍率)まで繰り返す 　　Jで0からINT(テクスチャサイズ/2/倍率)まで繰り返す 　　　XはBASEX+I*4*倍率-(1-AND(J,1))*2*倍率 　　　YはBASEY+J*2*倍率 　　　[X, Y]に倍率でレンガ 　　ここまで 　ここまで ここまで ●(XYに倍率で)レンガとは 　XはXY[0] 　YはXY[1] 　[MAX(X+0,0)-0.5,MAX(Y+0,0)-0.5,MIN(3*倍率,テクスチャサイズ)+1,MIN(1*倍率,テクスチャサイズ)+1]へ四角描画 ここまで # 迷路作成機能 ●(サイズの)ダミー迷路作成とは 　　迷路は[ 　　　[ 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　], 　　　[ 　　　　[1,1,1,1,1], 　　　　[1,0,0,0,1], 　　　　[1,0,1,0,1], 　　　　[1,0,1,0,1], 　　　　[1,1,1,1,1], 　　　], 　　　[ 　　　　[1,1,1,1,1], 　　　　[1,1,1,0,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　], 　　　[ 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　　[1,1,1,1,1], 　　　] 　　] 　　迷路で戻る ここまで ●(サイズの)迷路作成とは 　　X0=0 　　Y0=0 　　Z0=0 　　XN=サイズ[0]*2+1-1 　　YN=サイズ[1]*2+1-1 　　ZN=サイズ[2]*2+1-1 　　方位は[ 　　　[-1, 0, 0], 　　　[ 1, 0, 0], 　　　[ 0,-1, 0], 　　　[ 0, 1, 0], 　　　[ 0, 0,-1], 　　　[ 0, 0, 1] 　　] 　　# 迷路データをすべて未処理(2)で初期化 --- (*1) 　　迷路は[] 　　ZをZ0からZNまで繰り返す 　　　　迷路[Z] = [] 　　　　YをY0からYNまで繰り返す 　　　　　　迷路[Z][Y] = [] 　　　　　　XをX0からXNまで繰り返す 　　　　　　　　迷路[Z][Y][X] = 2 　　　　　　ここまで 　　　　ここまで 　　ここまで 　　# 外周を壁(1)にする --- (*2) 　　ZをZ0からZNまで繰り返す 　　　　YをY0からYNまで繰り返す 　　　　　　迷路[Z][Y][X0]=1 　　　　　　迷路[Z][Y][XN]=1 　　　　ここまで 　　ここまで 　　ZをZ0からZNまで繰り返す 　　　　XをX0からXNまで繰り返す 　　　　　　迷路[Z][Y0][X]=1 　　　　　　迷路[Z][YN][X]=1 　　　　ここまで 　　ここまで 　　YをY0からYNまで繰り返す 　　　　XをX0からXNまで繰り返す 　　　　　　迷路[Z0][Y][X]=1 　　　　　　迷路[ZN][Y][X]=1 　　　　ここまで 　　ここまで 　　# 開始地点を設定する 　　X=1 　　Y=1 　　Z=1 　　# 開始点を道にしてお穴掘り法で探索する起点にする 　　分岐は空配列 　　[X,Y,Z]を分岐に配列追加 　　迷路[Z][Y][X] = 0 　　# 方向候補の配列。シャッフルして使う。 　　NDS=[0,1,2,3,4,5] 　　# 起点から通路を伸ばす 　　((分岐の配列要素数)＞０)の間、 　　　　XYZ=分岐から配列ポップ 　　　　X=XYZ[0] 　　　　Y=XYZ[1] 　　　　Z=XYZ[2] 　　　　行き止まり＝オフ 　　　　(行き止まり＝オフ)の間、 　　　　　　行き止まり＝オン 　　　　　　NDSを配列シャッフル 　　　　　　NDSを反復する 　　　　　　　　Dはそれ 　　　　　　　　DX=方位[D][0] 　　　　　　　　DY=方位[D][1] 　　　　　　　　DZ=方位[D][2] 　　　　　　　　もし、迷路[Z+DZ][Y+DY][X+DX]＝2ならば、 　　　　　　　　　　もし、迷路[Z+DZ*2][Y+DY*2][X+DX*2]＝2ならば、 　　　　　　　　　　　　行き止まり＝オフ 　　　　　　　　　　　　抜ける 　　　　　　　　　　ここまで 　　　　　　　　ここまで 　　　　　　ここまで 　　　　　　もし、行止でなければ、 　　　　　　　　X=X+DX 　　　　　　　　Y=Y+DY 　　　　　　　　Z=Z+DZ 　　　　　　　　迷路[Z][Y][X] = 0 　　　　　　　　X=X+DX 　　　　　　　　Y=Y+DY 　　　　　　　　Z=Z+DZ 　　　　　　　　迷路[Z][Y][X] = 0 　　　　　　　　[X,Y,Z]を分岐に配列追加 　　　　　　ここまで 　　　　ここまで 　　ここまで 　　# 未処理(2)のまま残ったところを壁(1)にする 　　ZをZ0からZNまで繰り返す 　　　　YをY0からYNまで繰り返す 　　　　　　XをX0からXNまで繰り返す 　　　　　　　　もし、迷路[Z][Y][X]＝2ならば迷路[Z][Y][X]＝1 　　　　　　ここまで 　　　　ここまで 　　ここまで。 　　それは迷路 ここまで。 ##### ダイアログ利用補助機能 ●ダイアログ使用可能とは 　DLGは"dialog"のDOM要素作成 　(『(function (DLG) {return typeof DLG.open})』を[DLG]でJS関数実行)≠"undefined"で戻る。 ここまで ●(SRCで)ダイアログ作成とは 　eは"dialog"のDOM要素作成 　eにSRCをDOM_HTML設定 　eで戻る ここまで ●(DLGの)ダイアログ開くとは 　もし、(『(function (DLG) {return typeof DLG.open})』を[DLG]でJS関数実行)＝"undefined"ならば、 　　「ダイアログ機能は使えません」を表示する。 　　戻る。 　ここまで 　DLGの"open"を[]でJSメソッド実行する。 ここまで ●(DLGの)ダイアログモーダル開くとは 　もし、(『(function (DLG) {return typeof DLG.showModal})』を[DLG]でJS関数実行)＝"undefined"ならば、 　　「ダイアログ機能は使えません」を表示する。 　　戻る。 　ここまで 　DLGの"showModal"を[]でJSメソッド実行する。 ここまで ##### 汎用処理 ●MAX(A,B)とは 　もし、A＜Bならば、 　　Bで戻る 　ここまで 　Aで戻る ここまで ●MIN(A,B)とは 　もし、A＜Bならば、 　　Aで戻る 　ここまで 　Bで戻る ここまで ●(SのN)文字目とは 　SのNから１文字抜き出して戻る ここまで ●(Sを|Sの)符号反転とは 　Sの1文字目で条件分岐 　　「+」ならば、 　　　「-」で戻る 　　ここまで 　　「-」ならば、 　　　「+」で戻る 　　ここまで 　　違えば、 　　　Sで戻る 　　ここまで 　ここまで ここまで ●(Q1にQ2を)四元数乗算とは 　　Q1の"multiply"を[Q2]でJSメソッド実行 ここまで ●(axisにangleで)四元数作成とは 　　『(function (THREE,angle,axis){ const quaternion = new THREE.Quaternion(); quaternion.setFromAxisAngle(new THREE.Vector3(axis[0], axis[1], axis[2]), (angle % 360 ) * Math.PI / 180); return quaternion; })』を[THREE,angle,axis]でJS関数実行で戻る ここまで