Game of Life in JavaScript ¶

Conway’s Game of Life is a zero player game with 4 simple rules (this is verbatim from the Wikipedia article):

1. Any live cell with less than two live neighbours dies, as if caused by under-population.
2. Any live cell with two or three live neighbours lives on to the next generation.
3. Any live cell with more than three live neighbours dies, as if by overcrowding.
4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

My game of life is heavily derived from an IBM DeveloperWorks post, Conway’s Game of Life in CoffeeScript and canvas, except that I just used plain ol’ JavaScript, a much smaller grid, and I included some functionality to reset the game seed if the last two evolutions of life don’t change the grid layout.

Dynamic Favicons ¶

After creating the game loop in JavaScript, I had to create some code to dynamically update the favicon.

First, I created the default favicon for this site by rendering out a glider via JavaScript and rendering the canvas as a png on the page.

GameOfLife.prototype.glider = [
  {x: 0, y: 1}
 ,{x: 1, y: 2}
 ,{x: 2, y: 0}
 ,{x: 2, y: 1}
 ,{x: 2, y: 2}
]

/* ... */

/**
 * Seed with default of glider
 */
GameOfLife.prototype.seed = function() {
  var i, j, rowLen, colLen, row, col, gliderLen

  // Start with all empty
  for(i = row = 0, rowLen = this.numberOfRows; i < rowLen; row = ++i) {
    this.curCellGen[row] = []
    for(j = col = 0, colLen = this.numberOfCols; j < colLen; col = ++j) {
      this.curCellGen[row][col] = this.createCell(false, row, col)
    }
  }

  // Create glider
  for(i = 0, gliderLen = this.glider.length; i < gliderLen; i++) {
    var x, y

    x = this.glider[i].x
    y = this.glider[i].y

    this.curCellGen[x][y] = this.createCell(true, x, y)
  }
}

GameOfLife.prototype.drawGrid = function() {
  var img = document.createElement('img')
  img.src = this.canvas.toDataURL('img/png')
}

After rendering as a png in the browser, I saved the .png to my computer. Then I uploaded the png to favicon-generator.org saving the resulting .ico to my site’s directory root as favicon.ico. favicon.ico is what gets rendered in IE, since IE has found brand new ways to be non-compliant with emerging standards (le sigh).

The finishing touch is to make the GameOfLife.prototype.drawGrid function update my favicon’s href attribute on every tick function call:

GameOfLife.prototype.createCanvas = function() {
  this.canvas = document.createElement('canvas')
  this.favicon = document.createElement('link')
  this.favicon.rel = 'icon'
  document.getElementsByTagName('head')[0].appendChild(link)
}


GameOfLife.prototype.drawGrid = function() {
  /* ... */
  this.favicon.href = this.canvas.toDataURL('img/png')
}

The entirety of this javascript is available under the GPLv3 License on my github.