boboluu/jsbin.iNOQERuB.css

## jsbin.iNOQERuB.css
canvas {
  border: 1px solid  black;
  width:100%;
  height:100%;

}
body{

  width:100%;
  margin:0;
  padding:0;

}

## jsbin.iNOQERuB.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-git2.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <h1>game of life</h1>
  <button>Start/Stop</button>
  <canvas id="myCanvas" height=1720></canvas>
</body>
</html>

## jsbin.iNOQERuB.js
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

GRID_WIDTH = 100;
GRID_HEIGHT = 100;
CELL_SIZE = 10;

var state = {};

state ["1,1"] = true;
state ["1,2"] = true;
state ["1,3"] = true;

var dying = [];
var spawning = [];
var itsRunning = false;
var drawSquare = function(x,y){
  ctx.strokeStyle="#000000";
  ctx.strokeRect(x*CELL_SIZE,y*CELL_SIZE,CELL_SIZE,CELL_SIZE);
  };

var liveCell = function(x,y){
  ctx.fillStyle="#ffffff";
  ctx.fillRect(x*CELL_SIZE,y*CELL_SIZE,CELL_SIZE,CELL_SIZE);
  };

var deadCell = function(x,y){
  ctx.fillStyle="#ff0000";
  ctx.fillRect(x*CELL_SIZE,y*CELL_SIZE,CELL_SIZE,CELL_SIZE);
  };

function setCellDead(x,y){
  //console.log("killing",x,y,numNeighbors(x,y));
  var cell_id = ""+x+","+y;
  dying.push(cell_id);
}

function setCellAlive(x,y){
   var cell_id = ""+x+","+y;
   spawning.push(cell_id);
}

var getCellState = function(x,y){
  var cell_id = ""+x+","+y;
  //console.log(cell_id, state[cell_id]);
  if (state[cell_id]){
    return true
  }
}

var draw_grid = function(){
  for (var i=0; i<GRID_WIDTH; i++){
    for (var j=0; j<GRID_HEIGHT; j++){
      if (getCellState(i,j)){
      liveCell(i,j);
      }
      else deadCell(i,j);
      drawSquare(i, j);
    }
  }
}

function render(){
  draw_grid();
  setTimeout(render, 1000/60);
}
render();

function numNeighbors(x,y){
  var i = 0;
  if (getCellState(x-1,y-1) == true) i++;
  if (getCellState(x,y-1) == true) i++;
  if (getCellState(x+1,y-1) == true) i++;
  if (getCellState(x-1,y) == true) i++;
  if (getCellState(x+1,y) == true) i++;
  if (getCellState(x-1,y+1) == true) i++;
  if (getCellState(x,y+1) == true) i++;
  if (getCellState(x+1,y+1) == true) i++;
  return i;
}

var killCell = function(x,y){
  if (numNeighbors(x,y) < 2)
    setCellDead(x,y);
  if (numNeighbors(x,y) > 3)
    setCellDead(x,y);
}

var spawnCell = function(x,y){
  if (numNeighbors(x,y) == 3)
    setCellAlive(x,y);
}

var life = function(){
  itsRunning=true;
  for (var i=0; i<GRID_WIDTH; i++){
    for (var j=0; j<GRID_HEIGHT; j++){
      if (getCellState(i,j) == true)
        killCell(i,j);
      else
        spawnCell(i,j);
    }
  }
  for (var i=0; i<dying.length; i++)
    state[dying[i]] = false;
  for (var i=0; i<spawning.length; i++)
    state[spawning[i]] = true;
  dying = [];
  spawning = [];
  if(itsRunning){setTimeout(life, 1000)};
}

//setTimeout(life, 1000);

var toggleGame = function(){
  if(itsRunning)
    itsRunning=false;
  else life();

};


$("button").on("click", toggleGame)
	canvas {
	border: 1px solid black;
	width:100%;
	height:100%;

	}
	body{

	width:100%;
	margin:0;
	padding:0;

	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-git2.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<h1>game of life</h1>
	<button>Start/Stop</button>
	<canvas id="myCanvas" height=1720></canvas>
	</body>
	</html>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	GRID_WIDTH = 100;
	GRID_HEIGHT = 100;
	CELL_SIZE = 10;

	var state = {};

	state ["1,1"] = true;
	state ["1,2"] = true;
	state ["1,3"] = true;

	var dying = [];
	var spawning = [];
	var itsRunning = false;
	var drawSquare = function(x,y){
	ctx.strokeStyle="#000000";
	ctx.strokeRect(xCELL_SIZE,yCELL_SIZE,CELL_SIZE,CELL_SIZE);
	};

	var liveCell = function(x,y){
	ctx.fillStyle="#ffffff";
	ctx.fillRect(xCELL_SIZE,yCELL_SIZE,CELL_SIZE,CELL_SIZE);
	};

	var deadCell = function(x,y){
	ctx.fillStyle="#ff0000";
	ctx.fillRect(xCELL_SIZE,yCELL_SIZE,CELL_SIZE,CELL_SIZE);
	};

	function setCellDead(x,y){
	//console.log("killing",x,y,numNeighbors(x,y));
	var cell_id = ""+x+","+y;
	dying.push(cell_id);
	}

	function setCellAlive(x,y){
	var cell_id = ""+x+","+y;
	spawning.push(cell_id);
	}

	var getCellState = function(x,y){
	var cell_id = ""+x+","+y;
	//console.log(cell_id, state[cell_id]);
	if (state[cell_id]){
	return true
	}
	}

	var draw_grid = function(){
	for (var i=0; i<GRID_WIDTH; i++){
	for (var j=0; j<GRID_HEIGHT; j++){
	if (getCellState(i,j)){
	liveCell(i,j);
	}
	else deadCell(i,j);
	drawSquare(i, j);
	}
	}
	}

	function render(){
	draw_grid();
	setTimeout(render, 1000/60);
	}
	render();

	function numNeighbors(x,y){
	var i = 0;
	if (getCellState(x-1,y-1) == true) i++;
	if (getCellState(x,y-1) == true) i++;
	if (getCellState(x+1,y-1) == true) i++;
	if (getCellState(x-1,y) == true) i++;
	if (getCellState(x+1,y) == true) i++;
	if (getCellState(x-1,y+1) == true) i++;
	if (getCellState(x,y+1) == true) i++;
	if (getCellState(x+1,y+1) == true) i++;
	return i;
	}

	var killCell = function(x,y){
	if (numNeighbors(x,y) < 2)
	setCellDead(x,y);
	if (numNeighbors(x,y) > 3)
	setCellDead(x,y);
	}

	var spawnCell = function(x,y){
	if (numNeighbors(x,y) == 3)
	setCellAlive(x,y);
	}

	var life = function(){
	itsRunning=true;
	for (var i=0; i<GRID_WIDTH; i++){
	for (var j=0; j<GRID_HEIGHT; j++){
	if (getCellState(i,j) == true)
	killCell(i,j);
	else
	spawnCell(i,j);
	}
	}
	for (var i=0; i<dying.length; i++)
	state[dying[i]] = false;
	for (var i=0; i<spawning.length; i++)
	state[spawning[i]] = true;
	dying = [];
	spawning = [];
	if(itsRunning){setTimeout(life, 1000)};
	}

	//setTimeout(life, 1000);

	var toggleGame = function(){
	if(itsRunning)
	itsRunning=false;
	else life();

	};



	$("button").on("click", toggleGame)