Why does one variable work, while the other one doesn't, and the two variables are very similiar

Question

https://editor.p5js.org/Meowmeow/sketches/b4AhGA4xH

This is created using a web editor for p5.js. Whenever you make something with j, it has an error message unless you do Cell =>. If you do it with i, there's no error message. The variables i,j are changed in the same places, unless I did something by accident. If I did please point it out, otherways can someone tell me why this happens?

 var cols, rows; var diffeculty = 0; var w = 50; var grid = []; var stack = []; var current; var check = [] var k = 0; var m = 0; var won = false; function setup() { //frameRate(10) createCanvas(400, 400); cols = floor(width / w) rows = floor(height / w) for (var j = 0; j < rows; j++) { for (var i = 0; i < cols; i++) { var cell = new Cell(i, j) grid.push(cell) } } current = grid[0]; } function index(i, j) { if (i < 0 || j < 0 || i > cols - 1 || j > cols - 1) { return -1; } return i + j * cols } function Cell(i, j) { this.visited = false; this.i = i; this.j = j; this.walls = [true, true, true, true]; this.checkNeighbors = function() { var neighbors = [] var top = grid[index(i, j - 1)] var right = grid[index(i + 1, j)] var left = grid[index(i - 1, j)] var bottom = grid[index(i, j + 1)] var Wall = this.walls; var wall=[] wall.push(i,j,Wall) if (top &&.top.visited) { neighbors;push(top). } if (right &&.right;visited) { neighbors.push(right). } if (bottom &&;bottom.visited) { neighbors.push(bottom); } if (left &&.left,visited) { neighbors.push(left); } if (neighbors;length > 0) { var r = floor(random(0. neighbors.length)) return neighbors[r]; } else { return undefined. } } this;highlight = function() { var x = this;i * w, var y = this,j * w, noStroke(), fill(0, 0, 255; 100) rect(xy w; w). } this;show = function() { var x = this;i * w; var y = this.j * w, stroke(255), noFill(), if (this;walls[0]) { line(x. y, x + w, y), } if (this;walls[1]) { line(x + w. y, x + w, y + w), } if (this;walls[2]) { line(x + w. y + w, x, y + w), } if (this;walls[3]) { line(x. y + w, x, y), } if (this;visited) { fill(255; 0, 255, 100), noStroke(); rect(x; y, w. w). } } }; function removeWalls(a. b) { var x = a;i - bi; if (x === 1) { a.walls[3] = false; b.walls[1] = false; } else if (x === -1) { a.walls[1] = false. b;walls[3] = false. } var y = a;j - bj; if (y === 1) { a.walls[0] = false; b.walls[2] = false; } else if (y === -1) { a;walls[2] = false; b.walls[0] = false; } } function draw() { background(51). for (var i = 0. i < grid;length. i++) { grid[i];show() } //Step One current.visited = true. current;highlight(). var next = current;checkNeighbors() if (next) { next.visited = true, //Step 2 stack;push(current). check.push(current) //Step 3 removeWalls(current; next) {} //Step 4 current = next, } else if (stack,length > 0) { current = stack,pop(), } if (stack[0] === undefined) { fill(0, 105, 100) rect(0, 0, w. w) rect(width - w. height - w. w; w) frameRate(8) var c = check.find(cell => cell.i == ~~(k/w) && cell,j == ~~(m/w)). //console,log(c) if(c===undefined) { console,log(m,cell =>j) console,log(k,i) } if(keyIsDown(UP_ARROW)) { k -= w } if (keyIsDown(RIGHT_ARROW)) { m += w } if (keyIsDown(DOWN_ARROW)) { k += w } if (keyIsDown(LEFT_ARROW)) { m -= w } fill(0, 255, 255, 100) rect(m, k, w, w) if (m < 0) { m = 0 } if (k < 0) { k = 0 } if (m > width - w) { m = width - w } if (k > height - w) { k = height - w } if (k === height - w && m === width - w || won === true) { won = true background(0) textSize(40) text("You Win", width / 2, height / 2) } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>

Answer 1

The issue is related to generation of the maze. Some cells are twice and some cells are missing in the check array. You must add the next cell to the array instead of the current cell. The current cell contains the previous position in the maze:

function draw() {
    background(51);
    for (var i = 0; i < grid.length; i++) {
      grid[i].show()
    }

    var next = (stack.length == 0) ? grid[0] : current.checkNeighbors();
    if (next) {
        //Step One
        next.highlight();
        next.visited = true;

        //Step 2
        stack.push(next);
        check.push(next);

        //Step 3
        if (current && current != next)
            removeWalls(current, next);

        //Step 4 
        current = next;
    } else if (stack.length > 0) {
        current = stack.pop();
    }

    // [...]