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

No Comments
Comments to: The Game of Life

Recent Articles

Good Reads

Worlwide

Overview VipsPM – Project Management Suite is a Powerful web-based Application. VipsPM is a perfect tool to fulfill all your project management needs like managing Projects, Tasks, Defects, Incidents, Timesheets, Meetings, Appointments, Files, Documents, Users, Clients, Departments, ToDos, Project Planning, Holidays and Reports. It has simple yet efficient layout will make managing projects easier than […]

Trending

Turquoise Jewelry is one of the ancient healing stones used for personal adornment and astrological benefits. The rare greenish blue-colored pectolite is celebrated for its enchanting powers among many crystal lovers. It is a hydrated phosphate of copper and aluminum that ranks 5 to 6 on the Mohs hardness scale. It is deemed a protective […]
Singapore is recognised globally as a prime destination for foreign investors. Its business structure is well-developed, and its tax system is favourable to business owners. The government has a strong support system for entrepreneurs and provides legal protection for intellectual property rights. All of these conditions create an environment that is ideal for Singapore company […]
2020 has been a year that represents aggressive and sustained volatility with a confluence of unexpected situations, including economic shifts and market disturbance confluence. The COVID-19 pandemic forces businesses to adjust their methods of operations to ensure survival. These adjustments become the trajectory and guidance of what 2021 should look like and what companies should […]
COVID-19 pandemic has affected Thailand’s economy and labor market. World Bank’s Thailand Economic Monitor predicted that it would take Thailand over two years to return to its pre-COVID-19 growth and domestic product output levels. Although the country has successfully curbed the pandemic tide over the last few months, the economy remains severely hit. Nevertheless, heavily […]