ConwaysGameOfLife/index.html at master · arman-ashrafian/ConwaysGameOfLife · 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
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>

<head>
    <title>Conway's Game of Life</title>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>
    <!-- Materialize  CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
    <!-- Materialize JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
    <style>
        #sketch {
            text-align: center;
        }

        #heading {
            text-align: center;
            font-size: 36pt;
        }

        .col.s2 > .btn {
            width: 100%
        }
    </style>
</head>

<body>
    <div class="container">
        <h1 id="heading">Conways Game of Life</h1>

        <div id="sketch">
        </div>
        <br>

        <div class='row buttonRow'>
            <div class='col s2'>
                <button id="clearButton" class="blue black-text btn">clear</button>
            </div>
            <div class="col s2">
                <button id="stopStartButton" class="red lighten-2 black-text btn">stop</button>
            </div>
            <div class="col s2">
                <button id="stepButton" class="green darken-1 black-text btn">step</button>
            </div>
            <div class="col s2">
                <button id="randomButton" class="cyan darken-1 black-text btn">random</button>
            </div>

            <div class='col s4 right-align'>
                <h5 id='generation'></h5>
            </div>
        </div>
        <div id="wiki" class='flow-text'>
            <h3>Rules</h3>
            <p>The universe of the Game of Life is an infinite, two-dimensional orthogonal grid of square cells, each of which
                is in one of two possible states, alive or dead, (or populated and unpopulated, respectively). Every cell
                interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally
                adjacent. At each step in time, the following transitions occur:</p>
            <ol>
                <li>Any live cell with fewer than two live neighbors dies, as if by under population.</li>
                <li>Any live cell with two or three live neighbors lives on to the next generation.</li>
                <li>Any live cell with more than three live neighbors dies, as if by overpopulation.</li>
                <li>Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.</li>
            </ol>
        </div>

    </div>

    <!-- JS -->
    <script src="main.js"></script>
</body>

</html>