Game of life

The rules of game of life are simple:

The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, alive or dead, or "populated" or "unpopulated". Every cell interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:

Any live cell with fewer than two live neighbours dies, as if caused 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.
The initial pattern constitutes the seed of the system. The first generation is created by applying the above rules simultaneously to every cell in the seed—births and deaths occur simultaneously, and the discrete moment at which this happens is sometimes called a tick (in other words, each generation is a pure function of the preceding one). The rules continue to be applied repeatedly to create further generations.

(source wikipedia)

So if we break up the above rules we have this:

1) Grid

The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells

2) Cells

Each of which is in one of two possible states, alive or dead

3) Check Neigboors

Interaction with neighbours

check horizontally, vertically or diagonally
Any live cell with fewer than two live neighbours dies
Any live cell with two or three live neighbours lives
Any live cell with more than three live neighbours dies
Any dead cell with exactly three live neighbours becomes a live cell


4) The initial pattern constitutes the seed of the system.



Solution

1) We have to create a 2d array because the data associated with certain systems (a digital image, a board game, etc.) lives in two dimensions. To visualize this data, we need a multi-dimensional data structure, that is, a multi-dimensional array.

An example of a 2d array is the following:

function twodGrid(rows) {

var arr = [];
for (var i = 0; i < rows; i++) {

arr[i] = [];
}
return arr;
}

2) After that you have to draw a grid. I personally use this functions for drawning the grid AND the cells:

function drawGrid() {

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, 400, 400);

for (var i = 0; i < 400; i++) {

for (var j = 0; j < 400; j++) {
var randomIndex = Math.floor(Math.random() * textArray.length);
var randomElement = textArray[randomIndex];
arr[i][j] = randomElement;
if (arr[i][j] === "X") {
ctx.fillStyle = "#FF0000";
ctx.fillRect(i, j, 1, 1);
}
}
}
}



3) Finally we have to check for the neighbours.

We can do this if we check the cell's position in the two dimensional array.

The positions in the two dimensional array are presented like that:

array[i-1][j-1]
array[i-1][j]
array[i-1][j+1]

array[i][j-1]
array[i][j+1]

array[i+1][j-1]
array[i+1][j]
array[i+1][j+1]