Skip to content

Instantly share code, notes, and snippets.

@beatobongco

beatobongco/jsbin.vetopamo.css

Last active August 29, 2015 13:57
Show Gist options
  • Save beatobongco/9793089 to your computer and use it in GitHub Desktop.
Save beatobongco/9793089 to your computer and use it in GitHub Desktop.
Download ZIP
Game of Life interpretation in Javascript using radio buttons
Raw
jsbin.vetopamo.css
.row{ height:10px; margin:5px;}
.innerSquare{
float:left;
height:5px;
width:5px;
margin:5px;
}
Raw
jsbin.vetopamo.html
<html>
<body>
</body>
</html>
Raw
jsbin.vetopamo.js
/**
Conway's Game of Life in Javascript with Radio Buttons
Author: Beato Jose R. Bongco
**/
var myArr = new Array();
var e = document.body;
var random = false; //set this to true for random game of life!
/**
Start create 32x32 grid
**/
for(var v = 1; v <= 32; v++)
{
var row = document.createElement("div");
row.className = "row";
var innerArr = new Array();
for(var i = 1; i <= 32; i++)
{
var cell = document.createElement("div");
cell.className = "innerSquare";
var myrad = document.createElement("input");
myrad.type = "radio" ;
myrad.className = "radio";
if (random)
{
randy = Math.floor(Math.random() * (2));
if (randy == 1)
{
myrad.checked = true;
}
}
cell.appendChild(myrad);
innerArr.push(myrad);
row.appendChild(cell);
}
e.appendChild(row);
myArr.push(innerArr);
}
//End create 32x32 grid
/**
Start function applyChanges
Takes a 2D array with values true/false in each second level node
and applies it to myArr
**/
function applyChanges(tfArray)
{
for(var i = 0; i < myArr.length; i++)
{
for(var j = 0; j < myArr[i].length; j++)
{
myArr[i][j].checked = tfArray[i][j];
}
}
}
//End function apply changes
/** Test case for applyChanges function
var tfarr = new Array();
for(var i = 0; i < myArr.length; i++)
{
var inarr = new Array();
for(var j = 0; j < myArr[i].length; j++)
{
inarr.push(true);
}
tfarr.push(innerArr);
}
applyChanges(tfarr);
**/
/**
Start function compareNeighbors.
Compare a radio button to its neighbors.
Applies Conway's rules. If alive, return true.
If dead, return false.
**/
function compareNeighbors(x,y)
{
var nCount = 0; //checks if shit is alive
for(var yy = y-1; yy <= y+1; yy++)
{
for(var xx = x-1; xx <= x+1; xx++)
{
if (!(xx == x && yy == y))
{
//make sure we don't go out of bounds
if(xx != -1 && yy != -1 && xx < myArr.length && yy < myArr.length)
{
//intVal is 1 if radio is checked, 0 if unchecked
var intVal = myArr[xx][yy].checked ? 1 : 0;
nCount += intVal;
}
}
}
}
if (myArr[x][y].checked === true && nCount < 2)
{
//console.log("DEATH!");
return false;
}
if (myArr[x][y].checked === true && nCount > 3)
{
//console.log("DEATH!");
return false;
}
if (myArr[x][y].checked === false && nCount == 3)
{
//console.log("LIFE!");
return true;
}
else
{
return myArr[x][y].checked;
}
}
//end function compareNeighbors
/**
Start function playLife
Calls function compareNeighbors foreach node in myArr.
All true/false values pushed into temporary array.
This array is used for function applyChanges
**/
function playLife()
{
var tempArr = new Array();
for(var i = 0; i < myArr.length; i++)
{
var innerArr = new Array();
for(var j = 0; j < myArr.length; j++)
{
innerArr.push(compareNeighbors(i,j));
}
tempArr.push(innerArr);
}
applyChanges(tempArr);
}
//End function compareNeighbors
/**
Pattern test cases.
Set var random to true for more fun
...or you could just mess with the radio buttons ;)
**/
if(!random)
{
//Test pattern: Blinker
myArr[0][1].checked = true;
myArr[2][1].checked = true;
myArr[1][1].checked = true;
//Test pattern: Toad
myArr[5][5].checked = true;
myArr[5][6].checked = true;
myArr[5][7].checked = true;
myArr[6][4].checked = true;
myArr[6][5].checked = true;
myArr[6][6].checked = true;
//Test pattern: Beacon
myArr[10][10].checked = true;
myArr[10][11].checked = true;
myArr[11][10].checked = true;
myArr[11][11].checked = true;
myArr[12][12].checked = true;
myArr[12][13].checked = true;
myArr[13][12].checked = true;
myArr[13][13].checked = true;
//Test pattern: Pulsar
//UP
//left vertical
myArr[20][20].checked = true;
myArr[21][20].checked = true;
myArr[22][20].checked = true;
//far left vertical
myArr[20][15].checked = true;
myArr[21][15].checked = true;
myArr[22][15].checked = true;
//right vertical
myArr[20][22].checked = true;
myArr[21][22].checked = true;
myArr[22][22].checked = true;
//far right vertical
myArr[20][27].checked = true;
myArr[21][27].checked = true;
myArr[22][27].checked = true;
//DOWN
//left vertical
myArr[26][20].checked = true;
myArr[27][20].checked = true;
myArr[28][20].checked = true;
//far left vertical
myArr[26][15].checked = true;
myArr[27][15].checked = true;
myArr[28][15].checked = true;
//right vertical
myArr[26][22].checked = true;
myArr[27][22].checked = true;
myArr[28][22].checked = true;
//far right vertical
myArr[26][27].checked = true;
myArr[27][27].checked = true;
myArr[28][27].checked = true;
//HORIZONTAL
//top left
myArr[23][19].checked = true;
myArr[23][18].checked = true;
myArr[23][17].checked = true;
//topmost left
myArr[18][19].checked = true;
myArr[18][18].checked = true;
myArr[18][17].checked = true;
//down left
myArr[25][19].checked = true;
myArr[25][18].checked = true;
myArr[25][17].checked = true;
//downmost left
myArr[30][19].checked = true;
myArr[30][18].checked = true;
myArr[30][17].checked = true;
//top right
myArr[23][25].checked = true;
myArr[23][24].checked = true;
myArr[23][23].checked = true;
//topmost
myArr[18][25].checked = true;
myArr[18][24].checked = true;
myArr[18][23].checked = true;
//down right
myArr[25][25].checked = true;
myArr[25][24].checked = true;
myArr[25][23].checked = true;
//downmost right
myArr[30][25].checked = true;
myArr[30][24].checked = true;
myArr[30][23].checked = true;
}
//Sets the game in motion with step being var ms in milliseconds
var ms = 250;
setInterval(function(){playLife(); }, ms);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment