生命遊戲，數學家John Conway發明的一個遊戲，又稱康威生命演化，生命棋，細胞自動機。

康威有許多好玩有趣的發明，最廣為人知的一個是外觀數列（Look-and-Say），這裡不多說，另一個就是生命遊戲（Game-of-Life）。

關於康威，摘錄一段Wikipedia的敘述:

約翰·何頓·康威（John Horton Conway，1937年12月26日－），生於英國利物浦，數學家，活躍於有限群的研究、趣味數學、紐結理論、數論、組合博弈論和編碼學等範疇。
康威年少時就對數學很有強烈的興趣：四歲時，其母發現他背誦二的次方；十一歲時，升讀中學的面試，被問及他成長後想幹甚麼，他回答想在劍橋當數學家。後來康威果然於劍橋大學修讀數學，現時為普林斯頓大學的教授。

生命遊戲模擬的是二維平面上生命的演化過程。

規則很簡單：每個細胞有兩種狀態--存活或死亡，每個細胞與以自身為中心的周圍八格細胞產生互動。

1. 如果一個活細胞周圍有2至3個活細胞，在下一個階段繼續存活，否則死亡；
2. 如果一個死細胞周圍有3個活細胞，在下一個階段將變成活細胞，否則繼續保持死亡

康威生命遊戲是簡單規則產生複雜變化的典型例子。在演變過程中，可以看到一些非常美妙的變化，和一些優美的幾何圖形。

下面是用HTML5 Canvas實現的一個簡單版本。

原始碼：https://github.com/mirreal/moon9/tree/master/GameOfLife

DEMO：http://mirreal.net/game-of-life/

JS程式碼如下：

function Game() {
  this.stones = [];
  this.canvas = new Canvas();

  this.init();
}

Game.prototype.init = function() {
  var self = this;

  this.createRandomStones();
  this.draw();

  this.getAroundStones();

  this.eventHandler();

  this.loop = setInterval(function() {
    self.update();
    self.draw();
  }, 120);
};

Game.prototype.eventHandler = function() {
  var self = this;

  var snapshotButton = document.getElementById('snapshotButton'),
      snapshotImageElement = document.getElementById('snapshotImageElement'),
      canvas = document.getElementById('canvas');

  snapshotButton.onclick = function(event) {
    event.preventDefault();

    if (snapshotButton.innerHTML == 'Snapshot') {
      clearInterval(self.loop);
      var dataUrl = canvas.toDataURL();
      snapshotImageElement.src = dataUrl;
      snapshotImageElement.style.display = 'inline';
      canvas.style.display = 'none';
      snapshotButton.innerHTML = 'Continue';
    } else {
      self.loop = setInterval(function() {
        self.update();
        self.draw();
      }, 800);
      canvas.style.display = 'inline';
      snapshotImageElement.style.display = 'none';
      snapshotButton.innerHTML = 'Snapshot';
    }
  };
};

Game.prototype.createRandomStones = function() {
  for (var i = 0; i < 32; i++) {
    for (var j = 0; j < 32; j++) {
      var status = Math.random() < 0.2 ? true : false;
      this.stones.push(new Stone({x: i, y: j}, status))
    }
  }
};

Game.prototype.draw = function() {
  var self = this;

  this.canvas.drawGrid("lightgrey", 20, 20);
  this.stones.forEach(function(stone) {
    if (stone.status === true) {
      self.canvas.drawStone(stone);
    }
  });
};

Game.prototype.getAroundStones = function() {
  var self = this;

  this.stones.forEach(function(stone) {
    stone.around.forEach(function(position) {
      stone.aroundStones.push(self.stones[32*position.x + position.y]);
    });
  });
};

Game.prototype.update = function() {
  var self = this;

  this.stones.forEach(function(stone) {
    stone.aroundStones.forEach(function(s) {
      if (s.status === true) stone.aliveCount += 1;
    });

    if (stone.status === true) {
      if (stone.aliveCount === 2 || stone.aliveCount === 3) {
        stone.nextStatus = true;
      } else {
        stone.nextStatus = false;
      }
    } else {
      if (stone.aliveCount === 3) stone.nextStatus = true;
      else stone.nextStatus = false;
    }
  });

  this.stones.forEach(function(stone) {
    stone.status = stone.nextStatus;
    stone.aliveCount = 0;
  });
}




function Stone(position, status) {
  this.x = position.x;
  this.y = position.y;

  this.status = status;
  this.nextStatus = false;

  this.aroundStones = [];
  this.aliveCount = 0;

  this.around = [];
  this.getAround();
}

Stone.prototype.getAround = function() {
  for (var i = this.x-1; i <= this.x+1; i++) {
    for (var j = this.y-1; j <= this.y+1; j++) {
      if (i == this.x && j == this.y) continue;
      if (i < 0 || i >= 32) continue;
      if (j < 0 || j >= 32) continue;
      this.around.push({x: i, y: j});
    }
  }
};


function Canvas() {
  this.canvas = document.getElementById('canvas');
  this.context = canvas.getContext('2d');
}

Canvas.prototype.drawGrid = function(color, stepx, stepy) {
  var canvas = this.canvas;
  var ctx = this.context;

  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.strokeStyle = color;
  ctx.lineWidth = 0.5;

  for (var i = stepx + 0.5; i < ctx.canvas.width; i += stepx) {
    ctx.beginPath();
    ctx.moveTo(i, 0);
    ctx.lineTo(i, ctx.canvas.height);
    ctx.stroke();
    ctx.closePath();
  }

  for (var i = stepy + 0.5; i < ctx.canvas.height; i += stepy) {
    ctx.beginPath();
    ctx.moveTo(0, i);
    ctx.lineTo(ctx.canvas.width, i);
    ctx.stroke();
    ctx.closePath();
  }
  ctx.restore();
};

Canvas.prototype.drawStone = function(stone) {
  var ctx = this.context;

  var x = 20 * stone.x + 10;
  var y = 20 * stone.y + 10;

  ctx.fillStyle = 'orange';
  ctx.beginPath();
  ctx.arc(x, y, 9, 0, Math.PI*2, false);
  ctx.closePath();
  ctx.fill();
};


new Game();
 

TIPS:

在Google搜尋 Conway's Game of Life ,會看到Google的一個實現。

原文：http://blog.mirreal.net/blog/2014/08/21/game-of-life/