▶ 実 行
▶ 実行
クリア
迷路ゲーム改立体(ThreeJS版3Dダンジョン) - 迷路自動生成付
by てぃふと@うぇいく
# 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関数実行で戻る ここまで