康威的人生游戏-JS

Question

im trying to create Conways Game of Life ( https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life ) in JS with the P5.JS library, but im having some trouble. heres the code:

var winSize = 50;
var cellSize = 10;
var cells = [];
var but;

var gen = 0;
var popl;

function setup() {
  createCanvas(cellSize * winSize + winSize + 1, cellSize * winSize + winSize + 1);
  //create grid
  for (var b = (cellSize / 2) + 1; b < height; b += cellSize + 1) {
    for (var a = (cellSize / 2) + 1; a < width; a += cellSize + 1) {
      cells.push(new Cell(a, b));
    }
  }
  but = createButton("RUN");
  but.mouseClicked(run);
}

function draw() {
  background(50);
  for (var a = 0; a < cells.length; a++) {
    cells[a].show();
  }
}

function Cell(a, b) {
  this.x = a;
  this.y = b;
  this.clr = 0;
  // true when alive, false when dead
  this.ckd = false;

  this.show = function() {
    rectMode(CENTER);
    noStroke();
    fill(this.clr);
    rect(this.x, this.y, cellSize, cellSize);
  }

  //if cell is dead, it comes to life, if cell is alive, it dies
  this.chk = function() {
    if (this.ckd) {
      this.ckd = false;
    } else this.ckd = true;

    if (this.ckd) {
      this.clr = 255;
    } else this.clr = 0;
  }
}

function mousePressed() {
  for (var a = 0; a < cells.length; a++) {
    if (mouseX >= cells[a].x - cellSize / 2 && mouseX <= cells[a].x - cellSize / 2 + cellSize && mouseY >= cells[a].y - cellSize / 2 && mouseY <= cells[a].y - cellSize / 2 + cellSize) {
      console.log("clicked " + a + " at " + cells[a].x + " , " + cells[a].y);
      cells[a].chk();
    }
  }
}

function run() {
  gen++;
  for (var a = 0; a < cells.length; a++) {
    // look for all cells that are alive
    if (cells[a].ckd) {
      //calculate its neighbors
      if (clcn(a) == 1 || clcn(a) == 4) {
        cells[a].chk();
      }
    } else { //all cells that are dead and calculate its neighbors
      if (clcn(a) == 3) {
        cells[a].chk();
      }
    }
  }
  popl = cells.length;
  //once done, run again
  run();
}

//function that calculates neighbors, takes index as arg
function clcn(a) {

  //first it looks for all cells that are corners (0, 49, 2499, 2450), then for all cells that are on edges, and then for the ones in the center (this is to avoid checking cells that dont exist)
  if (a === 0) {
    if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a + winSize + 1].ckd) {
      if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a + winSize + 1].ckd) {
        if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a + winSize + 1].ckd) {
          if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a + winSize + 1].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (a == 49) {
    if (cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize].ckd) {
      if (cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize].ckd) {
        if (cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize].ckd) {
          if (cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (a == 2499) {
    if (cells[a - 1].ckd || cells[a - winSize].ckd || cells[a - winSize - 1].ckd) {
      if (cells[a - 1].ckd || cells[a - winSize].ckd || cells[a - winSize - 1].ckd) {
        if (cells[a - 1].ckd || cells[a - winSize].ckd || cells[a - winSize - 1].ckd) {
          if (cells[a - 1].ckd || cells[a - winSize].ckd || cells[a - winSize - 1].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (a == 2450) {
    if (cells[a + 1].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd) {
      if (cells[a + 1].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd) {
        if (cells[a + 1].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd) {
          if (cells[a + 1].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (cells[a].y == 6) {
    if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
      if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
        if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
          if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (cells[a].x == 545) {
    if (cells[a - winSize].ckd || cells[a + winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a + winSize - 1].ckd) {
      if (cells[a - winSize].ckd || cells[a + winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a + winSize - 1].ckd) {
        if (cells[a - winSize].ckd || cells[a + winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a + winSize - 1].ckd) {
          if (cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a + winSize - 1].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (cells[a].y == 545) {
    if (cells[a - winSize].ckd || cells[a + 1].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd) {
      if (cells[a - winSize].ckd || cells[a + 1].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd) {
        if (cells[a - winSize].ckd || cells[a + 1].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd) {
          if (cells[a - winSize].ckd || cells[a + 1].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (cells[a].x == 6) {
    if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd || cells[a + winSize + 1].ckd) {
      if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd || cells[a + winSize + 1].ckd) {
        if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd || cells[a + winSize + 1].ckd) {
          if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - winSize + 1].ckd || cells[a + winSize + 1].ckd) {
            return 4;
          }
          return 3;
        }
        return 2;
      }
      return 1;
    }
  }

  if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
    if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
      if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
        if (cells[a + 1].ckd || cells[a + winSize].ckd || cells[a - winSize].ckd || cells[a - 1].ckd || cells[a - winSize - 1].ckd || cells[a - winSize + 1].ckd || cells[a + winSize - 1].ckd || cells[a + winSize + 1].ckd) {
          return 4;
        }
        return 3;
      }
      return 2;
    }
    return 1;
  }
}

i dont know where my mistake is, it keeps throwing an error "Uncaught TypeError: Cannot read property 'ckd' of undefined". what am i doing wrong?

Any help is much appreciated.

ps: dont mark as duplicate, using the p5 library.

Answer 1

If you don't want your question to be closed, then please try to narrow your problem down to an MCVE before you post. It's very hard for us to debug your entire project for you. You should also tell us exactly what line the error is on, and somehow point that line out so we don't have to count lines.

That being said, your error is a bit self-explanatory: you're trying to access the ckd property of an object that doesn't exist. This can happen if you're using a variable that you haven't defined.

But looking at your code, my guess is that you're accessing array indexes that don't exist.

You need to do some debugging. What exact index are you accessing when the error occurs? How many indexes does the array have? There's a mismatch between the two for some reason, so that's what you should be tracking down. Please note that I'm not asking that question so you tell me. That's the question you should be asking yourself. That should begin a process of debugging and tracking down your error.

I'll also note that you'll have better luck if you work in much smaller chunks. My guess is that you wrote most of this code and only tried to run it after it was all written. That approach is going to give you a ton of headaches. You need to work in small chunks, run your code often (every single time you add a line), and debug errors as soon as they occur instead of after you've added a ton of other code.

One final note: this seems to be a very roundabout way to count the neighbors of a cell. Why not just use a for loop instead of a million nested if statements?