life/index.html at master · dsartori/life · 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
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
<html>
<head>
	<script type="text/javascript" src="main.js" defer></script>
	<script type="text/javascript" src="life.js"></script>
	<link rel="stylesheet" href="style.css" type="text/css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu" />
</head>
<body>

<h1>John Conway's Game Of Life</h1>
<div id="controls" class="controls">
	<div class="control-group">
		<span class="label">Simulation</span>
		<input type="image" id="step" alt="step" src="img/step.svg">
		<input type="image" id="play" alt="play" src="img/play.svg">
		<input type="image" id="ffwd" alt="ffwd" src="img/fastforward.svg">
		<input type="image" id="pause" alt="pause" src="img/pause.svg">
	</div>
	<div class="separator"></div>
	<!-- Zoom controls -->
	<div class="control-group">
		<span class="label">Zoom</span>
		<input type="image" id="zoomIn" alt="zoom in" src="img/zoomin.svg">
		<input type="image" id="zoomOut" alt="zoom out" src="img/zoomout.svg">
		<input type="image" id="resetZoom" alt="reset zoom" src="img/zoomreset.svg">
	</div>
	<div class="separator"></div>
	<div class="control-group">
		<span class="label">Pattern</span>
		<select id="presets"></select>
		<input type="image" id="restart" alt="restart" src="img/refresh.svg">
	</div>
	<div class="control-group">
		<input type="image" id="help" alt="help" src="img/question.svg">
	</div>
</div>
<div id="overlay" class="overlay"><h2>Overview</h2>
	    <p>This is an implementation of John Conway’s Game of Life. In Life, “cells” live on a two-dimensional grid and survive, reproduce, and die based on four rules:
    <ul>
        <li>Any live cell with fewer than two live neighbours dies.</li>
    <li>Any live cell with more than three live neighbours dies.</li>
    <li>Any live cell with two or three live neighbours lives on.</li>
    <li>Any dead cell with exactly three live neighbours becomes a live cell.</li>
        </ul>
        <h2>Controls</h2>
        <p>Click or tap a cell on the board to toggle it's state. The board is larger than the view window. Scroll using gestures or the scroll bars. Select a starting pattern to use from the dropdown box.</p>
        <ul style="list-style-type:none">
        	<li><img src="img/step.svg" height=32px> Advance the simulation one step.</li>
        	<li><img src="img/play.svg" height=32px > Play the simulation forward at 1x speed</li>
        	<li><img src="img/fastforward.svg" height=32px> Play the simulation forward at 4x speed</li>
        	<li><img src="img/pause.svg" height=32px> Pause the simulation</li>
        	<li><img src="img/refresh.svg" height=32px> Load the selected board setup</li>
        	<li><img src="img/question.svg" height=32px> Toggle this help screen</li>
        	<li><img src="img/zoomin.svg" height=32px> Zoom in (make cells larger)</li>
        	<li><img src="img/zoomout.svg" height=32px> Zoom out (make cells smaller)</li>
        	<li><img src="img/zoomreset.svg" height=32px> Reset zoom to default</li>
        </ul>
        <p>The grid is now larger than before. Use scrollbars or drag to pan around the grid.</p>

</p>
<p>Code by Doug Sartori © 2020 based on "SimpleLife" © 2009. See license file for terms.</p>
<p>Icons by © 2014 Andreas Kainz &amp; Uri Herrera &amp; Andrew Lake &amp; Marco Martin &amp; Harald Sitter &amp; Jonathan Riddell &amp; Ken Vermette &amp; Aleix Pol &amp; David Faure &amp; Albert Vaca &amp; Luca Beltrame &amp; Gleb Popov &amp; Nuno Pinheiro &amp; Alex Richardson &amp; Jan Grulich &amp; Bernhard Landauer &amp; Heiko Becker &amp; Volker Krause &amp; David Rosca &amp; Phil Schaf&nbsp;/&nbsp;KDE, <a href="http://www.gnu.org/licenses/lgpl.html" title="GNU Lesser General Public License">LGPL</a>, <a href="https://commons.wikimedia.org/wiki/Breeze_icons">Link</a></p>
</div>
<div id="canvas-wrapper" class="wrapper">
</div>

</body>