//set global variables birthRules = [3]; survivalRules = [2, 3]; playStatus = 0; function openSettings(){ document.getElementById("settings").style.width = "100%"; } function closeSettings(){ document.getElementById("settings").style.width = "0"; } function createTable(hCells, vCells){ //Store parent or container var container = document.getElementById("game"); // Create table var table = document.createElement("table"); table.setAttribute("id", "gameGrid"); var tbody = document.createElement("tbody"); //populate table according to arguments for (var x = 0; x < vCells; x++){ var tr = document.createElement("tr"); for (var y = 0; y < hCells; y++){ //create table data var td = document.createElement("td"); td.setAttribute("class", "off"); td.setAttribute("onclick", "toggleState(this)"); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); container.appendChild(table); } function toggleState(elem){ if (elem.getAttribute("class") == "off"){ setOn(elem); } else { setOff(elem); } } function setOn(elem){ elem.setAttribute("class", "on"); } function setOff(elem){ elem.setAttribute("class", "off"); } function getState(elem) { if (elem.getAttribute("class") == "on") { return true; } else { return false; } } function checkNeighbors(x, y) { var table = document.getElementById("gameGrid"); var count = 0; var maxCells = table.rows[0].cells.length; var maxRows = table.rows.length; var currentCell = table.rows[y].cells[x]; //Check up cell state if (y !== 0) { if (getState(table.rows[y-1].cells[x])) { count++; } } //Check up right cell if (y !== 0 && x + 1 != maxCells) { if (getState(table.rows[y-1].cells[x+1])) { count++; } } //Check right cell state if (x + 1 != maxCells) { if (getState(table.rows[y].cells[x + 1])) { count++; } } //Check bottom right cell state if (y + 1 != maxRows && x + 1 != maxCells) { if (getState(table.rows[y + 1].cells[x + 1])) { count++; } } //Check bottom cell state if (y + 1 != maxRows) { if (getState(table.rows[y + 1].cells[x])) { count++; } } //Check bottom left cell state if (y + 1 != maxRows && x !== 0) { if (getState(table.rows[y + 1].cells[x - 1])) { count++; } } //Check left cell state if (x !== 0) { if (getState(table.rows[y].cells[x - 1])) { count++; } } //Check up left cell state if (y !== 0 && x !== 0) { if (getState(table.rows[y - 1].cells[x - 1])) { count++; } } //Declare if cell must live or die o.O if (currentCell.getAttribute("class") == "on"){ if (survivalRules.indexOf(count) == -1) { return false; } else { return true; } } else { if (birthRules.indexOf(count) != -1) { return true; } else { return false; } } } function getNextState(){ var table = document.getElementById("gameGrid"); var rows = table.rows.length; var cells = table.rows[0].cells.length; var nextState = []; for (var r = 0; r < rows; r++){ var row = []; for (var c = 0; c < cells; c++){ row.push(checkNeighbors(c, r)); } nextState.push(row); } for (var j = 0; j < rows; j++) { for (var k = 0; k < cells; k++) { if (nextState[j][k]) { setOn(table.rows[j].cells[k]); } else { setOff(table.rows[j].cells[k]); } } } } function initialize() { var table = document.getElementById("gameGrid"); setOn(table.rows[0].cells[0]); setOn(table.rows[1].cells[1]); setOn(table.rows[1].cells[2]); setOn(table.rows[2].cells[0]); setOn(table.rows[2].cells[1]); } function getSettings(form){ //get Birth Rules birthRules = []; var bRules = form.birthRule; for (var i = 0, m = bRules.length; i < m; i++) { if (bRules[i].checked) { birthRules.push(i); } } //get Survival Rules survivalRules = []; var sRules = form.survivalRule; for (var s = 0, n = sRules.length; s < n; s++) { if (sRules[s].checked) { survivalRules.push(s); } } } function setSettings(){ var bRules = document.getElementsByName("birthRule"); var sRules = document.getElementsByName("survivalRule"); for (var i = 0; i < bRules.length; i++) { if (birthRules.indexOf(i) != -1) { bRules[i].checked = true; } if (survivalRules.indexOf(i) != -1) { sRules[i].checked = true; } } } function togglePlayBtn() { var button = document.getElementById("playBtn"); playStatus += 1; playStatus %= 2; if (playStatus === 0) { button.blur(); } window.setInterval(function (){ if (playStatus == 1) { getNextState(); button.innerHTML = "Stop!"; } else { button.innerHTML = "Play!"; } }, 100); } function getWindowSize() { do { var tabHeight = document.getElementById("game").offsetHeight; var tabWidth = document.getElementById("game").offsetWidth; } while (tabHeight == 0 || tabWidth == 0); var tabSize = [tabHeight, tabWidth]; return tabSize; } function main(){ //var tabSize = getWindowSize(); //alert(tabSize); var tabHeight = document.getElementById("game").offsetHeight; var tabWidth = document.getElementById("game").offsetWidth; var cellSize = 20; var verticalCells = Math.ceil(tabHeight/cellSize); var horizontalCells = Math.ceil(tabWidth/cellSize); //create and stylize table createTable(horizontalCells, verticalCells); var cells = document.getElementsByTagName("td"); for (var i = 0; i < cells.length; i++){ if (typeof cells[i] != "undefined"){ cells[i].style.width = cellSize + "px"; cells[i].style.height = cellSize + "px"; //cells[i].innerHTML = cells[i].parentNode.rowIndex + ", " + cells[i].cellIndex ; //get cell indexes } } if (document.getElementById("game").offsetHeight == 0 || document.getElementById("game").offsetWidth == 0) { window.setTimeout(main, 50); } document.getElementById("gameBtn").focus(); alert("Hi there! This is Conway's game of life! For more info about this game, go to settings! If you enjoy, leave a Like! ^_^") setSettings(); initialize(); } window.onload = function(){ // Fix bug that wouldn't allow the grid to be initialized the first time you play. Thanks VISPH for this!! window.setTimeout(main, 300); //main(); };

the game of life