Three.jsで迷路を作成して3D表示し、マウスボタン長押し(ロングタップ)でカメラを前進、後退、左右回転して迷路内をウォークスルーする(Three.js[r145]を使用)
以下のCanvas上部をマウス左ボタン長押し(ロングタップ)でカメラが前進、左側長押しで左回転、右側長押しで右回転、下部長押しで後退します。
棒倒し法アルゴリズムで迷路を作成してキャンバスに2D、および3D表示しています。
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; } } } } }