forked from danielimre/gameoflife
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
113 lines (109 loc) · 2.8 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
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/canvas.css">
<body>
<canvas id="canvas" width="1200" height="600"></canvas>
<div id="status">life is on hold</div>
<div id="howto">
<dl>
<dt>r</dt><dd>resume evolution</dd>
<dt>p</dt><dd>stop the world</dd>
<dt>c</dt><dd>big bang</dd>
<dt>m</dt><dd>push the world</dd>
<dt>n</dt><dd>hold your horses</dd>
<dt>click</dt><dd>spawn cell</dd>
</dl>
</div>
<script type="text/javascript" src="js/CellUtils.js"></script>
<script type="text/javascript" src="js/Cell.js"></script>
<script type="text/javascript" src="js/Game.js"></script>
<script type="text/javascript" src="lib/jquery-2.0.3.js"></script>
<script type="text/javascript">
var $canvas = $('#canvas'),
$status = $('#status'),
ctx = $canvas.get(0).getContext("2d"),
size = 4,
game = new Game();
game.onAfterTick(render);
game.onAfterCreateCell(render);
function render(cells) {
ctx.fillStyle="#ffffff";
ctx.fillRect(0,0,1200,600);
ctx.fillStyle="#000000";
cells.forEach(function(cell) {
ctx.fillRect(cell.x * size, cell.y * size, 3, 3);
});
}
$('body').click(function(e) {
var co = $canvas.offset();
var coords = {
x: Math.floor((e.clientX - co.left) / size),
y: Math.floor((e.clientY - co.top) / size)
};
game.createCell(coords.x, coords.y);
}).keypress(function(e) {
switch(e.which) {
case 112: //p
pauseGame();
break;
case 114: //r
resumeGame();
break;
case 99: //c
clearCanvas();
break;
case 109: //m
speedUpGame();
break;
case 110: //n
slowDownGame();
break;
}
});
var interval,
speed = 200;
function pauseGame() {
if (interval) {
clearInterval(interval);
}
$status.text('world has come to a hold..');
}
function resumeGame() {
pauseGame();
interval = setInterval(function() {game.tick()}, speed);
$status.text('generations ticking at ' + Math.round(1000/speed*100)/100 + '/ sec');
}
function clearCanvas() {
game.reset();
}
function speedUpGame() {
pauseGame();
speed = Math.max(50, speed - 50);
resumeGame();
}
function slowDownGame() {
pauseGame();
speed = Math.min(5000, speed + 50);
resumeGame();
}
/*
game.createCell(1, 0);
game.createCell(2, 1);
game.createCell(0, 2);
game.createCell(1, 2);
game.createCell(2, 2);
*/
game.createCell(150, 80);
game.createCell(151, 80);
game.createCell(152, 80);
game.createCell(154, 80);
game.createCell(150, 81);
game.createCell(153, 82);
game.createCell(154, 82);
game.createCell(151, 83);
game.createCell(152, 83);
game.createCell(154, 83);
game.createCell(150, 84);
game.createCell(152, 84);
game.createCell(154, 84);
</script>