js1024/2024.html at main · manybugsdev/js1024 · 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
<body>
  <style>
    h1,
    p {
      text-align: center;
    }
    table {
      margin: auto;
    }
    td {
      width: 1em;
      height: 1em;
    }
  </style>
  <h1>Life Game</h1>
  <div id="$"></div>
  <script>
    let A = (n) => Array.from({ length: n }),
      f = 0,
      t = A(30).map(() => A(30).fill(0)),
      d = (i, j) => ((t[i][j] = !t[i][j]), u()),
      L = 0,
      l = (i, j) =>
        [
          [i - 1, j - 1],
          [i - 1, j],
          [i - 1, j + 1],
          [i, j - 1],
          [i, j + 1],
          [i + 1, j - 1],
          [i + 1, j],
          [i + 1, j + 1],
        ].reduce((a, [i, j]) => a + (t[i]?.[j] ?? 0), 0),
      n = () => (
        (t = t.map((r, i) =>
          r.map(
            (c, j) => (
              (L = l(i, j)), !c ? (L == 3 ? 1 : 0) : L < 2 || L > 3 ? 0 : 1
            )
          )
        )),
        u()
      ),
      u = () => {
        $.innerHTML = `<p><button onclick="r()">${
          f ? "Stop" : "Run"
        }</button></p><table>${t.reduce(
          (a, r, i) =>
            a +
            `<tr>${r.reduce(
              (a, c, j) =>
                a +
                `<td style="background: ${
                  c ? "#111" : "#ccc"
                }" onclick="d(${i}, ${j})"></td>`,
              ""
            )}</tr>`,
          ""
        )}</table>`;
      },
      a = (f) => setTimeout(f, 500),
      z = () => f && (n(), a(z)),
      r = () => (f ? ((f = 0), u()) : ((f = 1), z()));
    u();
  </script>
</body>