life.js

const CELL_SIZE = 5;
const CANVAS_WIDTH = 100;
const CANVAS_HEIGHT = 64;
const CHANCE = 0.9;
const CYCLE_TIME = 0;
const canvas = document.getElementById("screen");
const ctx = canvas.getContext("2d");
const cells = [];
const bufferCells = [];
let then = null;
let now = null;
let lifeTime = {};

ctx.canvas.height = (CELL_SIZE + 1) * CANVAS_HEIGHT + 1;
ctx.canvas.width = (CELL_SIZE + 1) * CANVAS_WIDTH + 1;

function getBg(lifeCount) {
  return `rgb(100, ${lifeCount}, 100)`;
}

function drawTable() {
  ctx.beginPath();
  ctx.strokeStyle = "#CCCCCC";

  for (let i = 0; i <= CANVAS_WIDTH; i++) {
    ctx.moveTo(i * (CELL_SIZE + 1) + 1, 0);
    ctx.lineTo(i * (CELL_SIZE + 1) + 1, (CELL_SIZE + 1) * CANVAS_HEIGHT + 1);
  }

  for (let j = 0; j <= CANVAS_HEIGHT; j++) {
    ctx.moveTo(0, j * (CELL_SIZE + 1) + 1);
    ctx.lineTo((CELL_SIZE + 1) * CANVAS_WIDTH + 1, j * (CELL_SIZE + 1) + 1);
  }
}

function update() {
  requestAnimationFrame(update);

  if (!controllTime()) {
    return;
  }

  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

  for (let row = 0; row < CANVAS_HEIGHT; row++) {
    for (let col = 0; col < CANVAS_WIDTH; col++) {
      if (typeof lifeTime[`${row}-${col}`] === "undefined") {
        lifeTime[`${row}-${col}`] = 255;
      }

      bufferCells[row][col] = dieOrLife(cells, col, row);

      if (bufferCells[row][col]) {
        lifeTime[`${row}-${col}`] =
          lifeTime[`${row}-${col}`] > 0 ? lifeTime[`${row}-${col}`] - 1 : 0;
      } else {
        lifeTime[`${row}-${col}`] = 255;
      }

      if (cells[row][col]) {
        ctx.fillStyle = getBg(lifeTime[`${row}-${col}`]);
        ctx.fillRect(
          col * (CELL_SIZE + 1) + 1,
          row * (CELL_SIZE + 1) + 1,
          CELL_SIZE,
          CELL_SIZE
        );
      }
    }
  }

  for (let i = 0; i < bufferCells.length; i++) {
    for (let j = 0; j < bufferCells[i].length; j++) {
      cells[i][j] = bufferCells[i][j];
    }
  }

  ctx.stroke();
}

function dieOrLife(cells, col, row) {
  let count = 0;
  const deltaRow = [CANVAS_HEIGHT - 1, 0, 1];
  const deltaColumn = [CANVAS_WIDTH - 1, 0, 1];

  for (let dr = 0; dr < deltaRow.length; dr++) {
    for (let dc = 0; dc < deltaColumn.length; dc++) {
      if (deltaRow[dr] === 0 && deltaColumn[dc] === 0) {
        continue;
      }

      count +=
        cells[(row + deltaRow[dr]) % CANVAS_HEIGHT][
          (col + deltaColumn[dc]) % CANVAS_WIDTH
        ];
    }
  }

  if (cells[row][col] && count < 2) {
    return 0;
  }

  if (cells[row][col] && (count === 3 || count === 2)) {
    return 1;
  }

  if (!cells[row][col] && count === 3) {
    return 1;
  }

  if (cells[row][col] && count > 3) {
    return 0;
  }

  return cells[row][col];
}

function controllTime() {
  now = Date.now() / 1000;
  let elapsed = now - then;

  if (elapsed < CYCLE_TIME) {
    return false;
  }

  then = now;

  return true;
}

function init() {
  for (let i = 0; i < CANVAS_HEIGHT; i++) {
    cells[i] = [];
    bufferCells[i] = [];

    for (let j = 0; j < CANVAS_WIDTH; j++) {
      cells[i][j] = Math.random() > CHANCE ? 1 : 0;
      bufferCells[i][j] = 0;
    }
  }

  drawTable();

  requestAnimationFrame(update);
}

init();