javascript - Javascript 中的迷宫生成器未捕获类型错误

Question

我正在尝试创建一个随机迷宫，并且在很大程度上已经弄清楚了逻辑和代码。然而，每次迷宫随机生成时，我都会收到相同的错误:“未捕获的类型错误:无法读取未定义的属性‘(插入数字)’。”现在我已将其设置为仅应访问已定义属性的位置(也称为迷宫内部)，因此我很难看出问题所在。

var canvas = document.getElementById('demo');
var ctx = canvas.getContext('2d');

var grid = [];

var MAZE_WIDTH = 25;
var MAZE_HEIGHT = 25;
var BLOCK_SIZE = 20;

var points={
    startpoint: {
        x1: 0,
        y1: 0
    },
    endpoint:{
        x2: 0,
        y2: 0
    },

    newPoint:{
        x3: 0,
        y3:0
    },

    currentPoint:{
        x4:0,
        y4:0
}
}

var thispoint = [];
var visited = [];
var traceback = [];

var count = 0;


function drawSquare(x, y, r, g, b){
    ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")"
    ctx.fillRect(x, y, BLOCK_SIZE-1, BLOCK_SIZE-1)
}


for(i = 0; i < MAZE_WIDTH; i++){
    grid[i] = [];
    for(j = 0; j <MAZE_HEIGHT; j++){
        grid[i][j] = 1;
    }

}


function drawMaze(){
    for(var y = 0; y < MAZE_HEIGHT; y++){
        for(var x = 0; x < MAZE_WIDTH; x++){
            if(x%2 == 1 && y%2 == 1){
                grid[x][y] = 0;
            }
            if(x%2 == 0 && y%2 == 0){
                grid[x][y] = 1;
            }
            if(grid[x][y]==1){
                drawSquare(x*BLOCK_SIZE, y*BLOCK_SIZE, 255, 255, 255);
            } 
            if(grid[x][y] == 0){
                drawSquare(x*BLOCK_SIZE, y*BLOCK_SIZE, 0,0,0);
            }
    }   


}
}

function startPath(){
   var done = false;
    do{
     var a={
        x: Math.floor(Math.random()*25),
        y: Math.floor(Math.random()*25)
        }
           if(grid[a.x][a.y] == 0){
                if(a.x-1 < 1 || a.y-1 < 1 ||  a.y+1 > 23|| a.x+1 >23) {
                    console.log("begin at " + a.x + "," + a.y);
                    points.startpoint.x1 = a.x;
                    points.startpoint.y1 = a.y;
                    points.currentPoint.x4 = points.startpoint.x1;
                    points.currentPoint.y4 = points.startpoint.y1;
                    visited.push([points.startpoint.x1,points.startpoint.y1]);
                    traceback.push([points.startpoint.x1,points.startpoint.y1]);
                    console.log("push");
                    done = true;
                }else if(a.x-1 > 1 && a.y-1 > 1 &&  a.y+1 < 23 && a.x+1 >23){
                    done = false;
                }
           }else if(grid[a.x][a.y] != 0){
            done = false;
            }
    }while(!done);
}

function buildMaze(){
    var done = false;
    do{
        if(count == 3){
            count = 0;
            //go back
            var tempTraceback = traceback.pop;
            points.currentPoint.x4 = tempTraceback[0];
            points.currentPoint.y4 = tempTraceback[1];
            console.log("Temp Trace: " + tempTraceback[0], tempTraceback[1]);
            if(points.currentPoint.x4 == points.startpoint.x1 && points.currentPoint.y4 == points.startpoint.y1){
                done = true;
            }else if(points.currentPoint.x4 != points.startpoint.x1 || points.currentPoint.y4 != points.startpoint.y1){
                fillMaze();
        }
        }else if(count!= 3){
            count = 0;
            fillMaze();
            console.log(traceback);
            console.log(visited);
        }

    }while(!done)

}





function fillMaze(){
    var a = Math.floor((Math.random() * 4)+1);
    switch(a){
        case 1:
                console.log("left");
                left();

        break;

        case 2:
                console.log("right");
                right();

        break;

        case 3:
            console.log("up");
                up();

        break;

        case 4: 
            console.log("down");
                down();

        break;
    }
}
    function fillSquare(x,y){
        drawSquare(x*BLOCK_SIZE, y * BLOCK_SIZE,0,0,0)
    }


