ライフゲーム (Wikipedia)

Manual: 
Auto: 
  Change Duration: 
Change Size: 
玲音/lain: 

Full Screen: ●, 玲音/lain


Code 

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ライフゲーム</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Kaku+Gothic+New&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&display=swap');
/*:root {
  --text-font: 'Inter', Helvetica, 'Zen Kaku Gothic New', sans-serif;
  --code-font: 'Fira Code', sans-serif;
  }*/
body {
margin: 3% 5% 5% 5%;
}
pre {
  /*font-family: 'Fira Code', sans-serif;*/
  font-family: sans-serif;
color: blue;
overflow: auto;
}
button.hoge {
  /*font-weight: bold;*/
  /*padding: 0.5em 1em;*/
  background-color: #EEE;
  border-radius: 0.5em;
}
#text-font {
  font-family: 'Inter', Helvetica, /*'Zen Kaku Gothic New',*/sans-serif;
}
#code-font: {
  font-family: 'Fira Code', sans-serif;
}
@media (min-width: 768px) {
  #select {
    float: right;
    width: 50%
  }
  #main {
    float: left;
    width: 50%
  }
}
#board { font-size: 90% }
#breadcrumbs { font-size: 90% }
</style>
<script>
"use strict";
let y = 100;
function larger() { y *= 1.1; document.getElementById('board').style.fontSize = y + '%'; }
function smaller() { y /= 1.1; document.getElementById('board').style.fontSize = y + '%'; }

let g = 0, dt = 500, a = [], b = [];
let t = 0, lain_v = false;
let lain_array = ['玲', '音', 'ｌ', 'ａ', 'ｉ', 'ｎ'];
let iv_id, st = true;
let H = 20, W = 30;

/*
   function check() {
   dt = document.getElementById('change_duration').value;
   }
 */

function draw() {
  let s = '';
  for (let i = 1; i <= H; i++) {
    for (let j = 1; j <= W; j++) {
      let k = i * (W + 1) + j;
      if (a[k])
        s += (lain_v ? lain_array[Math.floor((Math.random() * 100) % 6)] : '●');
      else
        s += '　';
    }
    s += '\n';
  }
  s += "Generation: " + g;
  document.getElementById("board").textContent = s;
}

function update() {
  //dt = document.getElementById('change_duration').value;
  g++;

  for (let i = 1; i <= H; i++) {
    for (let j = 1; j <= W; j++) {
      let k = i * (W + 1) + j;
      if (a[k]) {
        b[k-(W + 2)]++; b[k-(W + 1)]++; b[k   -   W]++;
        b[k   -   1]++;                 b[k   +   1]++;
        b[k   +   W]++; b[k+(W + 1)]++; b[k+(W + 2)]++;
      }
    }
  }
  for (let k = 0; k < (H + 1) * W + (W + 2); k++) {
    if (b[k] != 2) a[k] = (b[k] == 3);
    b[k] = 0;
  }
  draw();
}

for (let k = 0; k < (H + 1) * W + (W + 2); k++) {
  a[k] = false; b[k] = 0;
}

a[13*(W + 1)+H] = true;
a[12*(W + 1)+H] = true;
a[14*(W + 1)+H] = true;
a[13*(W + 1)+(H - 1)] = true;
a[12*(W + 1)+(H + 1)] = true;

function start() {
  st = false;
  draw();
  iv_id = setInterval(update, dt);
}

function play() {
  st = false;
  clearInterval(iv_id);
  iv_id = setInterval(update, dt);
}

function start_or_play() {
  if (st)
    start();
  else
    play();
}

function stop() {
  clearInterval(iv_id);
  st = true;
}

function draw_or_stop() {
  if (!st)
    stop();
  else
    draw();
}

function cd10() {
  clearInterval(iv_id);
  dt = 10;
  if (!st)
    iv_id = setInterval(update, dt);
}

function cd100() {
  clearInterval(iv_id);
  dt = 100;
  if (!st)
    iv_id = setInterval(update, dt);
}

function cd500() {
  clearInterval(iv_id);
  dt = 500;
  if (!st)
    iv_id = setInterval(update, dt);
}

function cd1000() {
  clearInterval(iv_id);
  dt = 1000;
  if (!st)
    iv_id = setInterval(update, dt);
}

//window.addEventListener('DOMContentLoaded', draw);
</script>
</head>
<body>

<div id="select">
<nav id="breadcrumbs">
<a class="text-font" href="../../">ホーム</a> &gt;
<a class="text-font" href="../">study</a> &gt;
<a class="text-font" href="./">1</a> &gt;
</nav>

<h2><span class="text-font">ライフゲーム (</span><a href="https://ja.wikipedia.org/wiki/?curid=16010"><span class="text-font">Wikipedia</span></a><span class="text-font">)</span></h2>

<span class="text-font">Manual:</span>&nbsp;
<button type="button" class="text-font" onclick="draw_or_stop()">Play</button>
<button type="button" class="text-font" onclick="update()">Next</button>
<br>

<span class="text-font">Auto:</span>&nbsp;
<button type="button" class="text-font" onclick="start_or_play()">Play</button>
<button type="button" class="text-font" onclick="stop()">Stop</button>
<br>&nbsp;&nbsp;<span class="text-font">Change Duration:&nbsp;</span>
<button type="button" onclick="cd10()">10ms</button>
<button type="button" onclick="cd100()">100ms</button>
<button type="button" onclick="cd500()">500ms</button>
<button type="button" onclick="cd1000()">1000ms</button>
<br>

<span class="text-font">Change Size:&nbsp;</span>
<button type="button" onclick="larger()">Larger</button>
<button type="button" onclick="smaller()">Smaller</button>
<br>

<span class="text-font">玲音/lain:&nbsp;</span>
<button type="button" class="text-font" onclick="lain_v = true">ON</button>
<button type="button" class="text-font" onclick="lain_v = false">OFF</button>
<p class="text-font">Full Screen: <a href="full_game-of-life.html">●</a>, <a href="lain_game-of-life.html">玲音/lain</a></p>
<br>
</div>

<div id="main">
<pre id="board"></pre>
</div>

</body>
</html>