lkarch.org/tools/mathisfun/www.mathsisfun.com/measure/images/maze.js

function mazeMain(wd,ht){this.version='0.27';w=typeof wd!=='undefined'?wd:'740';h=typeof ht!=='undefined'?ht:'440';w=Math.min(w,window.innerWidth-30);h=w*0.65;compassQ=false;loadGames();var s="";s+='<div id="main" style="position:relative; width:'+w+'px; min-height:'+h+'px; border: none;  background-color: white; margin:auto; display:block;">';s+='<div id="bg" style="position:absolute; left:0; top:0; width:'+w+'px; height:'+h+'px; z-index-1;"></div>';if(compassQ){s+='<img src="images/compass-rose1.svg" style="position:absolute; left:0; top:0; width:135px; height:138px;   z-index-1;">';}
s+='<canvas id="canvasId" style="position: absolute; width:'+w+'px; height:'+h+'px; left: 0; top:0; border: none;"></canvas>';s+='<div id="player" style="font: 14px Arial; position:absolute; left:0; top:0; width:20px; height:20px; background-color: gold; box-shadow: 0px 0px 0px 3px blue; border-radius: 50%;   z-index-1;"></div>';s+='<canvas id="canvas2" style="position: absolute; width:'+w+'px; height:'+h+'px; left: 0; top:0; border: none;"></canvas>';s+=optPopHTML();s+='<div id="score" style="font: 14px Arial; color: #6600cc; position:absolute; left:0; top:3px; width:'+(w-10)+'px; text-align: right;">0</div>';s+='<div id="win" style="position:absolute; left:-500px; top:60px; width:380px; padding: 5px; border-radius: 9px; color: white; background-color: rgba(70,100,255,0.7); box-shadow: 5px 5px 3px 0px rgba(0,0,0,0.3); transition: all linear 0.3s; opacity:0; text-align: center; font: 24px Arial; ">';s+='<div id="winTxt">Maze Completed</div>';s+='<button onclick="winClose()" style="float:right; font: 22px Arial;" class="togglebtn" >&#x2714;</button>';s+='</div>';s+='<button id="restart" style="position: absolute; bottom:3px; left:3px; font: 14px Arial; height:30px; vertical-align:middle; z-index: 10;" class="togglebtn" onclick="optpop()" >New</button>';s+='<button id="print" style="position: absolute; bottom:3px; left:63px; font: 14px Arial; height:30px; vertical-align:middle; z-index: 10;" class="togglebtn" onclick="printCanvas()" >Print</button>';s+='<div id="copyrt" style="font: 10px arial; color: blue; position:absolute; right:5px; bottom:3px;">&copy; 2018 MathsIsFun.com  v'+this.version+'</div>';s+='</div>';document.write(s);el=document.getElementById('canvasId');ratio=2;el.width=w*ratio;el.height=h*ratio;el.style.width=w+"px";el.style.height=h+"px";g=el.getContext("2d");g.setTransform(ratio,0,0,ratio,0,0);el2=document.getElementById('canvas2');ratio=2;el2.width=w*ratio;el2.height=h*ratio;el2.style.width=w+"px";el2.style.height=h+"px";g2=el2.getContext("2d");g2.setTransform(ratio,0,0,ratio,0,0);gameNo=2;game=games[gameNo];calcCellWd();numberOfCells=0;playerMoves=0;maxMoves=0;playerX=0;playerY=0;playerWd=0;maze=[];moves=[];mazeSttX=0;mazeSttY=0;timeVar="";arrowDir="";compassDir="";currentPos=0;drawPlayer();this.clrs=[["Blue",'#0000FF'],["Red",'#FF0000'],["Black",'#000000'],["Green",'#00cc00'],["Violet",'#EE82EE'],["Orange",'#FFA500'],["Light Salmon",'#FFA07A'],["Slate Blue",'#6A5ACD'],["Yellow",'#FFFF00'],["Aquamarine",'#7FFFD4'],["Pink",'#FFC0CB'],["Coral",'#FF7F50'],["Lime",'#00FF00'],["Pale Green",'#98FB98'],["Spring Green",'#00FF7F'],["Teal",'#008080'],["Hot Pink",'#FF69B4'],["Yellow",'#ffff00'],["Aqua",'#00ffff'],["Gold",'#ffd700'],["Khaki",'#F0E68C'],["Thistle",'#D8BFD8'],["Med Purple",'#aa00aa'],["Light Blue",'#ADD8E6'],["Sky Blue",'#87CEEB'],["Navy",'#000080'],["Purple",'#800080'],["Wheat",'#F5DEB3'],["Tan",'#D2B48C'],["Silver",'#C0C0C0']];window.addEventListener("keydown",key,false);el2.addEventListener('touchstart',ontouchstart,false);el2.addEventListener('touchmove',ontouchmove,false);window.addEventListener('touchend',ontouchend,false);el2.addEventListener("mousedown",onMouseDown,false);el2.addEventListener("mousemove",onMouseMove,false);window.addEventListener("mouseup",onMouseUp,false);frames=0;optpop();}
function calcCellWd(){var fitWd=w/(game[gameWidthAt]+1);var fitHt=(h-50)/(game[gameHeightAt]+1);cellWd=Math.min(fitWd,fitHt);}
function win(){var div=document.getElementById('win');div.style.opacity=1;div.style.left=(w-380)/2+'px';var elaps=((performance.now()-timeStt)/1000)<<0;var s='Maze Completed';s+='<br>in '+elaps+' seconds';s+='<br>and '+playerMoves+' steps';document.getElementById('winTxt').innerHTML=s;}
function winClose(){div=document.getElementById('win');div.style.opacity=0;div.style.left='-999px';}
function ontouchstart(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onMouseDown(evt)}
function ontouchmove(evt){var touch=evt.targetTouches[0];evt.clientX=touch.clientX;evt.clientY=touch.clientY;evt.touchQ=true;onMouseMove(evt)}
function ontouchend(){draggingQ=false;}
function onMouseDown(evt){var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);draggingQ=true;frames=0;moveRpt();if(evt.preventDefault){evt.preventDefault();}
return false;}
function onMouseMove(evt){var bRect=el.getBoundingClientRect();mouseX=(evt.clientX-bRect.left)*(el.width/ratio/bRect.width);mouseY=(evt.clientY-bRect.top)*(el.height/ratio/bRect.height);if(evt.preventDefault){evt.preventDefault();}
return false;}
function onMouseUp(){draggingQ=false;}
function moveRpt(){frames=(++frames)%10;if(frames==1){if(compassQ){var px=67;var py=68;}else{px=mazeSttX+playerX*cellWd+cellWd/2;py=mazeSttY+playerY*cellWd+cellWd/2;}
dirn='';var d=dist(px-mouseX,py-mouseY);var cellSize=cellWd;if(d>cellSize*0.6){var angle=Math.atan2(-(mouseY-py),mouseX-px)*180/Math.PI;if(angle<0)angle+=360;if(angle>30&&angle<=150){tryMove("u");}
if(angle>120&&angle<=240){tryMove("l");}
if(angle>210&&angle<=330){tryMove("d");}
if(angle>300||angle<=60){tryMove("r");}
moveDist=1;}
console.log("moveRpt",mouseX,mouseY,px,py,d,dirn);}
if(draggingQ)
requestAnimationFrame(moveRpt);}
function tryMove(dirn){if(dirn=="r"&&getCurrentWall(4)==0)movePlayer(1,0);if(dirn=="l"&&getCurrentWall(3)==0)movePlayer(-1,0);if(dirn=="d"&&getCurrentWall(2)==0)movePlayer(0,1);if(dirn=="u"&&getCurrentWall(1)==0)movePlayer(0,-1);}
function loadGames(){games=[["Tiny",["Mini",""],5,3,60,[true,true,false,false,false],0,"wide"],["Small",["Easy",""],12,6,40,[true,true,false,false,false],0,"wide"],["Medium",["Medium",""],20,10,24,[true,true,false,false,false],0,"wide"],["Wide",["Wide",""],35,7,16,[true,true,true,false,false],0,"wide"],["Large",["Hard",""],35,20,16,[true,true,true,false,false],0,"wide"],["Hedges",["Hedges",""],18,14,22,[true,true,false,false,false],0,"dash"],["DotsSmall",["Barrels Easy",""],12,6,40,[true,true,false,false,false],0,"dots"],["DotsMedium",["Barrels Medium",""],16,14,22,[true,true,false,false,false],0,"dots"],["Dots2Small",["DoubleDots",""],12,6,40,[true,true,false,false,false],0,"2dots"],["Boxes",["Boxes",""],20,10,24,[true,true,false,false,false],0,"boxes"],["Road",["Roads Easy",""],15,8,40,[true,true,true,false,false],40,"road"],["RoadLarge",["Roads",""],30,16,20,[true,true,true,false,false],80,"road"],["TinyInvis",["Invisible Mini",""],5,3,60,[true,true,false,false,false],0,"invis"],["SmallInvis",["Invisible",""],12,6,40,[true,true,false,false,false],0,"invis"],["MedInvis",["Invisible Hard",""],20,10,28,[true,true,true,false,false],0,"invis"],["MedJag",["Jagged",""],20,10,28,[true,true,true,false,false],0,"jagged"],["LargeJag",["Jagged Hard",""],35,20,16,[true,true,true,false,false],0,"jagged"],["MedColor",["Colored",""],20,10,28,[true,true,true,false,false],0,"color"],["LargeColor",["Colored Hard",""],35,20,16,[true,true,true,false,false],0,"color"]];gameModeAt=0;gameNamesAt=1;gameWidthAt=2;gameHeightAt=3;gameSizeAt=4;gameGUIAt=5;gameMoreHolesAt=6;gameEdgeStyleAt=7;gameGUIKeysAt=0;gameGUIArrowsAt=1;gameGUIMouseAt=2;gameGUICompassKeysAt=3;gameGUICompassRoseAt=4;}
function optPopHTML(){var s='';s+='<div id="optpop" style="position:absolute; left:-450px; top:10px; width:380px; padding: 5px; border-radius: 9px; background-color: #88aaff; box-shadow: 10px 10px 5px 0px rgba(40,40,40,0.75); transition: all linear 0.3s; opacity:0; text-align: center; ">';for(var i=0;i<games.length;i++){var gm=games[i];s+='<button onclick="optChoose('+i+')" style="z-index:2; font: 16px Arial; height:26px; margin:3px; padding: 2px 10px;" class="togglebtn" >'+gm[1][0]+'</button>';}
s+='<div style="float:right; margin: 0 0 5px 10px;">';s+='<button onclick="optYes()" style="z-index:2; font: 22px Arial;" class="togglebtn" >&#x2714;</button>';s+='</div>';s+='</div>';return s;}
function optpop(){console.log("optpop");var pop=document.getElementById('optpop');pop.style.transitionDuration="0.3s";pop.style.opacity=1;pop.style.zIndex=12;pop.style.left=(w-380)/2+'px';}
function optYes(){var pop=document.getElementById('optpop');pop.style.opacity=0;pop.style.zIndex=1;pop.style.left='-999px';newGame();}
function optChoose(n){console.log("optChoose",n);gameNo=n;game=games[gameNo];optYes();}
function newGame(){g.clearRect(0,0,el.width,el.height);g2.clearRect(0,0,el.width,el.height);winClose();numberOfCells=game[gameWidthAt]*game[gameHeightAt];calcCellWd();generateMaze();drawMaze();playerWd=cellWd/2;var div=document.getElementById('player');div.style.width=playerWd+'px';div.style.height=playerWd+'px';playerX=0;playerY=0;currentPos=0;drawPlayer();timeStt=performance.now();playerMoves=0;document.getElementById('score').innerHTML=playerMoves;}
function key(ev){var keyCode=ev.keyCode;switch(keyCode){case 37:if(getCurrentWall(3)==0)
movePlayer(-1,0);ev.preventDefault();break;case 39:if(getCurrentWall(4)==0)
movePlayer(1,0);ev.preventDefault();break;case 38:if(getCurrentWall(1)==0)
movePlayer(0,-1);ev.preventDefault();break;case 40:if(getCurrentWall(2)==0)
movePlayer(0,1);ev.preventDefault();break;default:}
if(keyCode==9||keyCode==13||keyCode==32){}}
function showScore(){console.log("showScore");var s='';for(var i=0;i<tankMax;i++){if(i>0){s+='<span style="color:black;">';s+=' vs ';s+='</span>';}
var tank=tanks[i];s+='<span style="color:'+tank.clr+';">';s+=tank.kills+' ';s+='</span>';}
var div=document.getElementById('score');div.innerHTML=s;}
function getCurrentWall(wallNo){return(maze[currentPos][wallNo]);}
function generateMaze(){mazeSttX=(w-game[gameWidthAt]*cellWd)/2;mazeSttY=(h-game[gameHeightAt]*cellWd)/2-10;maze=[];moves=[];for(var a=0;a<numberOfCells;a++){maze[a]=[0,1,1,1,1,1];}
var pos=Math.round(Math.random()*(numberOfCells-1));maze[pos][0]=1;var visited=1;while(visited<numberOfCells){var possible="";if((Math.floor(pos/game[gameWidthAt])==Math.floor((pos-1)/game[gameWidthAt]))&&(maze[pos-1][0]==0)){possible+="W";}
if((Math.floor(pos/game[gameWidthAt])==Math.floor((pos+1)/game[gameWidthAt]))&&(maze[pos+1][0]==0)){possible+="E";}
if(((pos+game[gameWidthAt])<numberOfCells)&&(maze[pos+game[gameWidthAt]][0]==0)){possible+="S";}
if(((pos-game[gameWidthAt])>=0)&&(maze[pos-game[gameWidthAt]][0]==0)){possible+="N";}
if(possible){visited++;moves.push(pos);way=possible.charAt(Math.round(Math.random()*(possible.length-1)));switch(way){case "N":maze[pos][1]=0;maze[pos-game[gameWidthAt]][2]=0;pos-=game[gameWidthAt];break;case "S":maze[pos][2]=0;maze[pos+game[gameWidthAt]][1]=0;pos+=game[gameWidthAt];break;case "E":maze[pos][4]=0;maze[pos+1][3]=0;pos++;break;case "W":maze[pos][3]=0;maze[pos-1][4]=0;pos--;break;}
maze[pos][0]=1;}else{pos=moves.pop();}}
var moreHoles=0;while(moreHoles<game[gameMoreHolesAt]){pos=Math.round(Math.random()*(numberOfCells-1));var wall=getRandomInt(0,3)+1;console.log("moreHoles",numberOfCells,moreHoles,pos,wall);if(maze[pos][wall+1]==1){switch(wall){case 1:maze[pos][1]=0;if(pos-game[gameWidthAt]>=0)
maze[pos-game[gameWidthAt]][2]=0;break;case 2:maze[pos][2]=0;if(pos+game[gameWidthAt]<numberOfCells)
maze[pos+game[gameWidthAt]][1]=0;break;case 3:maze[pos][3]=0;if(pos-1>=0)
maze[pos-1][4]=0;break;case 4:maze[pos][4]=0;if(pos+1<numberOfCells)
maze[pos+1][3]=0;break;}
moreHoles++;}}
console.log("generateMaze",numberOfCells,pos,maze);}
function drawMaze(){var mazeEndX=mazeSttX+game[gameWidthAt]*cellWd;var mazeEndY=mazeSttY+game[gameHeightAt]*cellWd;console.log("drawMaze",mazeSttX,mazeSttY,mazeEndX,mazeEndY);var size=cellWd*0.7;switch(game[gameEdgeStyleAt]){case "boxes":size=cellWd/3;break;default:}
g.fillStyle='yellow';g.beginPath();g.arc(mazeSttX+cellWd/2,mazeSttY+cellWd/2,size,0,2*Math.PI);g.fill();g.fillStyle='blue';g.beginPath();g.arc(mazeEndX-cellWd/2,mazeEndY-cellWd/2,size,0,2*Math.PI);g.fill();var startX=0;var startY=mazeSttY-cellWd;console.log("drawMaze",startX,startY);for(var a=0;a<numberOfCells;a++){startX+=cellWd;if(a%game[gameWidthAt]==0){startY+=cellWd;startX=mazeSttX;}
if(maze[a][2]==1&&a!=numberOfCells-1){drawEdge(startX,startY+cellWd,startX+cellWd,startY+cellWd);}
if(maze[a][4]==1){drawEdge(startX+cellWd,startY,startX+cellWd,startY+cellWd);}}
for(var i=0;i<game[gameWidthAt];i++){if(i>0)
drawEdge(mazeSttX+i*cellWd,mazeSttY,mazeSttX+(i+1)*cellWd,mazeSttY);if(i<game[gameWidthAt]-1)
drawEdge(mazeSttX+i*cellWd,mazeEndY,mazeSttX+(i+1)*cellWd,mazeEndY);}
for(i=0;i<game[gameHeightAt];i++){drawEdge(mazeSttX,mazeSttY+i*cellWd,mazeSttX,mazeSttY+(i+1)*cellWd);drawEdge(mazeEndX,mazeSttY+i*cellWd,mazeEndX,mazeSttY+(i+1)*cellWd);}}
function drawEdge(x0,y0,x1,y1){switch(game[gameEdgeStyleAt]){case "thin":g.lineStyle(2,0x000000,100);g.moveTo(x0,y0);g.lineTo(x1,y1);break;case "wide":g.strokeStyle='#bbc';g.lineWidth=cellWd/2;g.lineCap="round";g.beginPath();g.moveTo(x0,y0);g.lineTo(x1,y1);g.stroke();break;case "dash":g.strokeStyle='#aca';g.lineWidth=cellWd/2;g.beginPath();g.lineCap="round";g.moveTo((x0*3+x1)/4,(y0*3+y1)/4);g.lineTo((x0+x1*3)/4,(y0+y1*3)/4);g.stroke();break;case "dots":g.strokeStyle='#bbc';g.lineWidth=cellWd/2;g.drawCircle((x0+x1)/2,(y0+y1)/2,cellWd*0.35,'#8cc');break;case "2dots":g.strokeStyle='#bbc';g.lineWidth=cellWd/2;var r=0.85;var s=1-r;clr=['#aac','#cca'][(Math.random()*2)<<0];g.drawCircle((x0*r+x1*s),(y0*r+y1*s),cellWd*0.25,clr);clr=['#aac','#cca'][(Math.random()*2)<<0];g.drawCircle((x0*s+x1*r),(y0*s+y1*r),cellWd*0.25,clr);break;case "boxes":clr=clrs[getRandomInt(0,clrs.length-1)][1];g.strokeStyle=clr;g.lineWidth=cellWd*0.6;g.lineCap="butt";g.beginPath();g.moveTo(x0+1,y0+1);g.lineTo(x1-1,y1-1);g.stroke();break;case "road":clr=0x88aa88;g.strokeStyle='#8a8';g.lineWidth=cellWd*0.7;g.beginPath();g.lineCap="square";g.moveTo(x0,y0);g.lineTo(x1,y1);g.stroke();break;case "color":clr=clrs[getRandomInt(0,clrs.length-1)][1];g.strokeStyle=clr;g.lineWidth=cellWd*0.4;g.beginPath();g.lineCap="square";g.moveTo(x0,y0);g.lineTo(x1,y1);g.stroke();break;case "jagged":var thick=cellWd*(Math.random()*0.6+0.2);g.strokeStyle='#888';g.lineWidth=thick;g.beginPath();g.lineCap="square";g.moveTo(x0,y0);g.lineTo(x1,y1);g.stroke();break;case "invis":break;default:}}
function movePlayer(dx,dy){playerMoves++;document.getElementById('score').innerHTML=playerMoves;g2.strokeStyle='rgba(200,200,0,0.3)';g2.lineWidth=cellWd*0.3;g2.lineCap="butt";g2.beginPath();g2.moveTo(mazeSttX+playerX*cellWd+cellWd/2,mazeSttY+playerY*cellWd+cellWd/2);playerX+=dx;playerY+=dy;g2.lineTo(mazeSttX+playerX*cellWd+cellWd/2,mazeSttY+playerY*cellWd+cellWd/2);g2.stroke();drawPlayer();}
function drawPlayer(){var x=mazeSttX+playerX*cellWd+cellWd/2-playerWd/2;var y=mazeSttY+playerY*cellWd+cellWd/2-playerWd/2;var div=document.getElementById('player');div.style.left=x+'px';div.style.top=y+'px';currentPos=playerY*game[gameWidthAt]+playerX;if(currentPos==maze.length-1){win();}}
function weirdSearch(startCell,endCell){var path=[];for(var a=0;a<maze.length;a++){path[a]=[];path[a]=[];}
var route=[];route[0]=startCell;var up=-game[gameWidthAt];var down=game[gameWidthAt];var left=-1;var right=1;var found=false;do{start=route[route.length-1];var foundNewCell=false;if(path[start][1]==0){path[start][1]=1;if(maze[start][2]==0){temp=start+down;foundNewCell=true;}}
if(!foundNewCell){if(path[start][1]==1){path[start][1]=2;if(maze[start][4]==0){temp=start+right;foundNewCell=true;}}}
if(!foundNewCell){if(path[start][1]==2){path[start][1]=3;if(maze[start][1]==0){temp=start+up;foundNewCell=true;}}}
if(!foundNewCell){if(path[start][1]==3){path[start][1]=4;if(maze[start][3]==0){temp=start+left;foundNewCell=true;}}}
if(foundNewCell){route.push(temp);}else{route.splice(route.length-1,1);}
if(route[route.length-1]==endCell){found=true;}}while(!found);for(var a=1;a<route.length;a++){if(route[a]==startCell){route.splice(0,a);break;}}
console.log("route",route);var curPos=1;var curValue=0;var found=false;var tempVar=0;do{curValue=route[curPos];found=false;for(var a=0;a<curPos;a++){if(route[a]==curValue){route.splice(curPos-1,2);curPos--;found=true;}}
if(!found){curPos++;tempVar++;}}while(tempVar<route.length-1);trace("---");trace(route);solution=[];for(var a=0;a<route.length;a++){solution[a]=route[a];}
maxMoves=route.length-1;}
CanvasRenderingContext2D.prototype.drawCircle=function(x,y,radius,clr){this.fillStyle=clr;this.beginPath();this.arc(x,y,radius,0,2*Math.PI);this.fill();};function getRandomInt(min,max){return Math.floor(Math.random()*(max-min+1))+min;}
function dist(dx,dy){return(Math.sqrt(dx*dx+dy*dy));}
function printCanvas(){var dataUrl=document.getElementById('canvasId').toDataURL();var s='<!DOCTYPE html>';s+='<html>';s+='<head><title>Print canvas</title></head>';s+='<body>';s+='<img src="'+dataUrl+'">';s+='</body>';s+='</html>';var printWin=window.open('','','width=340,height=260');printWin.document.open();printWin.document.write(s);printWin.document.close();printWin.focus();printWin.print();printWin.close();}