GameOfLifeJS/index.html at master · lwestfall/GameOfLifeJS · 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
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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
<html>
  <head>
    <script src="gol.js"></script>
    <title>Game Of Life (JS)</title>
    <style>
      body {
        background-color: #ffbe5c;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      }

      .control-row {
        text-align: center;
        margin: 5px 0 5px 0;
      }

      .input-grp {
        margin: 0 1rem 0 1rem;
      }

      .description-container {
        display: flex;
        justify-content: flex-start;
        display: flex;
        flex-direction: row;
        text-align: left;
      }

      .instructions {
        width: 50%;
        margin-left: 3rem;
        margin-right: 3rem;
      }

      .about {
        width: 50%;
        margin-left: 3rem;
        margin-right: 3rem;
        font-size: 0.9rem;
      }

      table {
        border-collapse: collapse;
        margin-left: auto;
        margin-right: auto;
      }

      table > tbody > tr > td {
        width: 0.6rem;
        height: 0.6rem;
        border: 1px solid;
        user-select: none;
      }
    </style>
  </head>
  <body>
    <div>
      <table id="gol-table">
        <tbody id="gol-table-body"></tbody>
      </table>
      <div class="control-row">
        <span class="input-grp">
          <label for="time-step">Time Step (seconds):</label>
          <input
            id="time-step"
            type="text"
            size="3"
            value="0.1"
            onchange="handleSettingsChange()"
          />
        </span>
        <span class="input-grp">
          <label for="row-count">Rows:</label>
          <input
            id="row-count"
            type="text"
            size="3"
            value="50"
            onchange="handleSettingsChange(); initTable()"
          />
        </span>
        <span class="input-grp">
          <label for="col-count">Columns:</label>
          <input
            id="col-count"
            type="text"
            size="3"
            value="80"
            onchange="handleSettingsChange(); initTable()"
          />
        </span>
        <span class="input-grp">
          <label for="density">Randomize Density (%):</label>
          <input
            id="density"
            type="text"
            size="3"
            value="20"
          />
        </span>
      </div>
      <div class="control-row">
        <button type="button" id="play" onclick="handlePlayClick()">Play</button>
        <button type="button" id="pause" onclick="handlePauseClick()">Pause</button>
        <button type="button" id="step" onclick="handleStepClick()">Step Forward</button>
      </div>
      <div class="control-row">
        <button type="button" onclick="handleClearClick()">Clear</button>
        <button type="button" onclick="handleRandomizeClick()">Randomize</button>
      </div>
      <div class="description-container">
        <div class="instructions">
          <h2>Instructions:</h2>
          <ul>
            <li>
              Click a cell in the table to toggle it alive or dead (black is
              alive).
            </li>
            <li>
              You can also click and drag to "paint" living cells quickly.
            </li>
            <li>
              Click the Play button to run the simulation at the speed set in
              the Time Step input.
            </li>
            <li>Click the Pause button to stop the simulation.</li>
            <li>
              Click the Step Forward button while paused to advance one frame of
              the simulation.
            </li>
            <li>
              Click the Clear button to kill all cells.
            </li>
            <li>
              Click the Randomize button to randomly select living cells based on the Randomize Density (the likelihood for a given cell to come to life).
            </li>
          </ul>
        </div>
        <div class="about">
          <h2>About:</h2>
          <p>
            Conway's Game of Life was created by John Conway in 1970. It's a
            cellular automaton defined by a set of very simple rules from which
            chaotic and complex structures can emerge. More details about
            Conway's Game of Life can be found on
            <a href="https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life" target="_blank">
              Wikipedia
            </a>.
          </p>
          <p>The rules can be stated simply as the following, where a neighbor is defined as an adjacent cell in vertical, horizontal, and diagonal directions.
            <ul>
              <li>A living cell with two or three living neighbors survives.</li>
              <li>A dead cell comes to life when there are exactly three living neighbors.</li>
              <li>A living cell dies if there are more than three or fewer than two living neighbors.</li>
            </ul>
          </p>
          <p>
            I wrote this implementation of Conway's Game Of Life just for fun. My goal was to write it in pure HTML and vanilla Javascript and to keep it minimal. Bugs can be reported by <a href="https://github.com/lwestfall/GameOfLifeJS/issues" target="_blank">opening an issue</a>.
          </p>
          <p>
            The source code can be found on <a href="https://github.com/lwestfall/GameOfLifeJS" target="_blank">GitHub</a>.
          </p>
        </div>
      </div>
    </div>
  </body>
</html>