2024-09-25
#js #vr 
JavaScriptで作った迷路 Maze.js を使って、懐かしのAR巨大迷路を作りました。

セミナールームで迷路にチャレンジした時の様子。


「AR Maze」
src on GitHub or ss.sabae.cc
5x5の手頃な大きさの巨大迷路を楽しめます。PCではカーソルキーの上下左右で歩けます。
ハッシュでサイズ変更に対応。10x1020x20など、お好きなの巨大迷路をどうぞ!

迷路を3D化するコードはこちら。 const createMaze = () => { const maze = new Maze(mazew, mazeh); const grp = new THREE.Group(); const wall = (x, y, rot) => { const w = createWall(); if (rot) w.rotation.y = Math.PI / 2; w.position.x = x; w.position.z = y; grp.add(w); }; const w2 = wallw / 2; for (const i of maze.grid) { const x = i.x * wallw; const y = i.y * wallw; if (i.walls.top) wall(x, y - w2, false); if (i.walls.bottom) wall(x, y + w2, false); if (i.walls.left) wall(x - w2, y, true); if (i.walls.right) wall(x + w2, y, true); } return grp; }; Maze.js で生成し、4面の壁の有無に合わせて3Dの壁を生成して返しています。

links
- 2012-10-08 迷路作成
- 2018-08-15 426byteの迷路ゲーム、ローカル対戦&IchigoSodaでネット対戦への改造法
- 2019-12-09 遊んで学ぶアルゴリズム 迷路棒倒し法をIchigoJamでつくろう - クリスマスイベント by コプリ / PCN大阪
- 2024-09-24 JavaScriptで迷路づくり

Tweet
クリエイティブ・コモンズ・ライセンス
本ブログの記事や写真は「Creative Commons — CC BY 4.0」の下に提供します。記事内で紹介するプログラムや作品は、それぞれに記載されたライセンスを参照ください。
CC BY / @taisukef / アイコン画像 / プロフィール画像 / 「一日一創」画像 / RSS