conway/index.html at master · nrsyed/conway · 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <link rel="stylesheet" type="text/css" href="src/conway.css">
    <meta charset="utf-8">
    <title>Interactive Conway's Game of Life</title>
  </head>
  <body>
    <div class="game-of-life">
      <div id="canvas-container">
        <canvas id="canvas" height=500 width=500></canvas>
        <div class="counter-row">
          <div class="counter">Generation: <span id="generation">0</span></div>
          <div class="counter">Live cells: <span id="live-cells">0</span></div>
        </div>
        <div class="controls">
          <span id="pause" class="button">Pause</span>
          <span id="randomize" class="button">Randomize</span>
          <span id="clear" class="button">Clear</span>
        </div>
      </div>

      <div class="settings">
        <div class="slider-row">
          <div class="slider-label">
            Survival range
          </div>
          <div class="slider">
            <input value="2" min="0" max="8" step="1" type="range"
              id="survival-min">
            <output id="survival-min-bubble" class="survival-min-color">2</output>
            <input class="transparent" value="3" min="0" max="8" step="1"
              type="range" id="survival-max">
            <output id="survival-max-bubble" class="survival-max-color">3</output>
          </div>
        </div>

        <div class="slider-row">
          <div class="slider-label">
            Birth value
          </div>
          <div class="slider">
            <input value="3" min="0" max="8" step="1" type="range"
              id="birth-val">
            <output id="birth-val-bubble">3</output>
          </div>
        </div>

        <form>
          Grid size (NxN):
          <input id="size" type="number" min=2 max=500 step=1 value=30>
          <br>
          Delay (ms):
          <input id="delay" type="number" min=1 max=5000 step=1 value=100>
          <br>
          Random density:
          <input id="density" type="number" min=0.01 max=1 step=0.01 value=0.08>
          <br>
          <input id="set" type="submit" value="Set">
        </form>

        <div id="instructions">
          <p class="bold">
            Click anywhere in the grid to toggle cells on/off.
          </p>
          <p>
            <span class="italic">Survival range</span>:
            Living cells with at least the
            <span class="survival-min-text">minimum</span>
            and at most the <span class="survival-max-text">maximum</span>
            number of neighbors survive to the next generation.
          </p>
          <p>
            <span class="italic">Birth value</span>: Dead cells with the selected
            number of neighbors become live cells.
          </p>
          <p>
            <span class="italic">Grid size</span>: Number of rows/columns.
          </p>
          <p>
            <span class="italic">Delay</span>: Milliseconds between generations.
          </p>
          <p>
            <span class="italic">Random density</span>: Probability (between
            0.01 and 1.0) of any given cell being alive when Randomize is clicked.
          </p>
          <p>
            Survival range and birth value can be adjusted in real time.
            Changes to grid size, delay, and random density take effect after
            clicking "Set". Changing grid size randomizes the grid.
          </p>
        </div>
      </div>
    </div>
  </body>
  <script src="src/conway.js"></script>
</html>