forked from asalam/jsGameOfLife
-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
57 lines (52 loc) · 1.58 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<img src="alive.gif" width="600" height="400" id="sunrise" style="display:none">
<img src="dead.gif" width="600" height="400" id="sunset" style="display:none">
<canvas width="600" height="400" id="c" style="border: 1px gray dashed"><blink>You don't support canvas!!</blink></canvas>
<script src="lib/jquery-1.2.6.js"></script>
<script src="src/models/cell.js"></script>
<script src="src/models/grid.js"></script>
<script>
function randomLifeString() {
var life = "";
for (var y = 0; y < 40; y++) {
for (var x = 0; x < 60; x++) {
life = life + (Math.random() < 0.15 ? "+" : "-");
}
if (y != 39) {
life = life + ":";
}
}
return life;
}
var c = document.getElementById("c").getContext('2d');
var grid = Grid.parse(randomLifeString());
var sunrise = document.getElementById("sunrise");
var sunset = document.getElementById("sunset");
window.onload = function() {
c.drawImage(sunrise, 0, 0, 600, 400);
setTimeout(nextRound, 1000);
}
function nextRound() {
c.globalAlpha = 0.2;
for (rowNumber in grid.cells) {
var row = grid.cells[rowNumber];
for (colNumber in row) {
if (grid.cells[rowNumber][colNumber].isAlive()) {
drawTile(sunset, colNumber, rowNumber);
}
}
}
grid = grid.nextGrid();
setTimeout(nextRound, 200);
}
function drawTile(image, column, row){
var tileSize = 10;
c.drawImage(image, column * tileSize, row * tileSize, tileSize, tileSize, column * tileSize, row * tileSize, tileSize, tileSize);
}
</script>
</body>
</html>