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?