<html>
<head>
<title>A javascript game of life with color-coded generations</title>
<script langauge=javascript>
grid_size=25;
board_size=450;
font_size=30;
x_offset=-10;
y_offset=-12;
hex=new Array('0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f');
dot_color='ffffff';
paused=1;
grid_size+=2;
grid=new Array(grid_size);
new_grid=new Array(grid_size);
for (var i=0;i<grid_size;i++) {
new_grid[i]=new Array(grid_size);
grid[i]=new Array(grid_size);
for (var h=0;h<grid_size;h++) {
grid[i][h]=0;
new_grid[i][h]=0;
}
}
function neighbors(init_i,init_h) {
var i=init_i; var h=init_h;
return grid[i-1][h-1]+grid[i-1][h]+grid[i-1][h+1]+grid[i][h-1]+grid[i][h+1]+grid[i+1][h-1]+grid[i+1][h]+grid[i+1][h+1];
}
function step() {
dot_color='';
for (var n=0;n<6;n++) {
dot_color+=hex[parseInt(Math.random()*16)];
}
for (var i=1;i<grid_size-1;i++) {
for (var h=1;h<grid_size-1;h++) {
var total=neighbors(i,h);
if (total==3 && !grid[i][h]) {
new_grid[i][h]=1;
drawCell(i,h);
}
else if (total>3 || total<2 &&grid[i][h]) {
new_grid[i][h]=0;
eraseCell(i,h);
}
else {
new_grid[i][h]=grid[i][h];
}
}
}
for (i=1;i<grid_size-1;i++) {
for (h=1;h<grid_size-1;h++) {
grid[i][h]=new_grid[i][h];
}
}
if (!paused) {
setTimeout("step()",50);
}
}
function drawCell(init_i,init_h) {
var i=init_i; var h=init_h;
eval("dot"+i+"i"+h+"h").style.pixelLeft=i*(board_size/grid_size);
eval("dot"+i+"i"+h+"h").style.pixelTop=h*(board_size/grid_size);
eval("dot"+i+"i"+h+"h").style.color=dot_color;
}
function eraseCell(init_i,init_h) {
var i=init_i; var h=init_h;
eval("dot"+i+"i"+h+"h").style.pixelLeft=-1000;
}
function makeDots() {
for (var i=1;i<grid_size-1;i++) {
for (var h=1;h<grid_size-1;h++) {
document.writeln("<div style='position:absolute; left:-1000; top:-1000; color:#000000; font-family:Wingdings; font-size:"+font_size+"pt' ID='dot"+i+"i"+h+"h'>m</div>");
}
}
document.writeln("<div style='position:absolute; left:-1000; top:-1000; color:#ff8800; font-family:Wingdings; font-size:"+font_size+"pt' ID='dot'>m</div>");
}
function addCell() {
var i=parseInt((event.x+x_offset)/(board_size/grid_size));
var h=parseInt((event.y+y_offset)/(board_size/grid_size));
if (i<grid_size-1 && h<grid_size-1 && i>0 && h>0) {
if (grid[i][h]==0) {
grid[i][h]=1;
drawCell(i,h);
}
else {
grid[i][h]=0;
eraseCell(i,h);
}
}
}
function moveDot() {
if (paused) {
cell_size=board_size/grid_size;
dot.style.pixelLeft=parseInt((event.x+x_offset)/cell_size)*cell_size;
dot.style.pixelTop=parseInt((event.y+y_offset)/cell_size)*cell_size;
}
else {
dot.style.pixelLeft=-1000;
}
}
</script>
</head>
<body bgcolor="#000000">
<script langauge=javascript>
makeDots();
window.document.onmousemove=moveDot;
window.document.onmousedown=addCell;
</script>
<div style="position:absolute; left:600; top:100">
<input type=button onclick="paused=0;step()" value="Play">
<br><input type=button onclick="paused=1" value="Pause">
</div>
</body>
</html>
<p><br> <br></p><p><br> <br></p><p><br> <br></p>
<p><br> <br></p><p><br> <br></p><p><br> <br></p>
<p><br> <br></p><p><br> <br></p><p><br> <br></p>
<p><br> <br></p><p><br> <br></p><p><br> <br></p>
<p><br> <br></p><p><br> <br></p><p><br> <br></p>
<p><br> <br></p><p><br> <br></p><p><br> <br></p><P>
<P>