0

I'm working on a program in p5.js. I'm having trouble with an error message, which keeps on popping up. The program is over 200 lines long.
Here's the link (created using a web p5 editor). https://editor.p5js.org/Meowmeow/sketches/b4AhGA4xH

The code sample:

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(600, 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(x, y, 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 - b.i;
  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 - b.j;

  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(k/w,m/w);
    
    
    console.log(c)
     
    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>

It always says Uncaught TypeError: 0 is not a function (sketch: line 180), even though on line 180, I didn't type in 0.

  • The program is supposed to create a maze, then the player has to solve the maze.
  • I used the Coding Train toturial to make the maze generator.
  • Right now I'm trying to get the value from an array, and if the array shows that the wall is there, then it doesn't allow it to move that direction.

If possible, please write if there's a really simple way for the walls to work?

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
user15302406
  • 132
  • 9
  • It's possible for expressions to evaluate to 0. The first argument of [Array.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) must be a function. – luther Mar 01 '21 at 15:32
  • If possible, can you show me how to fix this? – user15302406 Mar 01 '21 at 15:52
  • on a side note, some of your code seems overly complicated and confusing. for example you are using a global variable "this.walls", which you then assign to a local variable called "Wall", and then immediately push that onto a second local variable called "wall", which is never even used. I'm not sure any of that is necessary. – Rick Mar 01 '21 at 16:39
  • Yeah, that was because I was trying to implement the wall system in the game. I'm keeping these sort of things there just in case I get an idea to make it work. I'm going to delete all useless code like what you pointed out after I'm finished. – user15302406 Mar 01 '21 at 18:02
  • Is the issue solved? – Rabbid76 Mar 05 '21 at 14:25
  • Yes, I wasn't using the find function correctly. – user15302406 Mar 05 '21 at 15:21

1 Answers1

1

Apparently you're trying to find the cell where i == k/w and j == m/w:

var c = check.find(k/w,m/w);

var c = check.find(cell => cell.i == ~~(k/w) && cell.j == ~~(m/w));

See Array.prototype.find() and Integer division in JavaScript?.

Rabbid76
  • 202,892
  • 27
  • 131
  • 174
  • This is working for some of the cells, for others, it returns undefined. I may be mistaken, but doesn't it return -1 if it finds nothing – user15302406 Mar 01 '21 at 18:08
  • @user15302406 No! [`find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) doesn't return an index, but an object. Thus if no element is found, the return value is "undefined" – Rabbid76 Mar 01 '21 at 18:09
  • @user15302406 Try `var c = check.find(cell => cell.i == ~~(k/w) && cell.j == ~~(m/w));` – Rabbid76 Mar 01 '21 at 18:12
  • "The find() method returns the value of the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned." – Rick Mar 01 '21 at 18:20
  • @Rick Did I say something different? – Rabbid76 Mar 01 '21 at 18:22
  • I confused it with Indexof, which I tried to use. – user15302406 Mar 01 '21 at 18:22
  • @user15302406 [`indexOf()`](https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf) searches for the index of a known element. [`find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find) searches for an an element that satisfies a provided testing function. – Rabbid76 Mar 01 '21 at 18:23
  • Still not working, also when I type in a j in a different place such as var T = j; there's an error message. Although, if I do var T = I; There isn't an error message. – user15302406 Mar 01 '21 at 18:42
  • @user15302406 What does not work? In the code in the question you don't use the result of `find` at all. Is this a new question? – Rabbid76 Mar 01 '21 at 18:43
  • var c = check.find(cell => cell.i == ~~(k/w) && cell.j == ~~(m/w)); Also your right, this should be another question – user15302406 Mar 01 '21 at 18:56