-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (96 loc) · 2.65 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
<! doctype html>
<html>
<head><title>Test</title>
<style>
.hide {
display: none;
}
canvas {
position: relative;
}
</style>
</head>
<body>
<strong>Cycles</strong><br />
<input type="number" value="-1" id="numCycles" hint="cycles" />
<button id="go">Go!</button>
<button id="stop" class="hide">Stop</button><br />
<p>
<input type="checkbox" id="diagnostic"/>Diagnostic Mode
<span id="diagnosticInfo"></span>
</p>
<p id="remainingCyclesP" class="hide"><strong><span id="cyclesTitle"></span>: <span id="remainingCycles"></span></strong></p>
<p id="results" class="hide"></p>
<canvas width="750" height="500"></canvas><br />
<button id="allDead">All Dead</button>
<button id="allAlive">All Alive</button>
<button id="randomize">Randomize</button>
</body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="life.js"></script>
<script>
var life
$(function() {
colors = {}
dead = 0
live = 1
colors[dead] = 'black'
colors[live] = '#3c3'
canvas = $('canvas').get(0)
life = new Life({
colors: colors,
cellSize: 10,
stableIn: 40,
canvas: canvas,
padding: 1,
cycleTime: 0,
cycles: $('#numCycles').val(),
onStart: function() {
numCycles = $('#numCycles').val()
$('#go').attr('disabled', 'disabled')
$('#remainingCyclesP').removeClass('hide')
$('#results').addClass('hide')
$('#remainingCycles').html(numCycles)
$('#stop').removeClass('hide')
},
onComplete: function() {
$('#remainingCyclesP').addClass('hide')
$('#results').html(life.result)
$('#results').removeClass('hide')
$('#stop').addClass('hide')
$('#go').removeAttr('disabled')
},
onGetCellInfo: function(cell) {
survive = '<strong style="color: '
neighbors = cell.liveNeighbors
willLive = cell.future
if (willLive == live) {survive += 'green'} else {survive += 'red'}
survive += '">' + willLive + '</strong>'
text = cell.status == live ? "Will Survive?" : "Will Grow?"
$('#diagnosticInfo').html('(' + cell.x + ',' + cell.y + '): ' + neighbors + " live neighbors. " + text + " " + survive)
}
})
})
$('#diagnostic').change(function(e) {
life.infoMode = $(this).is(':checked')
})
var grid = []
$('#go').click(function(e) {
life.run();
})
$('#stop').click(function(e) {
life.stop()
})
$('#allDead').click(function(e) {
e.preventDefault()
life.allDead()
});
$('#allAlive').click(function(e) {
e.preventDefault()
life.allAlive()
});
$('#randomize').click(function(e) {
life.randomize()
})
</script>
</html>