function left(){
    var thiscount = 0;
   for(var i = 1; i <= 2; i++){
    if(points.currentPoint.x4 - i >= 1){
        if(grid[points.currentPoint.x4 - i][points.currentPoint.y4] != 2){
    visited.push([points.currentPoint.x4 - i,points.currentPoint.y4]);
    traceback.push([points.currentPoint.x4 - i,points.currentPoint.y4]);
    grid[points.currentPoint.x4 -i][points.currentPoint.y4] = 2;
    fillSquare(points.currentPoint.x4-i,points.currentPoint.y4);  
        console.log(points.currentPoint.x4 + "," + points.currentPoint.y4);
        }else if(grid[points.currentPoint.x4 - i][points.currentPoint.y4] == 2){
            thiscount++;
        }
    }else if(points.currentPoint.x4 - i < 1){
        thiscount++;
    }
     }
    if(thiscount == 2){
        thiscount = 1;
    }
    points.currentPoint.x4 = points.currentPoint.x4 -2;
    count = count + thiscount;
}

function right(){
    var thiscount = 0;
     for(var i = 1; i <= 2; i++){
         if(points.currentPoint.x4 + i <= 23){
        if(grid[points.currentPoint.x4 + i][points.currentPoint.y4] != 2){
    visited.push([points.currentPoint.x4 + i,points.currentPoint.y4]);
    traceback.push([points.currentPoint.x4 + i,points.currentPoint.y4]);
    grid[points.currentPoint.x4 +i][points.currentPoint.y4] = 2;
         fillSquare(points.currentPoint.x4 +i,points.currentPoint.y4);
            console.log(points.currentPoint.x4 + "," + points.currentPoint.y4);
        }else if(grid[points.currentPoint.x4 + i][points.currentPoint.y4] == 2){
            thiscount++;
        }
         }else if(points.currentPoint.x4 + i > 23){
             thiscount++;
         }
     }
    if(thiscount == 2){
        thiscount = 1;
    }

    points.currentPoint.x4 = points.currentPoint.x4 +2;
    count = count + thiscount;
}

function up(){
    var thiscount = 0;
     for(var i = 1; i <= 2; i++){
        if(points.currentPoint.y4 - i >= 1){
            if(grid[points.currentPoint.x4][points.currentPoint.y4-i] != 2){
                visited.push([points.currentPoint.x4,points.currentPoint.y4-i]);
                traceback.push([points.currentPoint.x4,points.currentPoint.y4-i]);
                grid[points.currentPoint.x4][points.currentPoint.y4-i] = 2;
                fillSquare(points.currentPoint.x4,points.currentPoint.y4-i);
                console.log(visited);
                console.log(traceback);
        }else if(grid[points.currentPoint.x4][points.currentPoint.y4-i] == 2){
            thiscount++;
        }
          }else if(points.currentPoint.y4 - i < 1){
              thiscount++;
          }
}
    if(thiscount == 2){
        thiscount = 1;
    }

    points.currentPoint.y4 = points.currentPoint.y4-2;
    count = count + thiscount;
}


function down(){
    var thiscount = 0;
    for(var i = 1; i <= 2; i++){
         if(points.currentPoint.y4 + i <= 23){
        if(grid[points.currentPoint.x4][points.currentPoint.y4 + i] != 2){
            visited.push([points.currentPoint.x4,points.currentPoint.y4 +i]);
    traceback.push([points.currentPoint.x4,points.currentPoint.y4+i]);
    grid[points.currentPoint.x4][points.currentPoint.y4+i] = 2;
    fillSquare(points.currentPoint.x4,points.currentPoint.y4+i);
        }else if(grid[points.currentPoint.x4][points.currentPoint.y4 + i] == 2){
            thiscount++;
        }
         }else if(points.currentPoint.y4 + i > 23){
             thiscount++;
         }
    }
    if(thiscount == 2){
        thiscount = 1;
    }

    count = count + thiscount;
       points.currentPoint.y4 = points.currentPoint.y4 + 2;
}



drawMaze();
startPath();
buildMaze(); 

Answer 1

在您的 4 个方法(上下左右)中，此行抛出错误:

if(grid[points.currentPoint.x4 + i][points.currentPoint.y4] != 2){

这是因为当您减去 2 时，您让 points.currentPoint.x4 + i 在其中 2 个函数(左/上)中变为负数，而没有检查该索引是否仍为正数并且作为该数组中的索引 grid