JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div class="board"></div>

CSS

.board { width: 32px; height: 32px; }

JavaScript

/**
 * Rules:
 * 1. Each cell with zero or one neighbour will die.
 * 2. Each cell with more than three neighbours will die.
 * 3. Each cell with two or three neighbours will survive.
 */
(function($) {
    $.fn.gameOfLife = function(options) {
        var settings = $.extend({
            cellSize : 1
        }, options);
        
        function initBoard(x, y) {
            var board = new Array(y);
            for (var idx_y = 0; idx_y < y; idx_y++) {
                board[idx_y] = new Array(x);
                for (var idx_x = 0; idx_x < x; idx_x++) {
                    board[idx_y][idx_x] = 0;
                }
            }
            return board;
        };
        
        return this.each(function() {
            var board = (settings.board === undefined ? initBoard($(this).width(), $(this).height()) : settings.board);
            
            console.log(board);
        });
    };
})(jQuery);
$(function() {
    $('.board').gameOfLife();
});