Javascript Conway's Game of Life Issues

Question

I'm trying to make Conway's Game of Life in javascript. I made a function to count neighbors, and a function that produces the next generation of cells. However, I tried a test input, and the result isn't coming out right, and I can't find where the error is. Please help.

Here's the code:

(code attached)

/* Draws grid */
for (var i = 0; i < 15; i++) {
  for (var j = 0; j < 15; j++) {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "#FFFFFF";
    ctx.strokeStyle = "grey";
    ctx.strokeRect(10 * j, 10 * i, 10, 10);
  }
}
/* draws live cells */
function drawSquares(a) {
  for (var i = 0; i < 15; i++) {
    for (var j = 0; j < 15; j++) {
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");
      ctx.fillStyle = "#000000";
      if (a[i][j] === 1) {
        ctx.fillRect(10 * j, 10 * i, 10, 10);
      }
    }
  }
}/* Counts neighbors */
function neighborCount(a, i, j, height, width){
    var lifes = 0;
    var neighbors = [
    [-1, 1],
    [0, 1],
    [1, 1],
    [-1, 0],
    [1, 0],
    [-1, -1],
    [0, -1],
    [1, -1]
  ];
  /* loops through a cell's neighbors */
  for (var z = 0; z < 8; z++){
    /*checks if the neighbor isn't off the grid*/
        if ((i + neighbors[z][0]) >=0 && (i + neighbors[z][0]) < height && (j + neighbors[z][1]) >=0 && (j + neighbors[z][1]) < width){
          /*checks if it's alive*/
          if (a[i + neighbors[z][0]][j + neighbors[z][1]] === 1){
              lifes++;
            }
        }
      }
      return lifes;
}
/* game of life */
function life(a) {
  var n = a; /*new generation of life */
  var lifes = 0; /*neighbor counter*/
  var height = a.length;
  var width = a[0].length;
  
 /*loops through all cells*/
  for (var i = 0; i < height; i++){
    for (var j = 0; j < width; j++){
      lifes = neighborCount(a, i, j, height, width);
      /* kills alive cells */
      if(a[i][j] === 1 && (lifes < 2 || lifes > 3)){
            n[i][j] = 0;
      } 
      /* brings dead cells to life */
      else if (a[i][j] === 0 && lifes ===3){
            n[i][j] = 1;        
      }
    }
  }
  drawSquares(n);
  return(n);
}

/* test input */
var a = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
];
  /* expected result:
  var a = [
  [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
]; */
  
  life(a);

<canvas id="myCanvas" width="150" height="150"></canvas>

`var n = a` doesn't create a copy of your data structure, it just adds a new variable pointing to the same data. So you're overwriting the old generation while you're still generating the new one, producing incoherent results. — Jeremy, Mar 15 '16 at 00:26
@bryanchen I edited the code in the post and added the expected result in a comment — user3039965, Mar 15 '16 at 00:29
@Jeremybanks thanks! how would I create a copy of the data structure then? — user3039965, Mar 15 '16 at 00:29
@user3039965 In your case, you could do `var n = JSON.parse(JSON.stringify(a))`, but see [this thread](http://stackoverflow.com/a/4591639/1114) for more details. (This approach won't work properly for most other data types, and there's no generic solution in JavaScript.) — Jeremy, Mar 15 '16 at 00:31

Javascript Conway's Game of Life Issues

0 Answers0