Game of Life

by Kirk Ouimet

HTML

<html>
    <head>
        <script>
        document.addEventListener("DOMContentLoaded", function() {

var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.style.overflow = 'hidden';
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var cells = [];
var cellSize = 10;
var cellCount = canvas.width / cellSize;

for (var i = 0; i < cellCount; i++) {
  cells[i] = [];
  for (var j = 0; j < cellCount; j++) {
    cells[i][j] = 0;
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (var i = 0; i < cellCount; i++) {
    for (var j = 0; j < cellCount; j++) {
      if (cells[i][j] == 1) {
        ctx.fillRect(i * cellSize, j * cellSize, cellSize, cellSize);
      }
    }
  }
}

function update() {
  var newCells = [];
  for (var i = 0; i < cellCount; i++) {
    newCells[i] = [];
    for (var j = 0; j < cellCount; j++) {
      newCells[i][j] = 0;
    }
  }
  for (var i = 0; i < cellCount; i++) {
    for (var j = 0; j < cellCount; j++) {
      var neighbors = 0;
      for (var k = -1; k <= 1; k++) {
        for (var l = -1; l <= 1; l++) {
          if (k == 0 && l == 0) {
            continue;
          }
          if (i + k >= 0 && i + k < cellCount && j + l >= 0 && j + l < cellCount) {
            neighbors += cells[i + k][j + l];
          }
        }
      }
      if (cells[i][j] == 1) {
        if (neighbors < 2 || neighbors > 3) {
          newCells[i][j] = 0;
        } else {
          newCells[i][j] = 1;
        }
      } else {
        if (neighbors == 3) {
          newCells[i][j] = 1;
        }
      }
    }
  }
  cells = newCells;
  draw();
}

function randomize() {
  for (var i = 0; i < cellCount; i++) {
    for (var j = 0; j < cellCount; j++) {
      cells[i][j] = Math.random() > 0.5 ? 1 : 0;
    }
  }
  draw();
}

randomize();
setInterval(update, 100);
});
        </script>
    </head>
    <body style="margin: 0;">
        <div...