forked from KerrLeada/JSofLife
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
131 lines (116 loc) · 2.95 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
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html>
<head>
<title>JS of Life</title>
</head>
<body>
<canvas id='canvas' onclick='toggle(event)' width='300' height='300'></canvas>
<button id='make' type='button' onclick='next()'>Make it move</button>
<script>
// Set up canvas
var canvas = document.getElementById('canvas');
var rect = canvas.getBoundingClientRect();
// Make grid
var gridSize = 50;
function createArray() {
var arr = new Array(gridSize);
for (var r = 0; r < gridSize; ++r) {
arr[r] = new Array(gridSize);
for (var c = 0; c < gridSize; ++c) {
arr[r][c] = false;
}
}
return arr;
}
var grid = createArray();
function getMousePos(canvas, e) {
return {
x: e.clientX - rect.left,
y: e.clientY - rect.top
};
}
function toggle(event) {
var etype = event.type;
/* the following is for compatability */
/* Moz populates the target property of the event object */
/* IE populates the srcElement property */
var etarget = event.target || event.srcElement;
//console.log(etype + ' '+etarget);
// Determine X and Y
var XY = getMousePos(canvas, event);
var r = Math.floor(XY.y / cellH);
var c = Math.floor(XY.x / cellW);
grid[r][c] = !grid[r][c];
draw();
}
// Determines height and widht for
// each cell in relationship to context
var cellW = Math.floor(canvas.width / gridSize);
var cellH = Math.floor(canvas.height / gridSize);
// Draw each cell
function drawRect(ctx, r, c) {
if (grid[r][c]) {
ctx.fillStyle = 'red';
}
else {
ctx.fillStyle = 'pink';
}
ctx.fillRect(c * cellW, r * cellH, cellW, cellH);
}
// Draw on canvas
function draw() {
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
for (var r = 0; r < gridSize; ++r) {
for (var c = 0; c < gridSize; ++c) {
drawRect(ctx, r, c);
}
}
}
function get(r, c) {
if (grid[r] && grid[r][c]) {
return 1;
}
return 0;
}
function count(r, c) {
// Right = c+1
var sum = get(r,c+1);
// Left = c-1
sum += get(r,c-1);
// Top = r-1
sum += get(r-1,c);
// Top left = r-1, c-1
sum += get(r-1,c-1);
// Top right = r-1, c+1
sum += get(r-1,c+1);
// Bottom = r+1
sum += get(r+1,c);
// Bottom left = r+1, c-1
sum += get(r+1,c-1);
// Bottom right = r+1, c+1
sum += get(r+1,c+1);
return sum;
}
function calc(nxt, r, c) {
var sum = count(r, c);
if ((sum == 2 && grid[r][c]) || sum == 3) {
nxt[r][c] = true;
}
}
function next() {
var nxt = createArray();
for (var r = 0; r < gridSize; ++r) {
for (var c = 0; c < gridSize; ++c) {
calc(nxt, r, c);
}
}
grid = nxt;
draw();
}
// IT'S ALIVE!
draw();
</script>
</body>
</html>