<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>&nbsp;<br></p><p><br>&nbsp;<br></p><p><br>&nbsp;<br></p>

<p><br>&nbsp;<br></p><p><br>&nbsp;<br></p><p><br>&nbsp;<br></p>

<p><br>&nbsp;<br></p><p><br>&nbsp;<br></p><p><br>&nbsp;<br></p>

<p><br>&nbsp;<br></p><p><br>&nbsp;<br></p><p><br>&nbsp;<br></p>

<p><br>&nbsp;<br></p><p><br>&nbsp;<br></p><p><br>&nbsp;<br></p>

<p><br>&nbsp;<br></p><p><br>&nbsp;<br></p><p><br>&nbsp;<br></p><P>

<P>