-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
42 lines (39 loc) · 1.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
<html>
<head>
<script src="game_of_life.js"></script>
<link rel="stylesheet" type="text/css" href="game_of_life.css">
</head>
<body>
<aside display="block">
<div class="aside_div">
<div display="inline">
<button id="run_bttn">Start</button>
<button id="step_bttn">Step</button>
<button id="clear_bttn">Clear</button>
</div>
<p>Horizontal grid size:</p>
<input type="number" min="1" value="50" step="1" id="size_x">
<p>Vertical grid size:</p>
<input type="number" min="1" value="30" step="1" id="size_y">
<p>Cell size: </p>
<input type="number" min="1" value="20" step="1" id="cell_size">
<p>Speed: </p>
<input type="number" min="1" max="100" value="10" id="speed">
</div>
<div class="aside_div">
<button id="randomize_bttn">Randomize board</button>
<p>% of alive cells</p>
<input type="number" min="1" max="100" value="10" id="randomize_input">
</div>
<div class="aside_div">
<p>Alive color:</p>
<input id="alive_color" type="color" value="#E6E6F0">
<p>Dead color:</p>
<input id="dead_color" type="color" value="#353535">
</div>
</aside>
<article style="float: left">
<canvas id="cnvs"></canvas>
</artile>
</body>
</html>