// Get the canvas element.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Set the width and height of the canvas.
canvas.width = 600;
canvas.height = 600;
function Cell(x, y, size, state) {
this.x = x;
this.y = y;
this.size = size;
this.state = state;
}
Cell.prototype.setState = function(state) {
this.state = state;
}
Cell.prototype.draw = function() {
ctx.beginPath();
ctx.rect(this.x, this.y, this.size, this.size);
ctx.fillStyle = this.state === 1 ? 'red' : 'white';
ctx.fill();
ctx.stroke();
}
function Grid(rows, cols, size) {
this.rows = rows;
this.cols = cols;
this.size = size;
this.cells = this.createCells();
}
Grid.prototype.createCells = function() {
const cells = [];
for (let i = 0; i < this.rows; i++) {
cells[i] = [];
for (let j = 0; j < this.cols; j++) {
cells[i][j] = new Cell(j * this.size, i * this.size, this.size, Math.round(Math.random()));
}
}
return cells;
}
Grid.prototype.draw = function() {
this.cells.forEach(row => row.forEach(cell => cell.draw()));
}
Grid.prototype.update = function() {
const next = this.createCells();
for (let i = 0; i < this.rows; i++) {
for (let j = 0; j < this.cols; j++) {
const cell = this.cells[i][j];
const neighbours = this.countNeighbours(i, j);
if (cell.state === 1 && (neighbours < 2 || neighbours > 3)) {
next[i][j].state = 0;
} else if (cell.state === 0 && neighbours === 3) {
next[i][j].state = 1;
} else {
next[i][j].state = cell.state;
}
}
}
this.cells = next;
}
Grid.prototype.countNeighbours = function(x, y) {
let sum = 0;
for (let i = -1; i < 2; i++) {
for (let j = -1; j < 2; j++) {
const row = (x + i + this.rows) % this.rows;
const col = (y + j + this.cols) % this.cols;
sum += this.cells[row][col].state;
}
}
sum -= this.cells[x][y].state;
return sum;
}
const grid = new Grid(50, 50, 10);
grid.draw();
setInterval(() => {
grid.update();
grid.draw();
}, 1000);
