JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
    <body>
        
    </body>

JavaScript

var canvas = $('<canvas/>').appendTo('body');
var context = canvas.get(0).getContext("2d");
var padding = 10;
var config = {
    cellsPerSide: 50,
    cellSize: 15,
    fps: 800
};

var randomInteger = function(min, max) {
    return Math.floor(min + Math.random() * (max + 1 - min));
};

var EnergyBar = function(x, y) {
    this.x = x;
    this.y = y;
};

EnergyBar.prototype = {
    remove: function() {
        this.x = -100;
        this.y = -100;
    }
};

var bars = [new EnergyBar(0, 0), new EnergyBar(config.cellSize * config.cellsPerSide - config.cellSize, config.cellSize)];

var isEnergyBarHere = function(x, y) {
    var i = 0;
    var currentBar;
    var res;

    for (i = 0; i < bars.length; i++) {
        currentBar = bars[i];
        if (currentBar.x === x && currentBar.y === y) {
            res = currentBar;
            return true;
        }
    }

    return false;
};

var getEnerbyBar = function(x, y) {
    var i = 0;
    var currentBar;
    var res;

    for (i = 0; i < bars.length; i++) {
        currentBar = bars[i];
        if (currentBar.x === x && currentBar.y === y) {
            res = currentBar;
        }
    }

    return res;
};

var Nucleotide = function(kernel) {
    this.kernel = kernel;
};

Nucleotide.prototype = {
    kernel: null,
    set: function() {
        this.args = arguments;
        return this;
    }
};

var regulatoryTypes = {
    stop: 0,
    repeater: 1,
    gt: 2
};

var nucleotides = {
    move: function() {
        return new Nucleotide({
            action: function() {
                var distinationPoint;
                var outOfWorld;
                var key;
                var pathCell;

                switch (this.args[0]) {
                    // up
                    case 0:
                        key = 'y';
                        distinationPoint = this.host[key] - config.cellSize
                        break;
                    // down
                    case 1:
                        key = 'y'
   ...