Skip to content

Instantly share code, notes, and snippets.

@benschac
Created March 9, 2015 22:30
Show Gist options
  • Save benschac/59dcd440dfff5484fe98 to your computer and use it in GitHub Desktop.
Save benschac/59dcd440dfff5484fe98 to your computer and use it in GitHub Desktop.
var gameOfLife = {
width: 100,
height: 100,
stepInterval: null,
createAndShowBoard: function () {
// create <table> element
var goltable = document.createElement("tbody");
// build Table HTML
var tablehtml = '';
for (var h=0; h<this.height; h++) {
tablehtml += "<tr id='row+" + h + "'>";
for (var w=0; w<this.width; w++) {
tablehtml += "<td data-status='dead' id='" + w + "-" + h + "'></td>";
}
tablehtml += "</tr>";
}
goltable.innerHTML = tablehtml;
// add table to the #board element
var board = document.getElementById('board');
board.appendChild(goltable);
// once html elements are added to the page, attach events to them
this.setupBoardEvents();
},
forEachCell: function (iteratorFunc) {
/*
Write forEachCell here. You will have to visit
each cell on the board, call the "iteratorFunc" function,
and pass into func, the cell and the cell's x & y
coordinates. For example: iteratorFunc(cell, x, y)
*/
for (var h = 0; h < this.height; h++) {
for (var w = 0; w < this.width; w++) {
var cell = document.getElementById(h+'-'+w);
iteratorFunc(cell,h,w);
}
}
},
setupBoardEvents: function() {
// each board cell has an CSS id in the format of: "x-y"
// where x is the x-coordinate and y the y-coordinate
// use this fact to loop through all the ids and assign
// them "on-click" events that allow a user to click on
// cells to setup the initial state of the game
// before clicking "Step" or "Auto-Play"
// clicking on a cell should toggle the cell between "alive" & "dead"
// for ex: an "alive" cell be colored "blue", a dead cell could stay white
// EXAMPLE FOR ONE CELL
// Here is how we would catch a click event on just the 0-0 cell
// You need to add the click event on EVERY cell on the board
var stepButton = document.getElementById('step_btn');
var playButton = document.getElementById('play_btn');
var clearedButton = document.getElementById('clear_btn');
var randButton = document.getElementById('reset_btn');
stepButton.onclick = this.step.bind(this);
playButton.onclick = this.enableAutoPlay.bind(this);
clearedButton.onclick = this.cleared.bind(this);
var onCellClick = function (e) {
// QUESTION TO ASK YOURSELF: What is "this" equal to here?
// how to set the style of the cell when it's clicked
if (this.getAttribute('data-status') == 'dead') {
this.className = "alive";
this.setAttribute('data-status', 'alive');
} else {
this.className = "dead";
this.setAttribute('data-status', 'dead');
}
};
// this.forEachCell().onclick = onCellClick;
this.forEachCell(function(cell){
cell.onclick = onCellClick;
});
},
step: function () {
// Here is where you want to loop through all the cells
// on the board and determine, based on it's neighbors,
// whether the cell should be dead or alive in the next
// evolution of the game.
//
// You need to:
// 1. Count alive neighbors for all cells
// 2. Set the next state of all cells based on their alive neighbors
var obj ={};
this.forEachCell(function(cell) {
var h;
var w;
// var obj = {};
w = Number(cell.getAttribute('id').split('-')[0]);
h = Number(cell.getAttribute('id').split('-')[1]);
obj[cell.getAttribute('id')] = cell.getAttribute('data-status');
});
this.forEachCell(function(cell,h,w) {
var status = cell.getAttribute('data-status');
var counter = 0;
if(obj[h+"-"+ (w+1)] === "alive"){
counter++;
}
if(obj[(h+1)+"-"+ w] === "alive"){
counter++;
}
if(obj[(h+1)+"-"+ (w+1)] === "alive"){
counter++;
}
if(obj[(h-1)+"-"+ w] === "alive") {
counter++
}
if(obj[h+"-"+ (w-1)] === "alive") {
counter++
}
if(obj[(h-1) +"-"+ (w-1)] === "alive") {
counter++
}
if(obj[(h+1) +"-"+ (w-1)] === "alive") {
counter++
}
if(obj[(h-1) +"-"+ (w+1)] === "alive") {
counter++
}
if(counter === 3) {
cell.setAttribute('data-status', 'alive');
cell.className = 'alive';
}
if(counter < 2) {
cell.setAttribute('data-status', 'dead');
cell.className = 'dead';
}
if(counter > 3) {
cell.setAttribute('data-status', 'dead');
cell.className = 'dead';
}
if(status === 'dead' && counter === 3) {
cell.setAttribute('data-status', 'alive');
cell.className = 'alive';
}
});
},
cleared: function () {
this.forEachCell(function(cell) {
cell.setAttribute('data-status', 'dead');
cell.className = 'dead';
});
},
enableAutoPlay: function () {
// Start Auto-Play by running the 'step' function
// automatically repeatedly every fixed time interval
setInterval(this.step.bind(this), 5);
}
};
gameOfLife.createAndShowBoard();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment