Conway’s game of life is a zero players game. It is played on a rectangular grid where each box is know as cell. A Cell can be alive or dead depending on its neighbours or initial configuration of the grid. It only needs an initial configuration and then the cells on the grid evolves on their own.

Demo

Rules Of Conway’s Game Of Life

Conway’s game of life has only 4 rule:

Any live cell with fewer than two live neighbours dies, as if caused by under-population.
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 over-population.
Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

Implementation

I have implemented this game in JavaScript, Html and Css. The code is available on github. To implement this game you will need below things.

Create a grid which will represent your cells.
A Cell can be dead or alive. So have two css classes, one for alive and one for dead.
Figure out neighbours of a cell.
Apply above rules and figure out if the cell will be alive or dead for the next generation.
Store the cells which needs to be moved to next generation.
Store the cells which will not survive or will die in next generation.
Iterate over the list of cells moving to next generation, and mark them as alive by adding alive css class to them.
Iterate over the list of cells which will die in next generation and mark them as dead by adding dead css class to them.
Run the steps from 3-8 all over again after a small time interval.

Source Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
$(document).ready(function(){
  var Grid = function(size) {
    this.size = size;

    this.draw = function() {
      for (var i=0; i < size; i++) {
        $('.grid').append("<div class='col" + i + "'></div>")
        for (var j=0; j < size; j++) {
          $(".col" + i).append("<span class='cell dead'></span>")
        }
      }
    }
  }

  var Cell = function(row, col) {
    this.row = row;
    this.col = col;

    var cell = function() {
      return $($('.col' + col).children()[row]);
    }

    this.isAlive = function() {
      return cell().hasClass('alive');
    }

    this.isDead = function() {
      return cell().hasClass('dead');
    }

    this.isOnGrid = function() {
      return $('.col' + col).children()[row] !== undefined;
    }

    this.bringToLife = function() {
      cell().removeClass('dead');
      cell().addClass('alive');
    }

    this.kill = function() {
      cell().removeClass('alive');
      cell().addClass('dead');
    }

    this.neibhours = function() {
      var rows = [row-1, row, row+1];
      var cols = [col-1, col, col+1];
      neibhourCells = [];

      for(var i=0; i < rows.length; i++) {
        for(var j=0; j < cols.length; j++) {
          if(!(col === cols[j] && row === rows[i])) {
            var cell = new Cell(rows[i], cols[j])
            if(cell.isOnGrid()) {
              neibhourCells.push(cell);
            }
          }
        }
      }

      return neibhourCells;
    }
  }

  var Cells = function(cells) {
    this.cells = cells;

    this.aliveCells = function() {
      return this.cells.filter(function(cell) {
        return cell.isAlive();
      });
    }

    this.killAll = function() {
      $.each(cells, function(index, cell){
        cell.kill();
      });
    }

    this.bringAllToLife = function() {
      $.each(cells, function(index, cell){
        cell.bringToLife();
      });
    }
  }

  var cellsMovingToNextGen = []
  var cellsToKill = []

  var play =function(){
    for(var j=0; j < grid.size; j++){
      for(var i=0; i < grid.size; i++) {
        var cell = new Cell(j, i);
        var aliveCells = new Cells(cell.neibhours()).aliveCells().length;

        if(cell.isAlive() && (aliveCells < 2 || aliveCells > 3)) {
          cellsToKill.push(cell)
        } else if(cell.isDead() && aliveCells === 3) {
          cellsMovingToNextGen.push(cell)
        }
      }
    }

    new Cells(cellsToKill).killAll();
    new Cells(cellsMovingToNextGen).bringAllToLife();
    cellsMovingToNextGen = []
    cellsToKill = []
  }

  var grid = new Grid(40);
  grid.draw();

  $('.cell.dead').click(function(e) {
    $(this).addClass('alive');
    $(this).removeClass('dead');
  });

  $('.start-game').click(function(e) {
    setInterval(play, 200);
  });
})();

Thats all folks, enjoy the game :)