DJ Quilter

Front-End Developer

ES2015 and Zombies

The Codepen below is an implementation of Conway’s Game of Life written using some of the new features available in ES2015. With zombies – because zombie make things 42% more fun (there’s no real proof for this, but I consider it is scientific fact).

See the Pen Conway’s Game of Life with Zombies by David Quilter (@dquizzle) on CodePen.

Conway’s Game of Life is a grid of elements, each of which has a state (either dead or alive). After a set amount of time (a generation), these elements may or may not change state, depending on the number of its neighbours that are dead or alive. You can look to Wikipedia for a more detailed explanation.

A single zombie is added here after the third generation, which proceeds to eat a live neighbour, turning it into a zombie. And so on and so forth.

ES2015

The Codepen uses a few of the new features that come with ES2015.

Firstly, each element is represented in the application by a class (which I called Atom). Classes are very similar to Objects, with their own functions and properties. The main difference I noticed was the constructor function, which is basically an automatic init.

In places, I also used the let statement, which is like a var, but declared for a particular block scope. In this case I used it to define a value in different blocks of an if statement.

And finally, I used for arrow functions in one of the methods in the class. This allowed me to reference the particular Atom as a context when otherwise it would be the window Object. You can find out more about context and arrow functions in another of my posts, Context in Javascript.