Canvas Conway's Game of Life — Free Cellular Automaton Snippet

<div class="gl-wrap">
  <canvas id="glCanvas" class="gl-canvas"></canvas>
  <div class="gl-bar">
    <button class="gl-btn" id="glPlay">Play</button>
    <button class="gl-btn" id="glStep">Step</button>
    <button class="gl-btn" id="glRandom">Random</button>
    <button class="gl-btn" id="glClear">Clear</button>
    <label class="gl-speed">Speed
      <input type="range" id="glSpeed" min="1" max="30" value="10">
    </label>
  </div>
  <p class="gl-hint">Click cells to toggle them while paused. <span id="glGen">Generation 0</span></p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#090a0f;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.gl-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;width:min(620px,96vw)}
.gl-canvas{width:100%;aspect-ratio:1/1;background:#0e1016;border-radius:14px;border:1px solid rgba(255,255,255,.1);display:block;cursor:pointer}
.gl-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.gl-btn{padding:8px 16px;border-radius:8px;border:1px solid rgba(255,255,255,.14);background:#161a24;color:#c7cce0;font:600 12px system-ui;cursor:pointer;transition:background .2s,border-color .2s}
.gl-btn:hover{background:#1f2432}
.gl-btn.is-active{background:#34d399;color:#04241a;border-color:#34d399}
.gl-speed{display:flex;align-items:center;gap:8px;color:#8791ac;font-size:12px}
.gl-hint{color:#6b7284;font-size:12px;text-align:center}
#glGen{color:#34d399;font-weight:700}

const canvas = document.getElementById('glCanvas');
const ctx = canvas.getContext('2d');
const playBtn = document.getElementById('glPlay');
const stepBtn = document.getElementById('glStep');
const randomBtn = document.getElementById('glRandom');
const clearBtn = document.getElementById('glClear');
const speedInput = document.getElementById('glSpeed');
const genLabel = document.getElementById('glGen');

const COLS = 40, ROWS = 40;
let grid = new Uint8Array(COLS * ROWS);
let running = false;
let generation = 0;
let lastTick = 0;
let dpr, cellSize;

function idx(x, y) { return y * COLS + x; }

function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  const size = canvas.clientWidth;
  canvas.width = size * dpr;
  canvas.height = size * dpr;
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  cellSize = size / COLS;
  draw();
}

function randomize() {
  for (let i = 0; i < grid.length; i++) grid[i] = Math.random() < 0.28 ? 1 : 0;
  generation = 0;
  updateGen();
  draw();
}

function clearGrid() {
  grid.fill(0);
  generation = 0;
  updateGen();
  draw();
}

function updateGen() { genLabel.textContent = 'Generation ' + generation; }

function countNeighbors(x, y) {
  let count = 0;
  for (let dy = -1; dy <= 1; dy++) {
    for (let dx = -1; dx <= 1; dx++) {
      if (dx === 0 && dy === 0) continue;
      const nx = (x + dx + COLS) % COLS;
      const ny = (y + dy + ROWS) % ROWS;
      count += grid[idx(nx, ny)];
    }
  }
  return count;
}

// Applies Conway's rules to a fresh buffer so the whole generation updates
// simultaneously from a consistent snapshot of the previous state.
function step() {
  const next = new Uint8Array(COLS * ROWS);
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      const alive = grid[idx(x, y)];
      const n = countNeighbors(x, y);
      next[idx(x, y)] = alive ? (n === 2 || n === 3 ? 1 : 0) : (n === 3 ? 1 : 0);
    }
  }
  grid = next;
  generation++;
  updateGen();
  draw();
}

function draw() {
  ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
  ctx.fillStyle = '#34d399';
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      if (grid[idx(x, y)]) {
        ctx.fillRect(x * cellSize + 1, y * cellSize + 1, cellSize - 1.5, cellSize - 1.5);
      }
    }
  }
}

function toggleCell(clientX, clientY) {
  const rect = canvas.getBoundingClientRect();
  const x = Math.floor((clientX - rect.left) / cellSize);
  const y = Math.floor((clientY - rect.top) / cellSize);
  if (x < 0 || y < 0 || x >= COLS || y >= ROWS) return;
  grid[idx(x, y)] ^= 1;
  draw();
}

canvas.addEventListener('click', e => {
  if (running) return;
  toggleCell(e.clientX, e.clientY);
});

playBtn.addEventListener('click', () => {
  running = !running;
  playBtn.textContent = running ? 'Pause' : 'Play';
  playBtn.classList.toggle('is-active', running);
});
stepBtn.addEventListener('click', () => { if (!running) step(); });
randomBtn.addEventListener('click', randomize);
clearBtn.addEventListener('click', clearGrid);

function loop(ts) {
  if (running) {
    const interval = 1000 / Number(speedInput.value);
    if (ts - lastTick >= interval) {
      lastTick = ts;
      step();
    }
  }
  requestAnimationFrame(loop);
}

resize();
randomize();
requestAnimationFrame(loop);
window.addEventListener('resize', resize);