Conway-s-Life-JS/conway.html at master · florian-s-code/Conway-s-Life-JS · GitHub

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="author" content="yhoyhoj">
	<title>Game of Life</title>
	<link rel="stylesheet" href="style-conway.css">
</head>
<body>
	<canvas>Your browser doesn't support Canvas, get a real browser. Mozilla's <a href="//www.mozilla.org/en-US/firefox/fx/#desktop">Firefox</a> is great. <!--Nobody will ever see this but Frefox is really great--></canvas>
	<p>A basic implementation of <a href="//en.wikipedia.org/wiki/Conway's_Game_of_Life">Conway's Game of Life</a> in HTML5, use mouse and click on the canvas to trigger cells or use WASD/ZQSD + Enter (better precision). Activate the calculation by setting the timer with the below form (and stop it before drawing or you'll see nothing) or use the Step button to see the changes step by step. You can change the dimension of the canvas with the second form.</p>
	<p>Changelog and code : <a href="//github.com/yhoyhoj/Conway-s-Life-JS">github.com/yhoyhoj/Conway-s-Life-JS</a></p>

	<div class="wrapper">
		<div class="control">
			<label for="time">Computation Interval (milliseconds) :</label>
			<input type="number" name="time" value="250" id="time">
			<input type="button" id="start" value="Start">
			<input type="button" id="stop" value="Stop" disabled>
			<input type="button" id="step" value="Step">
		</div>
		<div class="control">
			<input type="button" id="resetcounter" value="Reset counter">
		</div>
		<div class="control">
			<label for="time">Cells in width :</label>
			<input type="number" name="width" value="50" id="width"><br/>
			<label for="time">Cells in height :</label>
			<input type="number" name="height" value="50" id="height"><br/>
			<label for="time">Cell size (pixels) :</label>
			<input type="number" name="size" value="10" id="size">
			<input type="button" id="generate" value="Generate">
		</div>
	</div>

	<p>Experiment by yhoyhoj, more : <a href="/">Back to Index</a><p>

	<script type="text/javascript" src="conway.js"></script>
	<script type="text/javascript" src="main.js"></script>
</body>
</html>