JSFiddle - React, Tailwind, and code Playground
HTML
<body>
<canvas></canvas>
</body>
JavaScript
var Game_of_Life,
__bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
Game_of_Life = (function() {
function Game_of_Life(canvas, CELL_SIZE, BORAD_SIZE, FPS) {
this.CELL_SIZE = CELL_SIZE != null ? CELL_SIZE : 10;
this.BORAD_SIZE = BORAD_SIZE != null ? BORAD_SIZE : 100;
this.FPS = FPS != null ? FPS : 50;
this.n = __bind(this.n, this);
this.update = __bind(this.update, this);
this.timer;
this.memory = this.createMemory();
this.canvas = this.setupCanvas(canvas);
this.context = this.setupContext();
this.update();
}
Game_of_Life.prototype.setupCanvas = function(canvas) {
canvas.width = canvas.height = this.CELL_SIZE * this.BORAD_SIZE;
canvas.style.height = canvas.style.width = this.CELL_SIZE * this.BORAD_SIZE + "px";
return canvas;
};
Game_of_Life.prototype.setupContext = function() {
var context;
context = this.canvas.getContext('2d');
context.fillStyle = "rgb(0,0,0)";
return context;
};
Game_of_Life.prototype.setMemory = function(func) {
var memory, x, y, _i, _j, _ref, _ref1;
memory = Array();
for (x = _i = 0, _ref = this.BORAD_SIZE - 1; 0 <= _ref ? _i <= _ref : _i >= _ref; x = 0 <= _ref ? ++_i : --_i) {
memory[x] = Array();
for (y = _j = 0, _ref1 = this.BORAD_SIZE - 1; 0 <= _ref1 ? _j <= _ref1 : _j >= _ref1; y = 0 <= _ref1 ? ++_j : --_j) {
memory[x][y] = func(x, y);
}
}
return memory;
};
Game_of_Life.prototype.createMemory = function() {
return this.setMemory(function() {
return (Math.random() * 3 < 1) + 0;
});
};
Game_of_Life.prototype.nextMemory = function() {
var _this = this;
return this.setMemory(function(x, y) {
var state;
state = _this.checkState(x, y);
if (_this.memory[x][y] === 1 && (state === 2 || state === 3)) {
return 1;
} else if (_this.memory[x][y] === 0 && state === 3) {
return 1;
} else {
return 0;
...