Conway’s “Game of Life”

Key Takeaways

• Conway’s “Game of Life” is a life-form simulation that traditionally served as an essential practice for budding programmers, but can now be implemented using modern programming languages in a browser-based environment.
• The game operates on a grid of cells, with each cell either being on or off (populated or empty), and the propagation rules dictate the state of each cell based on its neighboring cells, leading to various possible outcomes including extinction, steady state population, oscillating population, and open-ended population change.
• Using HTML, CSS, and JavaScript, a minimalist version of the game can be created and displayed in a browser, with the user interface consisting of a canvas element to display the grid and a button to generate the next generation.

Many years ago, when first learning to program, I was fascinated by John Conway’s life-form simulation “Game of Life”. Over the years there have been many variants, written in different languages, on a multitude of platforms. Whatever the language chosen, coding ones own version of Game of Life was a rite of passage for any budding programmer. That’s what I propose to demonstrate in this article.

However, with today’s ubiquitous presence of the browser and associated programming languages, we can dispense with the traditional coding environments and languages. Instead we can learn some logic coding and array handling by writing a version of Game of Life to run in a browser.

The Game Board

The game board consists of a grid of cells. Each cell can be logically on or off, meaning a life-form is present in that cell or the cell is empty. The grid can be any size we choose, but typically a 10 x 10 grid is the starting point for beginners.

Also, we will start with a pre-determined grid, or seed generation, rather than enter one using mouse or keyboard input. The following grid shows the seed generation we will use, which will result in an oscillating population in just eleven generations.

Rules of Propagation

The rules of propagation can be made as complex as you like, but in this minimalist implementation of the game we’ll be using the simplest of rules:

• If a cell is empty and there are exactly three neighbors, populate the cell.
• If a cell is populated and there are fewer than two or greater than three neighbors, empty the cell.

It’s that simple.

adjacent = countAdjacent(i, j);

switch (generationThis[i][j]) {

  case 0:

       if ( (adjacent == 3) ) {

         generationNext[i][j] = 1;

       }

       break;

  case 1:

       if ( (adjacent == 2) || (adjacent == 3) ) {

         generationNext[i][j] = 1;

       }

}

An additional aspect of simplicity for this demo is to have just one life-form. More than one life-form, each with its own color, would make for a very interesting simulation, but would make the increase in complexity of the coding unsuitable for this demo.

Generations

There is a range of possible outcomes from this life-form simulation:

• Extinction.
• Steady state population.
• Oscillating population.
• Open-ended population change.

All but the last of these can be trapped using JavaScript by inspecting the arrays used to store the generation data. An easy way to achieve this is to store three successive generations in their own arrays. Then after each new generation is calculated, compare the arrays looking for these three states.

• If the new generation is completely empty, the life-form is extinct.
• If adjacent generations are identical, the population is steady.
• If the next and previous generations are identical, the population is oscillating.

That’s the basics of the logic required, so now let’s think about how to display the game board in a browser.

User Interface

HTML, CSS and JavaScript are all that’s required for the Game of Life. This example uses the CANVAS element to display the grid. A grid of DIV elements could equally be used, as could a TABLE, but let’s bring Game of Life up to date by the use of HTML5 and CSS3.

All that’s needed for the game board is a canvas element and a button to cause the next generation to be calculated.

<form>
<p>Generation: <span id="generation"></span> &nbsp; <span id="status"></span></p>
<canvas id="gameboard"></canvas>
<input type="button" value="generate next" id="btnNext">
</form>

The seed generation can be calculated once the page has loaded, after which each button press will progress the game to the next generation. As an alternative to using a button, the calculation of each successive generation could be automated by the use of JavaScript’s setTimeout() function. This, however, is better left until we’re sure the code is functioning correctly and we know we can trap the three generation states listed above.

<script src="gameoflife.js"></script>
<script>
$(document).ready(function() {
  seedGeneration();
  $("#btnNext").click(function(){
    nextGeneration();
    checkStatus();
    copyGrids();
    drawGeneration();
  });
});
</script>

And that is all that’s needed for a minimalist implementation of Game of Life in a browser. The full code for this article, which includes the gameoflife.js file, is available for download.

An improvement to the interface would be to provide interactive user input to set the cells for the seed generation, but that’s beyond the scope of this demo.

Further Reading

dmoz open directory project’s Game of Life
Game of Life news

Summary

In this article we have covered the essential elements of writing a browser-based version of John Conway’s “Game of Life”. Using nothing more than HTML, CSS and JavaScript, we have seen how to create a simple simulation that runs natively in a browser, a simulation that traditionally was written in languages such as BASIC and Pascal.

Frequently Asked Questions (FAQs) about Conway’s Game of Life