Js迷宫游戏

<!DOCTYPE html>
<html>
  <head>
    <title>MyHtml.html</title>    
  </head> 
  <body>
  <canvas id="mycanvas" width="600px" height="600px"></canvas>
  </body>
  <script type="text/javascript">
    //绘制棋盘设置每行有14个单元格，共有196个格子，格子大小为30 X 30
    var aa=14;
    var chess = document.getElementById("mycanvas");
    var context = chess.getContext('2d');
    function drawChessBoard(){//绘画
        for(var i=0;i<aa+1;i++){
            context.strokeStyle='gray';//可选区域
            context.moveTo(15+i*30,15);//垂直方向画15根线，相距30px;
            context.lineTo(15+i*30,15+30*aa);
            context.stroke();
            context.moveTo(15,15+i*30);//水平方向画15根线，相距30px;棋盘为14*14；
            context.lineTo(15+30*aa,15+i*30);
            context.stroke();
        }
    }
    drawChessBoard();

   //设置两个相邻的格子是否是相同的,二维数组access
   var access = [];
   for(var i = 0 ; i < aa*aa ; i++){
       access[i] = [];
      for(var j = 0 ; j< aa*aa ; j++){
         access[i][j] = -1;
      }
   }

    //生成迷宫时候用到的并查集
     var  arr = [];
    for(var j=0;j<196;j++){
      arr[j] = j;
    }
    function search(a){
       while(a != arr[a]){
         a = arr[a];
        }
        return a;
    }
    function union(a,b){
       var  pa = search(a);
       var  pb = search(b);
       arr[pb] = pa;
    }
    

    function getnei(a)//获得邻居号  random
    {
        var y = parseInt(a/aa);//要精确成整数
        var x = a%aa;
        var mynei=new Array();//储存邻居
        if(x-1>=0){mynei.push(y*aa+x-1);}//左节点
        if(x+1<14){mynei.push(y*aa+x+1);}//右节点
        if(y+1<14){mynei.push((y+1)*aa+x);}//
        if(y-1>=0){mynei.push((y-1)*aa+x);}//
        var ran=parseInt(Math.random() * mynei.length );
        return mynei[ran];
    }

    function drawline(a,b)//划线，要判断是上下还是左右
    {
        var y1=parseInt(a/aa);
        var x1=a%aa;   //横坐标
        var y2=parseInt(b/aa);
        var x2=b%aa;
        var x3 = x1<x2?x1:x2;
        if(y1-y2==0){   //左右方向的点  需要上下划线 x1是较小值
           context.clearRect(15+(x3+1)*30-1, 15+y2*30+1,2,28); 
        }else{
           context.clearRect(x1*30+15+1, ((y1+y2)/2+1)*30-1,28,2);
        }
    }
     
     // drawline(18,32);
    while(search(0)!=search(195))//主要思路
    {
        var num = parseInt(Math.random() * aa*aa );//产生一个小于196的随机数
        var neighbour=getnei(num);
        if(search(num)==search(neighbour)){continue;}
        else//不在一个上
        {
            drawline(num,neighbour);//划线
            union(num,neighbour);
            access[num][neighbour] = 1;
            access[neighbour][num] = 1;
        }
    }
    
    //在(0,0)位置上画一个蓝色方框
    var currentLine=0;
    var currentCol=0;
    context.fillStyle = "blue";
    context.fillRect(currentLine*30+2+15,currentCol*30+2+15,25,25);
    
    //在(13,13)上画一个绿色方框
    context.fillStyle = "green";
    context.fillRect(13*30+2+15,13*30+2+15,25,25);
    context.fillStyle = "blue";
    
    //监听键盘上下左右键
    document.onkeydown=function(e){
     var tempLine = currentLine;
     var tempCol = currentCol;
     var isExceed = false;
     e=window.event||e;
     var num =  e.keyCode;
      switch(e.keyCode){
        case 37: //左键
          currentLine--;
          if(currentLine < 0 || currentLine > 13 || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){
             currentLine++;
            isExceed = true;
            break;
          }
          break;
        case 38: //上键
          currentCol--;
          if(currentCol < 0 || currentCol > 13 || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){
            currentCol++;
            isExceed = true;
            break;
          }
          break;
        case 39: //右键
          currentLine++;
          if(currentLine < 0 || currentLine > 13 || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){
            currentLine--;
            isExceed = true;
            break;
          }
          break;
        case 40: //下键
          currentCol++;
          if(currentCol < 0 || currentCol > 13 || !checkAccess(tempLine,tempCol , currentLine ,currentCol)){
            currentCol--;
            isExceed = true;
            break;
          }
          break;
        default:
          break;
      }
      if( (num == 37 || num == 38 || num == 39 || num == 40 ) && !isExceed){
           context.clearRect(tempLine*30+2+15, tempCol*30+2+15, 25, 25);
           context.fillRect(currentLine*30+2+15,currentCol*30+2+15,25,25);
      }
      checkSucess(currentLine ,currentCol );
    }

    function checkAccess(tempLine,tempCol , currentLine ,currentCol){
        var oldSeq = tempCol*14+tempLine;
        var newSeq = currentCol*14+currentLine;
        if(access[oldSeq][newSeq] == 1 || access[newSeq][oldSeq] == 1 ){
            return true;
        }else{
           return false;
        }
    }
    
    function  checkSucess(currentLine ,currentCol ){
       if(currentLine == 13 && currentCol == 13){
          alert("success!");
          window.location.reload();
          return ;
       }
    }
    
  </script>
</html>
posted @ 2019-10-01 23:59 踏月而来阅读(1141) 评论(0) 收藏举报
刷新页面返回顶部
Js迷宫游戏

公告
