-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
120 lines (102 loc) · 3.33 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html id="home" lang="en">
<head>
<meta charset="utf-8" />
<script src="src/GameOfLife.js"></script>
<script>
var gameOfLife,
canvas,
ctx,
generationNumberSpan
offBlackStyle = 'rgb(10, 10, 15)',
greyStyle = 'rgb(128, 128, 135)',
whiteStyle = 'rgb(255, 255, 255)',
sqSz = 20;
function getClickedCell(e) {
var x, y;
if (e.pageX || e.pageY) {
x = e.pageX;
y = e.pageY;
} else {
x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
return [Math.floor(x / sqSz), Math.floor(y / sqSz)];
}
function onCanvasClick(e) {
var cell = getClickedCell(e);
gameOfLife.toggleCell(cell[0], cell[1]);
}
function drawRectOnCell(x, y, style) {
style = style || offBlackStyle;
ctx.fillStyle = style;
ctx.fillRect(x * sqSz, y * sqSz, sqSz, sqSz);
}
function drawLines() {
var currentX, currentY;
var numberOfLinesX = canvas.width / sqSz - 1;
var numberOfLinesY = canvas.height / sqSz - 1;
ctx.lineWidth = 1;
for (currentX = 1; currentX < canvas.height / sqSz; currentX++) {
ctx.moveTo(0, sqSz * currentX + 0.5);
ctx.lineTo(canvas.width, sqSz * currentX + 0.5);
}
for (currentY = 1; currentY < canvas.width / sqSz; currentY++) {
ctx.moveTo(sqSz * currentY + 0.5, 0);
ctx.lineTo(sqSz * currentY + 0.5, canvas.height);
}
ctx.stroke();
}
function prepareGameOfLife() {
canvas = document.getElementById('gameOfLifeWorld');
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgb(10, 10, 15)';
gameOfLife = GameOfLife(canvas.width / sqSz, canvas.height / sqSz);
generationNumberSpan = document.getElementById('generation');
drawLines();
gameOfLife.onStep(function() {
var cx, cy;
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (cx = 0; cx < gameOfLife.get_width(); cx += 1) {
for (cy = 0; cy < gameOfLife.get_height(); cy += 1) {
if (gameOfLife.isLiving(cx, cy)) {
drawRectOnCell(cx, cy, offBlackStyle);
} else {
drawRectOnCell(cx, cy, whiteStyle);
}
}
}
drawLines();
generationNumberSpan.innerText = gameOfLife.get_generation();
});
gameOfLife.onCellPopulated(function(x, y) {
drawRectOnCell(x, y, offBlackStyle);
});
gameOfLife.onCellKilled(function(x, y) {
drawRectOnCell(x, y, whiteStyle);
});
canvas.addEventListener('click', onCanvasClick, false);
// gameOfLife.populateCell(1, 1);
// gameOfLife.populateCell(2, 1);
// gameOfLife.populateCell(2, 2);
// gameOfLife.populateCell(1, 2);
// gameOfLife.populateCell(1, 3);
gameOfLife.populateCells([[0, 0], [2, 0], [1, 1], [2, 1], [1, 2]])
}
function startGameOfLife() {
gameOfLife.start(100, -1);
}
</script>
<title>Conway's Game of Life</title>
</head>
<body onload="prepareGameOfLife()">
<canvas id="gameOfLifeWorld" width="500" height="500" style="border:1px solid #000;">
Conway's game of life - looks like you can't do canvas!
</canvas>
<input type="button" onclick="startGameOfLife()" value="Go!" />
<p>Currently in generation <span id="generation">0</span></p>
<p><a href="SpecRunner.html">Lemme have a look at those sweet, sweet unit tests</a></p>
</body>
</html>