Javascript 老鼠走迷宮

利用遞迴方式

利用遞迴方式尋找出口

 

	var map=document.querySelector("#map"); //抓取地圖
	var n=10; //地圖大小
	var maparray=[]; //地圖陣列
	var index=0; //正確路徑索引
	var mouses=document.querySelector("#mouse"); //第一隻老鼠
	var mouse1=document.querySelector("#mouse1");//第二隻老鼠
	var rotatechange=0; //判定第一次轉
	//老鼠物件
	var mouse={
		mousepath:[],//紀錄老鼠走過路徑
		direction:0, //紀錄老鼠方向
		x:1, //老鼠x座標
		y:1, //老鼠y座標
	};
	//地圖 牆壁為0 可走通道1 
	maparray=[[0,0,0,0,0,0,0,0,0,0],
	       [0,1,1,1,1,1,1,1,0,0],
	       [0,0,1,1,1,0,1,1,1,0],
	       [0,1,1,0,1,1,1,0,0,0],
	       [0,1,0,0,1,0,0,0,0,0],
	       [0,1,0,1,1,1,1,0,1,0],
	       [0,1,1,1,0,0,0,0,1,0],
	       [0,1,0,1,1,1,0,0,1,0],
	       [0,0,1,0,0,1,1,1,1,0],
	       [0,0,0,0,0,0,0,0,0,0]];



	createmap(n); //建立迷宮
    mousemove(mouse.x,mouse.y); //老鼠移動
    var times=setInterval(mousemove,200); //計時器

    //老鼠移動函數
    function mousemove(x,y)
    {
    	x=mouse.x;//老鼠x座標
    	y=mouse.y;//老鼠y座標
        maparray[x][y]=2; //走過路徑設為2
        mouses.style.transform=`translate(${y*50}px,${x*50}px) rotate(${mouse.direction}deg)`; //老鼠移動到(x,y)座標上
     	if(iswalk())//判定老鼠是否還在移動
     	{   		      
     	    mouse.mousepath.push({x,y}); //老鼠路徑  	    
     	}
    	function normalmove()
    	{
    	    var path=mouse.mousepath; //設為正確路徑
    	    if(mouse.mousepath[index])
    	    {
    	      maparray[path[index].x][path[index].y]=3;
    	      mouse1.style.transform=`translate(${path[index].y*50}px,${path[index].x*50}px)`; //老鼠1移動到(x,y)座標上
    	      index++; //索引+1
    	    }
    	    createmap(10);
    	}
    	function iswalk()
    	{
    		var walk=true; //判斷老鼠是否無路可走

    	  if(maparray[8][8]==2)
    	  {
	
    	       clearInterval(times); //計時器關掉
    	       setInterval(normalmove,100); //啟動老鼠1計時器
    	  }
    	  else if(maparray[x][y+1]===1)
    	  {
    	  	mouse.direction=270;//方向向右
    	  	mouse.y++; //向右
    	  	rotatechange=0;//改變歸零
    	  }
    	  else if(maparray[x+1][y]===1)
    	  {
    	  	mouse.direction=0; //方向向下
    	  	mouse.x++; //向下
    	  	rotatechange=0;//改變歸零
    	  }
    	  else if(maparray[x][y-1]===1)
    	  {
    	  	mouse.direction=90; //方向向左
    	    mouse.y--; //向左
    	    rotatechange=0;//改變歸零
    	  }
    	  else if(maparray[x-1][y]===1)
    	  { 
    	  	mouse.direction=180; //方向向上
    	  	mouse.x--; //向上
    	  	rotatechange=0;//改變歸零
    	  }
    	  else 
    	  {
            if(rotatechange==0) //改變第一次
            mouse.direction-=180;//反轉180

            rotatechange++; //改變++
    	  	var len=mouse.mousepath.length-1;
    	  	mouse.x=mouse.mousepath[len].x;
    	  	mouse.y=mouse.mousepath[len].y;
    	  	mouse.mousepath.pop(); //刪除路徑
    	    walk=false; //無路可走反回原路
    	  }
    	  	return walk;
    	}
       
    }
    //迷宮建造函數
	function createmap(n)
	{
	
	 for(let i=0;i<n;i++)
	 {
        
       for(let j=0;j<n;j++)
	   {
	   	   var div=document.createElement("div");
	       div.classList.add("cell");
           if(maparray[i][j]==1)
           {
               div.style.backgroundColor="white";
               div.style.top=i*50+"px";
               div.style.left=j*50+"px";
               map.appendChild(div);
              
           }
           else if(maparray[i][j]==3)
           {
               div.style.backgroundColor="yellow";
               div.style.top=i*50+"px";
               div.style.left=j*50+"px";
               map.appendChild(div);
              
           }
           else if(maparray[i][j]==0)
           {
              div.style.backgroundColor="gray";
               div.style.top=i*50+"px";
               div.style.left=j*50+"px";
               map.appendChild(div);
              
           }
           
	    }
	  }
    }

程式碼demo:demo