javascriptarrayserror-handlingmazeunhandled

Maze Generator Uncaught Type Error in Javascript


I'm trying to create a random maze and, for the most part, have the logic and code figured out. However I keep getting the same error every time the maze randomly generates: "Uncaught TypeError: Cannot read property '(insert number)' of undefined." Now I have it set up to where its only supposed to access the defined properties (AKA the inside of the maze) so i'm having trouble seeing where the problem(s) lie.

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(); 

Solution

  • In your 4 methods (up down right and left), you have this line throwing an error:

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

    This is because you let points.currentPoint.x4 + i become negative in 2 of those functions (left/up) when you subtract 2 without checking that that index is still positive and exists as an index in that array grid