[ 📌文法] [ 🎨命令一覧]

[編集モード] 迷路ゲーム改立体(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関数実行で戻る
ここまで

デバッグキャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 迷路ゲーム改立体(ThreeJS版3Dダンジョン) - 迷路自動生成付

素材のアップロード