'use strict'const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d');ctx.fillStyle = 'black'const RESOLUTION = 10const RATE = 1000function addCell([x, y]){ activeCells.add(`${x} ${y}`) ctx.rect(x, y, RESOLUTION, RESOLUTION); ctx.fill();}function removeCell([x, y]){ console.assert(activeCells.delete(`${x} ${y}`)) ctx.clearRect(x, y, RESOLUTION, RESOLUTION)}function surveyNeighbors([x, y]){ let count = 0 for (let a=-1; a<2; a++) { for (let b=-1; b<2; b++) { if (!(a === 0 && b === 0)){ const neighbor = `${Number(x) + (a*RESOLUTION)} ${Number(y) + (b*RESOLUTION)}` if (activeCells.has(neighbor)){ count++ } if (proximalCells.has(neighbor)){ const x = proximalCells.get(neighbor) proximalCells.set(neighbor, x+1) } else { proximalCells.set(neighbor, 0) } } } } return count}const activeCells = new Set()const proximalCells = new Map()function main(){ let addList = [] let removeList = [] for (let cell of activeCells){ cell = cell.split('') let n = surveyNeighbors(cell) if (!(n === 2 || n === 3)) { removeList.push(cell) } } for (let cell of proximalCells){ if (cell[1] === 2) { addList.push(cell[0]) } } removeList.forEach(cell => removeCell(cell)) addList.forEach(cell => {addCell(cell.split(''))})}let gameLoop;function draw(e){ addCell([parseInt(e.offsetX / RESOLUTION) * RESOLUTION, parseInt(e.offsetY / RESOLUTION) * RESOLUTION])}function pauseAndDraw(){ clearInterval(gameLoop) canvas.addEventListener('click', draw)}function resume(){ canvas.removeEventListener('click', draw) gameLoop = setInterval(main, RATE)}const controls = document.getElementById('controls')controls.addEventListener('change', (e) => { if (e.target.id === 'pause') {pauseAndDraw()} else if (e.target.id === 'resume') {resume()}})pauseAndDraw()<!DOCTYPE html><html lang="en-US"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width" /><title>Conway's Game of Life</title><style> canvas { background-color: pink; }</style></head><body><div id="controls"><input type="radio" id="pause" value="pause and draw" name="controls" checked /><label for="pause">pause and draw</label><input type="radio" id="resume" value="resume" name="controls" /><label for="resume">resume</label></div><canvas width="500" height="500"></canvas><script src="index.js"></script></body></html>The issue seems to be with the removeCell function which works sometimes but not most of the time.
You can try to use this by clicking on the canvas to draw a couple active cells and then switching to resume to run the game loop (and pause by switching back to 'pause and draw')
If you try to use the removeCell function manually it works as it should. As far as I know the part that removes cells from activeCells seems to work correctly too, but the rectangle never gets cleared from canvas.
