game-of-life

function Board(board) {

  this.currentArray = board;
	
	this.cell = function(row, column) {
		return board[row].charAt(column);
	};
	
	this.setCell = function(row, column, char) {
		var str = board[row];
		board[row] = str.substr(0, column) + char + str.substr(column+char.length);
	};

	this.next = function() {
		var newBoard = _.map(_.range(board.length), function(row) {
			var rowStr = "";
			_.each(_.range(board[row].length), function(column) {
				count = Board.countLiveNeighbours(board, row, column);
				char = board[row].charAt(column);
				rowStr += Board.newChar(char,count);
			});
			return rowStr;
		});
		return new Board(newBoard);
	};

}

Board.countLiveNeighbours = function(board, row, column) {
	var count = 0;
	var maxRow = board.length;
	var maxCol = board[0].length;
	var allowedRow = _.intersection([ row - 1, row, row + 1 ], _.range(maxRow));
	var allowedCol = _.intersection([ column - 1, column, column + 1 ], _.range(maxCol));
	var temp = _.map(allowedRow, function(r) {
		_.map(allowedCol, function(c) {
			if (!(r == row && c == column)) {
				cell = board[r].charAt(c);
				if (cell == "*") {
					count = count + 1;
				}
				return cell;
			}
			return "-";
		});
	});
	return count;
};

Board.newChar = function(char, count){
	newchar = "";
	if (char == "*") {
		if (count < 2) {
			return ".";
		}
		if (count > 3) {
			return ".";
		}
		return "*";
	} 
	if (count == 3) {
		return "*";
	} 
	return ".";
};

<!DOCTYPE html>
<html>
<head>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://underscorejs.org/underscore-min.js"></script>
    <script src="game-of-life.js"></script>
</head>
<body>
    <div id="viz"></div>
    <script type="text/javascript">
    
  var arr = ["........................",
               "..***...................",
               "..***...................",
               "..***.....*.*...........",
               ".........*..*...........",
               ".......***..............",
               "........*...............",
               ".......*................",
               "........*...............",
               ".......*................",
               "......*.................",
               "......*.................",
               "........................",
               "........................",
               "........................"];
	
	var currentBoard = new Board(arr);
	var currentArray = currentBoard.currentArray;

    var sampleSVG = d3.select("#viz")
	    .append("svg")
	    .attr("width", 500)
	    .attr("height", 400);  
   
    var cellArray = new Array;
    
    _.each(_.range(currentArray.length), function(row) {
    	cellArray[row] = new Array;
    	_.each(_.range(currentArray[row].length), function(column) {
    		var currentCell = sampleSVG.append("circle")
	    	    .style("stroke", "gray")
	    	    .style("fill","aliceblue")
	    	    .attr("r", 10)
	    	    .attr("cx", 20*(column+1))
	    	    .attr("cy", 20*(row+1));
    		
    		currentCell.on("mouseover", function(){
    			currentBoard.setCell(row,column,"*");
    			currentCell.style("fill","green");
    		});
    		
    		cellArray[row][column] = currentCell;
    	});
    });
    
	function next(){
        _.each(_.range(currentArray.length), function(row) {
        	_.each(_.range(currentArray[row].length), function(column) {
        		currentChar = currentArray[row].charAt(column);
        		cellArray[row][column].style("fill", (currentChar == "*")?"gray":"aliceblue");
        	});
        });
        
        currentBoard = currentBoard.next();
    	currentArray = currentBoard.currentArray;
	}
	
	setInterval(function(){next()},100);

    </script>
</body>
</html>