EffectHub.com: your best source for gaming

Recommendation

More Effects...

"use strict";
var gol =  {
	base: document.getElementById('base'),
	
	board: false,
	init: function(){
		var self = this;
		this.makeTable(25,25).populate();
		window.setInterval(function(){
			self.tick();
		},66);

},
	tick: function(){
		var newstate = JSON.parse(JSON.stringify(this.board));

for (var i = 0; i < this.rows; i++) {
			
			for (var j = 0; j < this.cols; j++) {
				
				var count = this.neighbours(i,j);

if (this.board[i][j] === true) { // Populated
		            if (count == 0 || count == 1 || count > 3) {
		            	newstate[i][j] = false;
		            }
		            	
		        } else { // Empty
		            if (count == 3) {
		            	newstate[i][j] = true;	
		            }
		        }

}
		}

this.board = newstate;
		this.paintTable();
	},
	makeTable: function (rows, cols) {

var i = 0,
			j = 0;

this.rows = rows;
		this.cols = cols;

this.base.innerHTML = '';
		this.board = [];

for (i = 0; i < rows; i++) {
			var row = document.createElement('div');
			row.className = 'row-like';

var boardRow = [];

for (j = 0; j < cols; j++) {
				var cell = document.createElement('div');
				cell.className = 'cell';
				row.appendChild(cell);
				boardRow.push(false);
			}
			this.base.appendChild(row);
			this.board.push(boardRow);
		}

return this;
	},
	paintTable: function(){
		for (var i = 0; i < this.rows; i++) {
			
			for (var j = 0; j < this.cols; j++) {
				var c = this.getCell(i,j)
				if (this.board[i][j]) {
					c.classList.add('alive');	
				} else {
					c.classList.remove('alive');	
				}
				
			}
			
		}
	},
	populate: function(){

// glider
		// this.board[1][2] = true;
		// this.board[2][3] = true;
		// this.board[3][1] = true;
		// this.board[3][2] = true;
		// this.board[3][3] = true;

// this.paintTable();

var i = 0,
			j = 0;

for (i = 0; i < this.rows; i++) {

for (j = 0; j < this.cols; j++) {
				var r = Math.random();

if (r > 0.89) {
					
					this.setActive(i,j);
				};
				
			}
			
			
		}
	},
	setActive: function(i,j){
		var cell = this.getCell(i,j);
		this.board[i][j] = true;
		cell.classList.add('alive') ;
		
		return this;
	},
	setDead: function(i,j){
		var cell = this.getCell(i,j);
		this.board[i][j] = false;
		cell.classList.remove('alive') ;
		
		return this;
	},
	getCell: function(i,j){
		var cell = document.querySelectorAll('.row-like:nth-child('+(i+1)+') .cell:nth-child('+(j+1)+')') || false;

return cell[0];
	},
	neighbours: function(i,j){
		var count = 0,
			self = this;

// TL, TM, TR
		// CL,  x, CR
		// BL, BM, BR

var matrix = [
			[-1,-1],[-1,0],[-1,1],
			[0,-1],[0,0],[0,1],
			[1,-1],[1,0],[1,1]
		]

matrix.forEach(function(t,idx){

// console.log(arguments);

var ii = i+t[0],
				jj = j+t[1];

if (ii<0 || jj<0 || ii >= self.rows || jj >= self.cols || (ii == i && jj == j)) {
				// console.log("skipping",i,j);
			} else {
				if (self.board[ii][jj] ) {
					count++;
				}
			}

});

return count;
	}
};
gol.base.addEventListener('click',function(){
	gol.init();
},false);
gol.init();

CSS

HTML

Recommendation

Join Effecthub.com