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:
- Alive cell – Fewer than 2 alive neighbours – dies (underpopulation).
- Alive cell – 2 or 3 neighbours – continues to live (perfect situation).
- Alive cell – More than 3 alive neighbours – dies (overpopulation).
- 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 =).
Here’s my version, in just 238b of HTML & JS:
http://xem.github.io/miniGameOfLife/
Love.
With regards to a pure-CSS version:
SASS being Turing complete is unrelated to the problem, because browsers don’t use the SASS–they use the CSS that SASS is compiled into. The question should be, “Is CSS Turing complete?”
A quick check of Stack Overflow brings conflicting answers. The top answer shows a way to embed Rule 110 in CSS, but, as one comment points out, CSS has trouble doing more than one iteration. CSS gets evaluated once, and is then done.
My (internet-formed) opinion is that CSS may be Turing complete, BUT unless you can think up a way around the iteration problem, there isn’t a way to make a “real” Game of Life.
But that doesn’t mean you can’t try! Go ahead, prove me wrong! I’d love to see it! (Plus my internet-formed opinion is very likely to be wrong:-)
Actually less.js and it’s modifyVars function kinda works around the iteration problem with minimal help from js. BRB I’m gonna build this.
I made a library a while back to lower the bar for creating simulations like this. Check it out if you’re interested :)
Why not spice up your life with some Category Theory? Because, after all,
“evaluating cellular automata is comonadic” http://blog.sigfpe.com/2006/12/evaluating-cellular-automata-is.html
Just seen this, I’m proud you showcased my code! :-D Great post
Great read, thanks!
It turns out, it was my first program too… in Basic on an IBM PC back in 1984 :) #ouch
Dear Chris,
Can I have the past three hours of my life back? Presenting…
CSS Game of Life
(single generation)
I’ve always had a soft spot for the Game of Life, but this was an exercise in absurdity. However, I did teach myself how to use loops and variables in SCSS and Jade, so it wasn’t totally wasted time.
For those interested in the CompSci theory of it, the reason it’s only one generation is that the Game of Life is a self-sustaining simulation based on changes to its internal state. CSS can only react to state changes caused by the user, not change it’s own state (you can’t write a selector that selects elements based on previous style changes). So you can’t use the first generation’s logic to change the state, and then use the same logic again for subsequent generations; you’d need to calculate rules all possible outcomes based on the initial state.
For example, to create a two-generation system you’d need to factor in all possible states of a cell’s neighbours’ neighbours, and then create appropriate keyframes animations to display the changes. And my single generation 20*20 demo already has enough rules to seriously slow down the browser… Checkbox hacks would be so much easier if there was some way to synch the
nvalues when using multiplenth-of-typeselectors in a single CSS rule.Uhm. WOW. Thanks for exploring this. It interesting that even if you can’t iterate past the first round, CSS does have the tools for evaluating all the neighbors.
Hi Amelia,
I’m not sure if you get emailed replies, but check out my long comment on this thread. I think I have a solution for turn-taking. It’s clearly css trickery, but I did avoid bailing to JS :D. I haven’t solved the actual game part though, so perhaps, we can put these together.
@Chris: Yes, figuring out the neighbours was tricky. I went down a couple dead ends (e.g., radio button groups) before I realized that I had to move all the checkboxes ahead of the entire table so that cells could affect neighbours that were ahead of them in the rendering order.
@Rob: Interesting ideas, but I still don’t think you can get past the one-way nature of CSS effects: you can use CSS on the outer frame to change the width of the iframe, and then use media queries to react to that, but you can’t currently affect the parent frame with CSS in the iframe. It’s possible that the complex CSS rules in the WebComponents proposals might make that sort of loop feasible. I haven’t yet figured out how to use all those rules as they are intended, let alone how to abuse them to turn CSS into a complete programming language!
Great Thanks
I first came across it in an Amstrad 8256 PCW word processor which also had CP/M bundled with it, and you brought up the Game of Life with a key combination that I forget….great article!
I have a version I created for JS1k which builds a random “landscape” and then uses Game of Life rules for the “fire” that burns it: http://js1k.com/2014-dragons/demo/1709
I made a Sudoku checker in pure CSS needs some JS to write the values to an attribute.
The most immediate problem that I see, with a CSS game of life is continuing the game. It’s tempting to want to bail out to a JS to trigger the turns.
Animations have steps, but they are finite. However, they can be looped, so there’s potential. Another fun fact, is that not all properties can be changed atomicly, in particular, height/width/margin/padding all effect layout which could theoretically be used as a trigger mechanism. We don’t have many listeners in CSS, but we’ve got a few :hover/:active rely on the user, but Media Queries are an interesting option because they rely on our friend
width. Now, it’s well known that we don’t have Element Queries (boo!), but we do have Iframes which act like an Element Query (Re-posting my comment was half-eaten after an Emoji character.
The most immediate problem that I see, with a CSS game of life is continuing the game. It’s tempting to want to bail out to a JS to trigger the turns.
Animations have steps, but they are finite. However, they can be looped, so there’s potential. Another fun fact, is that not all properties can be changed atomicly, in particular, height/width/margin/padding all effect layout which could theoretically be used as a trigger mechanism. We don’t have many listeners in CSS, but we’ve got a few :hover/:active rely on the user, but Media Queries are an interesting option because they rely on our friend
width. Now, it’s well known that we don’t have Element Queries (boo!), but we do have Iframes which act like an Element Query :smiling_imp:.Theoretically, we can put these facts together. We can animate the iframe’s width from small to big in a loop. Then in the child frame, we can apply our turn taking step in a media query.
Now to actually play the game, I see that Amelia B R in the comments above has a partial solution, so perhaps we can adapt that.
Note: Iframe’s are sometimes buggy with css3 animation/transition, but that’s okay, we’ll just set iframe width=100% and use a container.
Oh, man! I’ve always wanted to write this up in CSS, but have always been too afraid to.
This is my take on it using and splitting the map up in chunks to reduce the time it takes to calculate each generation on large maps (warning:im not a designer)
http://hermann.is/conway/
Thank you! Great read! I never forget the C64 Games from commodore ;))).
My approach, just Sass producing CSS animations:
One more example life game +huge set of interesting patterns. Enjoy :-)
I recall on an old Windows 98(?) computer there was a version of the Game of Life that had an actual competitive “Game” in it.
A set number of “living” cells were colored red.
Red cells can interact with blue cells in the same way.
The goal was to use logic to eliminate all the red cells, leaving only blue cells, in a set number of turns.
If you won, you got a digital Nobel Prize.
That’d be interesting to see implemented in JS.