Skip to content

Instantly share code, notes, and snippets.

@Alexei-B Alexei-B/LICENSE.txt forked from aemkei/LICENSE.txt
Last active Jan 9, 2016

Embed
What would you like to do?
Game of Life - 140byt.es

Game of Life - 140byt.es

An implementation of Conway's Game of Life in only 90 bytes of JavaScript.

See the demo: http://output.jsbin.com/zebuxi

Usage

life (
  input,  // input array
  target, // target array
  width   // width of stage
)

Author

For more information

See the 140byt.es site for a showcase of entries (built itself using 140-byte entries!), and follow @140bytes on Twitter.

( // Using ECMA6 arrow functions. IE, Safari & Opera probably won't work.
a, // array of old state
b, // array to fill with new state
c, // width of stage
d // placeholder
)=> // No {} braces are nessessary due to single statement.
a.map( // Map this function over the whole old state.
(
e, // placeholder
f // linear index of cell
)=>{
for(
d = 9, // Start our neighborhood walk at 9.
e = 0; // Start sum of neighbors at 0.
d--; // Walk backwards until and including 0.
b[f] = // Set cell after loop execution (only the last loop matters).
e == 3 | // The sum includes self so the rules change a bit, any rusult of 3 or,
e == 4 & // a result of 4 and,
a[f] // self is true results in an alive cell, otherwise dead.
)
e += // each loop accumulate to sum
~~a[ // Index old state and return 0 if undefined.
f + // Index plus,
d%3 - 1 + // convert linear walk value to horizontal component plus,
~~( // round down,
d/3 // walk converted to vertical component,
)*c - c // and scale to width.
]
}
)
(a,b,c,d)=>a.map((e,f)=>{for(d=9,e=0;d--;b[f]=e==3|e==4&a[f])e+=~~a[f+d%3-1+~~(d/3)*c-c]})
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
Version 2, December 2004
Copyright (C) 2015 Alexei Barnes <http://alexeibarnes.com>
Everyone is permitted to copy and distribute verbatim or modified
copies of this license document, and changing it is allowed as long
as the name is changed.
DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
0. You just DO WHAT THE FUCK YOU WANT TO.
{
"name": "gameOfLife",
"description": "Even Smaller ECMA6 Implementation of Conway's Game of Live.",
"keywords": [
"ecma6",
"game",
"life",
"cellular",
"automaton"
]
}
<!DOCTYPE html>
<head>
<title>Game of Life</title>
<style type="text/css" media="screen">
#stage {
display: inline-block;
line-height:12px;
}
#stage div{
display: block;
float: left;
width: 10px;
height: 10px;
margin: 1px 1px 0 0;
background-color: #EEE;
}
#stage div.alive {
background-color: #000;
}
</style>
</head>
<body>
<div id="stage"></div>
<script>
var game = (a,b,c,d)=>a.map((e,f)=>{for(d=9,e=0;d--;b[f]=e==3|e==4&a[f])e+=~~a[f+d%3-1+~~(d/3)*c-c]});
var width = 32;
var height = 32;
var fields = [new Array(width * height), new Array(width * height)];
var elems = [];
var target = 0;
var stage;
function init() {
stage = document.getElementById("stage");
for (var y = 0; y < height; ++y) {
for (var x = 0; x < width; ++x) {
elems[elems.length] = document.createElement("div");
stage.appendChild(elems[elems.length - 1]);
}
stage.appendChild(document.createElement("br"));
}
fields[0].fill(0);
fields[1].fill(0);
setInterval(run, 50);
document.addEventListener('mousemove', brush, true);
}
function run() {
for (var i = 0; i < width * height; ++i) elems[i].className = fields[target][i] ? "alive" : "";
game(fields[target], fields[1 - target], width);
target = 1 - target;
}
function brush(e) {
var rect = stage.getBoundingClientRect();
var x = Math.floor((e.clientX - rect.left) / (rect.width / width));
var y = Math.floor((e.clientY - rect.top) / (rect.height / height));
if (x >= 0 && y >= 0 && x < width && y < height)
fields[target][x + y * width] = 1;
}
init();
</script>
</body>
@Alexei-B

This comment has been minimized.

Copy link
Owner Author

commented Aug 12, 2015

Worked on the classic game of life and got a 92 byte result with the same functionality as previous iterations, as well as a 118 byte result with wrapping issues fixed, which can be seen here: http://output.jsbin.com/zebuxi

(a,b,c,d)=>{a.map((e,f)=>{for(d=9,e=0;d--;b[f]=e==3|e==4&a[f])e+=f%c|d%3&&(f+1)%c|(d+1)%3&&~~a[f+d%3-1+~~(d/3)*c-c]})}

I decided to use arrow functions when I noticed they were implemented on chrome and firefox, which saved quite a few bytes in combination with Array.prototype.map. I also implemented a flattened walk loop instead of a precalculated walk as most other implementations I've seen, which saved bytes even without the arrow functions.

I encourage you to check out the javascript as I wrote it because I left a history of changes by copy pasting into a new line every iteration: http://jsbin.com/zebuxi/edit?js

Thanks to @aemkei I've really enjoyed reading the code you've written for 140bytes and on your website, a real inspiration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.