JSFiddle - React, Tailwind, and code Playground

by Joshua_David

HTML

<canvas id = "Life" height = '100px' width = '100px' />

CSS

#Life
{
    height:500px;
    width:500px;
}

JavaScript

var canvas = document.getElementById('Life');
var grid = canvas.getContext('2d');
var data = new Array(canvas.height);
var next = new Array(canvas.height);
for(var row = 0; row < data.length; row++) {
    data[row] = new Array(canvas.width);
    next[row] = new Array(canvas.width);
    for(var col = 0; col < data[row].length; col++) data[row][col] = false;
    for(var col = 0; col < data[row].length; col++) next[row][col] = false;
}
grid.cell = function(x, y, on) {
    if(typeof on == 'undefined') return data[y][x];
    grid.fillStyle = on?'#000':'#fff';
    grid.fillRect(x, y, 1, 1);
    data[y][x] = on;
    return data[y][x];
};
grid.cellNext = function(x, y) {
    var n = grid.cell(x-1,y-1) + grid.cell(x,y-1) + grid.cell(x+1,y-1) + grid.cell(x-1,y) + grid.cell(x+1,y) + grid.cell(x-1,y+1) + grid.cell(x,y+1) + grid.cell(x+1,y+1);
    var thisnext;
    switch(n) {
        case  3: next[y][x] = thisnext = true; break;
        case  2: next[y][x] = thisnext = data[y][x]; break;
        default: next[y][x] = thisnext = false; break;
    }
    return thisnext;
};
grid.randomize = function() {
    for(var row = 1; row < data.length - 1; row++) {
        for(var col = 1; col < data[row].length-1; col++) {
            grid.cell(col, row, (Math.random()<0.5));
        }
    }
    return;
};
grid.next = function() {
    grid.clearRect(0,0,canvas.width, canvas.height);
    for(var row = 1; row < data.length - 1; row++) {
        for(var col = 1; col < data[row].length -1; col++) {
            grid.cellNext(col, row);
        }
    }
    for(var row = 1; row < data.length - 1; row++) {
        for(var col = 1; col < data[row].length -1; col++) {
            grid.cell(col, row, next[row][col]);
        }
    }
    return;
};
var x = 1; var y = 1;
grid.randomize();
function draw() {
   grid.next();
   return;
}
setInterval(draw, 20);