JSFiddle - React, Tailwind, and code Playground
HTML
press space for start/pause
<div id="board">
<div class="line">
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
</div>
<div class="line">
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div class="cell" onclick="activate(this)"></div>
<div...
CSS
.cell{
width:20px;
height:20px;
float:left;
border:1px solid #aaa;
}
.line{
clear:both;
}
.active{
background-color:#000;
}
JavaScript
// Generated by LiveScript 1.2.0
(function(){
var stopped, change;
stopped = true;
document.body.onkeyup = function(e){
return e.keyCode === 32 && (stopped = !stopped);
};
change = function(div, a){
div.setAttribute('class', a && "cell active" || "cell");
return div.ac = a;
};
window.activate = function(div){
div.ac == null && (div.ac = false);
return change(div, !div.ac);
};
setInterval(function(){
var arr, newarr, res$, i$, to$, _, lresult$, j$, to1$, c, ref$, len$, i, ref1$, len1$, j, k$, ref2$, len2$, sx, l$, ref3$, len3$, sy, lresult1$, results$ = [];
if (!stopped) {
arr = document.getElementById("board").children;
res$ = [];
for (i$ = 0, to$ = arr.length - 1; i$ <= to$; ++i$) {
_ = i$;
lresult$ = [];
for (j$ = 0, to1$ = arr[0].children.length - 1; j$ <= to1$; ++j$) {
_ = j$;
lresult$.push(false);
}
res$.push(lresult$);
}
newarr = res$;
c = 0;
for (i$ = 0, len$ = (ref$ = (fn$())).length; i$ < len$; ++i$) {
i = ref$[i$];
for (j$ = 0, len1$ = (ref1$ = (fn1$())).length; j$ < len1$; ++j$) {
j = ref1$[j$];
for (k$ = 0, len2$ = (ref2$ = (fn2$())).length; k$ < len2$; ++k$) {
sx = ref2$[k$];
for (l$ = 0, len3$ = (ref3$ = (fn3$())).length; l$ < len3$; ++l$) {
sy = ref3$[l$];
if (!(sy === j && sx === i)) {
arr[(sx + 20) % 20].children[(sy + 25) % 25].ac && ++c;
}
}
}
(c === 3 || (c === 2 && arr[i].children[j].ac)) && (newarr[i][j] = true);
c = 0;
}
}
for (i$ = 0, len$ = (ref$ = (fn4$())).length; i$ < len$; ++i$) {
i = ref$[i$];
lresult1$ = [];
for (j$ = 0, len1$ = (ref1$ = (fn5$())).length; j$ < len1$; ++j$) {
j = ref1$[j$];
lresult1$.push(change(arr[i].children[j], newarr[i][j]));
}
...