
previous

page 2
next
squares.js
function squares() {
var id=0;
var s1="<div class='square' id='";
var s2="'></div>";
for (var row=0;row<40;row++) {
document.write("<div class='row'>");
for (var col=0;col<40;col++) {
document.write(s1+id+s2);
id++;
}
document.write("</div>");
}
}
var id=0;
var s1="<div class='square' id='";
var s2="'></div>";
for (var row=0;row<40;row++) {
document.write("<div class='row'>");
for (var col=0;col<40;col++) {
document.write(s1+id+s2);
id++;
}
document.write("</div>");
}
}
the g_squares array
The project is much easier to create if we have an array behind the scenes which mirrors the grid. It will have 1,600 items. A 0 for a dead cell and a 1 for a live cell. Then we'll have a draw function to show this data on the grid. We'll also need a klear function to clear the grid. No, that's not a typo, clear is a reserved word in JavaScript.
globals.js
var g_squares=[];
functions.js
function klear() {
for (var i=0;i<1600;i++) g_squares[i]=0;
}
function draw() {
for (var i=0;i<1600;i++) {
var el=document.getElementById(i);
var colour='white';
if (g_squares[i]==1) colour='red';
el.style.backgroundColor=colour;
}
}
for (var i=0;i<1600;i++) g_squares[i]=0;
}
function draw() {
for (var i=0;i<1600;i++) {
var el=document.getElementById(i);
var colour='white';
if (g_squares[i]==1) colour='red';
el.style.backgroundColor=colour;
}
}
previous
next