Writing the Game of life in Lightning Web Components
By: Yuval Vardi
Tags: JavaScript, Lightning Web Component

I’ve seen many implementations of this Algorithm or “Game” in almost any language or platform out there. I have not seen yet, someone implementing this on Salesforce LWC. I’m pretty sure someone might have tried that before me, But I thought to myself.. “Self..maybe you should write one and see what you can learn from this…”

While this won’t have much business logic baked into it, like most of the stuff we typically build in Salesforce, it definitely shows a few interesting Javascript techniques and has helped me grasp more of an understanding in how to deal with 2 dimensional Grids (Array of arrays) and pick up some html5 canvas drawings skills along the way.

It shouldn’t be too different than any other JavaScript implementation, but it does always makes me happy when I manage to translate something from the open web and make it work inside my day to day platform or stack and in same time it really satisfy me, when I can simplify a complex concept into words or in this case a game.

In addition, I’ve recently heard that John Horton Conway, the inventor of this amazing algorithm, has recently passed away from COVID-19, so I thought this can be a nice tribute for him as well.

In the 1970's, he explored or even helped create the field of Cellular automaton. In short, this is where scientists were literally observing a grid of cells in any finite number of dimensions.

For each cell, There is a set of cells called its neighbourhood — Those are the cells surrounding a certain cell.

— Those are the cells surrounding a certain cell. Time starts when the Grid is set to a certain initial state – Zero or One on each cell.

Then, we can observe the evolution of the grid, certain cells and/or their neighbourhoods.

The “Rules of life” will determine the next generation state for each cell – Alive or Dead / Zero or One.

This concept resembles and even illustrates the rise and fall of any living organisms or society based on population.

Evolution is determined by its initial state…

Quite deep. But the Game of Life logic can have infinite implementation and implications.

It runs on this basic, but quite a clever algorithm or if you wish, a “Set of Rules”:

Any live cell with fewer than two live neighbours dies, as if by underpopulation.

Any live cell with two or three live neighbours lives on to the next generation.

Any live cell with more than three live neighbours dies, as if by overpopulation.

Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

Basically when implementing those rules in an infinite loop over a 2 dimensional array – Some shapes literally get a “Life” of their own..

Many different types of patterns were discovered that can occur in the Game of Life. They even gave them names :

still life : do not change between generations.

Block

oscillators : which returns to their initial state after a few generations.

Blinker

spaceships : translate themselves across the grid.

Glider

Theoretically, the Game of Life has the power of a universal Turing machine – anything that can be computed algorithmically can be computed within the Game of Life.

I was quite intrigued by this concept...

But enough background stories, everything you need or want to learn more about, a quick google search will lead your path to many more genius discoveries.

Let’s get cracking and try to build this algorithm in LWC and see this thing in action.

Find here the full playground code for this project.

Code Playground – Full Working Example

But if you wish to see the breakdown step by step — keep on reading.