The Game of Life

CSS-Tricks

The Game of Life

It's not really a "game" - but more like a set of rules by mathematician John Horton Conway. Imagine a grid of cells, like a spreadsheet or a <table>. Each cell is either alive or dead. "Rounds" pass one by one. In each round, there are rules on whether a live cell should continue to live or die, and if a dead cell should continue to be dead or become alive.

The Rules

It's sort of meant to replicate a real life environment. Cells can die either by underpopulation or overpopulation, and only live in perfect situations. The rules are pretty simple:

1. Alive cell - Fewer than 2 alive neighbours - dies (underpopulation).


2. Alive cell - 2 or 3 neighbours - continues to live (perfect situation).


3. Alive cell - More than 3 alive neighbours - dies (overpopulation).


4. Dead cell - Exactly three alive neighbours - becomes alive (reproduction).

Why are you talking about this?

I feel wicked nostalgic about it. A visual version of The Game of Life was the first programming project I ever did in High School. Or if not the first, the first one where I had an "Ah ha!" moment and realized programming and design could be super fun and interesting.

Give the problem to any programmer and they will likely solve it in a slightly different way.

• What language should it be written in?


• How do we architect it cleanly?


• How can we make it computationally fast?


• How big can we make it before it slows down?


• How do we best store the data and states?


• How are edges handled?

Give the problem to any designer and the results will look different.

• What colors make sense?


• Should we have different colors for states beyond alive and dead?


• How big should the cells be to be interesting?


• How fast should the rounds be to be interesting without being overwhelming?


• Can you interact with it?


• Can you go forward and backward in time?


• How do you turn on and off cells? Clicking? Dragging? Randomization?


• What are the most interesting shapes that can be made? Can we showcase those?

I also bring this up because I remember trying to make a demo a few years ago that was so awful that I'm jealous of all the cool ones. I basically used jQuery to query the DOM for neighbors of every single cell and it was so inefficient I probably should have been beaten with an antenna.

Examples

My first version was in Turbo Pascal on an old Apple. It brings me great pleasure to know that this little visual mathematical exercise is alive and well today, and people are using a tool I built to make versions. Even amongst demos that use the same technology, the approach can be different! I also have a collection.

JavaScript on Canvas

With a hint of jQuery:

See the Pen Conway's Game of Life by John H Moore (@john-h-moore) on CodePen.

Without:

See the Pen Game of Life by Qbit (@Qbit42) on CodePen.

See the Pen Game of Life on Canvas by Dennis Kerzig (@wottpal) on CodePen.

JavaScript on a <table>

See the Pen payKn by Alan R. Soares (@alanrsoares) on CodePen.

Backbone.js

See the Pen Conway's Game of Life in Backbone by Eric Miller (@SimpleAsCouldBe) on CodePen.

Using CSS box-shadow to draw cells

See the Pen box-shadow game of life by Joris van de Donk (@jorisvddonk) on CodePen.

In CoffeeScript

See the Pen mctCv by Hanganu Petru-Alin (@Lynku) on CodePen.

In D3.js

Fast!

See the Pen Game of Life - D3 by Reed Spool (@reedspool) on CodePen.

---

These are just front-end examples, but you can easily find examples in any language. Check out Golly for native app versions and the Wikipedia page for more information. One particularly interesting thing about The Game of Life is that all kinds of weird structures are possible that kind of "create life" or sustain it in weird ways.

One thing I've never seen is a Pure CSS version. Is it even possible? It would be wicked complicated with weird positioning and complex selectors. But they say Sass is "Turing Complete" so that means it's possible right? Or are other limitations at play there?

I'd be interested to see any more weird front end examples of The Game of Life. Or any stories you have about it from your past =).

---

The Game of Life is a post from CSS-Tricks

more info...