迷路を作成して３Ｄ表示しマウスやタップで操作して迷路内をウォークスルー(Three.js[r145])
ブラウザで3D迷路を探索しよう！
Three.jsを使ってリアルな3D迷路を生成しウォークスルー体験ができるインタラクティブなコンテンツです。
棒倒し法アルゴリズムで迷路を作成し、2Dマップと3D表示を組み合わせて視覚的に楽しめます。
緑の丸がスタート地点、青い丸がゴール。あなたは赤いアイコンとして表示され、迷路を抜け出すことが目標です！
以下のCanvas上部をマウス左ボタン長押し（ロングタップ）でカメラが前進、左側長押しで左回転、右側長押しで右回転、下部長押しで後退します。
function createMaze(){
//棒倒し法アルゴリズムで迷路を作成
for(let x=0;x<=mazel;x++){
maze[x]=[];
for(let y=0;y<=mazel;y++){
maze[x][y]=0;
}
}
for(let x=0;x<=mazel;x++){
maze[x][0]=1;
maze[x][mazel]=1;
}
for(let y=0;y<=mazel;y++){
maze[0][y]=1;
maze[maze.length-1][y]=1;
}
for(let x=2;x<(mazel-1);x+=2){
for(let y=2;y<(mazel-1);y+=2){
maze[x][y]=1;
while(true){
let rr=0;//0:↑ 1:→ 2:↓ 3:←
let xx=x,yy=y;
if(y==2){
rr=parseInt(Math.random()*4);
}else{
rr=parseInt(Math.random()*3)+1;
}
if(rr==0){yy--;}
if(rr==1){xx++;}
if(rr==2){yy++;}
if(rr==3){xx--;}
if(maze[xx][yy]==0){
maze[xx][yy]=1;
break;
}
}
}
}
}