index.html

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
  body {
    margin: 0;
  }
</style>

<canvas></canvas>

<script>
const colors = {
  alive: 'salmon',
  dead: 'papayawhip',
}
const viewport = {
  height: window.innerHeight,
  width: window.innerWidth,
}
const canvas = document.querySelector('canvas')
canvas.setAttribute('height', viewport.height);
canvas.setAttribute('width', viewport.width);

const context = canvas.getContext('2d')

const cellSize = 10;

let state = (() => {
  const totalRows = viewport.height / cellSize
  const perRow = viewport.width / cellSize
  const state = []

  for (let r = 0; r < totalRows; r++) {
    const row = []

    for (let i = 0; i < perRow; i++) {
      row.push({ alive: (Math.floor(Math.random() * 5) === 1) })
    }

    state.push(row)
  }

  return state
})()

const render = () => {
  state.forEach((row, rowIndex) => {
    row.forEach((cell, cellIndex) => {
      context.fillStyle = cell.alive ? colors.alive : colors.dead
      context.fillRect(cellIndex * cellSize, rowIndex * cellSize, cellSize, cellSize)
    })
  })
}

render()

const isAlive = (cell, aliveNeighbors) => {
  if (cell.alive) {
    return (aliveNeighbors.length === 2 || aliveNeighbors.length === 3)
  }

  return (aliveNeighbors.length === 3)
}

const nextGeneration = () => {
  const newState = []

  state.forEach((row, rowIndex) => {
    const newRow = []

    row.forEach((cell, cellIndex) => {
      const lastRow = state[rowIndex - 1] || state[state.length - 1]
      const nextRow = state[rowIndex + 1] || state[0]

      const aliveNeighbors = [
        lastRow[cellIndex - 1] || lastRow[lastRow.length - 1],
        lastRow[cellIndex],
        lastRow[cellIndex + 1] || lastRow[0],
        row[cellIndex - 1] || row[row.length - 1],
        row[cellIndex + 1] || row[0],
        nextRow[cellIndex - 1] || nextRow[nextRow.length - 1],
        nextRow[cellIndex],
        nextRow[cellIndex + 1] || nextRow[0],
      ].filter(cell => cell.alive)

      newRow.push({ alive: isAlive(cell, aliveNeighbors) })
    })

    newState.push(newRow)
  })

  return newState
}

setInterval(() => {
  state = nextGeneration()
  render()
}, (1000 / 24))
</script>