Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
155 lines (120 sloc) 3.61 KB
<!DOCTYPE html>
<html>
<head>
<title>Game of Life</title>
<script type="text/javascript">
var GOL = {};
GOL.init = function() {
GOL.generationCounter = document.getElementById('generationCounter');
GOL.canvas = document.getElementById('canvas');
GOL.ctx = GOL.canvas.getContext('2d');
GOL.isRunning = false;
GOL.generation = 0;
var w = GOL.canvas.width / 10;
var h = GOL.canvas.width / 10;
GOL.spaces = [];
for (var i = 0; i < w; i++) {
GOL.spaces[i] = [];
for (var j = 0; j < h; j++) {
GOL.spaces[i][j] = 0;
}
}
// Add a glider initially
GOL.spaces[1][3] = 1;
GOL.spaces[2][3] = 1;
GOL.spaces[3][3] = 1;
GOL.spaces[3][2] = 1;
GOL.spaces[2][1] = 1;
window.setInterval(GOL.step, 100);
}
GOL.step = function() {
GOL.draw();
if (GOL.isRunning) {
GOL.update();
}
GOL.generationCounter.innerHTML = GOL.generation;
}
GOL.update = function() {
var newSpaces = [];
for (var i = 0, len = GOL.spaces.length; i < len; i++) {
newSpaces[i] = [];
for (var j = 0, len2 = GOL.spaces[i].length; j < len2; j++) {
var neighbors = 0;
// Top Left
neighbors += (i > 0 && j > 0 && GOL.spaces[i - 1][j - 1]) ? 1 : 0;
// Left
neighbors += (i > 0 && GOL.spaces[i - 1][j]) ? 1 : 0;
// Bottom Left
neighbors += (i > 0 && j < (len2 - 1) && GOL.spaces[i - 1][j + 1]) ? 1 : 0;
// Bottom
neighbors += (j < (len2 - 1) && GOL.spaces[i][j + 1]) ? 1 : 0;
// Bottom Right
neighbors += (i < (len - 1) && j < (len2 - 1) && GOL.spaces[i + 1][j + 1]) ? 1 : 0;
// Right
neighbors += (i < (len - 1) && GOL.spaces[i + 1][j]) ? 1 : 0;
// Top Right
neighbors += (i < (len - 1) && j > 0 && GOL.spaces[i + 1][j - 1]) ? 1 : 0;
// Top
neighbors += (j > 0 && GOL.spaces[i][j - 1]) ? 1 : 0;
if (GOL.spaces[i][j]) {
if (neighbors <= 1) {
newSpaces[i][j] = 0;
}
else if (neighbors == 2 || neighbors == 3) {
newSpaces[i][j] = 1;
}
else if (neighbors >= 4) {
newSpaces[i][j] = 0;
}
}
else if (neighbors == 3) {
newSpaces[i][j] = 1;
}
else {
newSpaces[i][j] = 0;
}
}
}
GOL.spaces = newSpaces;
GOL.generation++;
}
GOL.oneGeneration = function() {
if (!GOL.isRunning) {
GOL.update();
}
}
GOL.draw = function() {
GOL.ctx.clearRect(0, 0, GOL.canvas.width, GOL.canvas.height);
var w = canvas.width/50;
var h = canvas.height/50;
for (var i = 0, len = GOL.spaces.length; i < len; i++) {
for (var j = 0, len2 = GOL.spaces[i].length; j < len2; j++) {
if (GOL.spaces[i][j]) {
GOL.ctx.fillRect(i * w, j * h, w, h);
}
}
}
}
GOL.startstop = function() {
GOL.isRunning = !GOL.isRunning;
}
GOL.click = function(e) {
if (!e) var e = window.event;
var w = canvas.width/50;
var h = canvas.height/50;
var x = e.offsetX;
var y = e.offsetY;
var col = parseInt(x / w, 10);
var row = parseInt(y / h, 10);
GOL.spaces[col][row] = !GOL.spaces[col][row];
}
</script>
</head>
<body onload="GOL.init()">
<canvas width="500" height="500" id="canvas" style="border: 1px solid black;" onclick="GOL.click()"></canvas>
<br />
<button onclick="GOL.startstop()">Start/Stop</button>
<button onclick="GOL.oneGeneration()">One Generation</button>
<p>Generation: <span id="generationCounter">0</span></p>
</body>
</html>