DragorWW/game.js

## game.js
// https://learn.javascript.ru/settimeout-setinterval
// https://learn.javascript.ru/js-animation


(function () {
  var cells = [];
    for (var i=0; i<64; i++) {
        cells[i] = [];
        for (var j=0; j<64; j++) {
            cells[i][j] = Math.random() >= 0.5;
        }
    }


    draw(cells);
})();

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Игра жизнь</title>
  <link rel="stylesheet" href="assets/style.css">
</head>
<body>
  <canvas id="c" width="512" height="512"></canvas>

  <div class="box patterns">
    <div class="subtitle">Игра «Жизнь» (англ. Conway's Game of Life)</div>
    клеточный автомат, придуманный английским математиком Джоном Конвеем в 1970 году.

    <h4>Правила</h4>
    <ul>
      <li>Место действия этой игры — «вселенная» — это размеченная на клетки поверхность или плоскость — безграничная, ограниченная, или замкнутая (в пределе — бесконечная плоскость).</li>
      <li>Каждая клетка на этой поверхности может находиться в двух состояниях: быть «живой» (заполненной) или быть «мёртвой» (пустой). Клетка имеет восемь соседей, окружающих её.</li>
      <li>Распределение живых клеток в начале игры называется первым поколением.</li>
    </ul>

    <h4>Каждое следующее поколение рассчитывается на основе предыдущего по таким правилам:</h4>
    <ul>
      <li>в пустой (мёртвой) клетке, рядом с которой ровно три живые клетки, зарождается жизнь;</li>
      <li>если у живой клетки есть две или три живые соседки, то эта клетка продолжает жить; в противном случае, если соседей меньше двух или больше трёх, клетка умирает («от одиночества» или «от перенаселённости»)</li>
    </ul>

    <h4>Игра прекращается, если</h4>
    <ul>
      <li>на поле не останется ни одной «живой» клетки</li>
      <li>конфигурация на очередном шаге в точности (без сдвигов и поворотов) повторит себя же на одном из более ранних шагов (складывается периодическая конфигурация)</li>
      <li>при очередном шаге ни одна из клеток не меняет своего состояния (складывается стабильная конфигурация; предыдущее правило, вырожденное до одного шага назад)</li>
    </ul>
  </div>
  <script>
    var canvas = document.getElementById('c').getContext('2d');
    canvas.strokeStyle = '#e1e1e1';
    canvas.fillStyle = 'cadetblue';

    function draw(cells, callback) {
        canvas.clearRect(0, 0, 512, 512);
        cells.forEach(function(row, x) {
            row.forEach(function(cell, y) {
                canvas.beginPath();
                canvas.rect(x*8, y*8, 8, 8);
                if (cell) {
                    canvas.fill();
                } else {
                    canvas.stroke();
                }
            });
        });
    }
  </script>
  <script src="game.js"></script>
</body>
</html>
	// https://learn.javascript.ru/settimeout-setinterval
	// https://learn.javascript.ru/js-animation


	(function () {
	var cells = [];
	for (var i=0; i<64; i++) {
	cells[i] = [];
	for (var j=0; j<64; j++) {
	cells[i][j] = Math.random() >= 0.5;
	}
	}


	draw(cells);
	})();
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Игра жизнь</title>
	<link rel="stylesheet" href="assets/style.css">
	</head>
	<body>
	<canvas id="c" width="512" height="512"></canvas>

	<div class="box patterns">
	<div class="subtitle">Игра «Жизнь» (англ. Conway's Game of Life)</div>
	клеточный автомат, придуманный английским математиком Джоном Конвеем в 1970 году.

	<h4>Правила</h4>
	<ul>
	<li>Место действия этой игры — «вселенная» — это размеченная на клетки поверхность или плоскость — безграничная, ограниченная, или замкнутая (в пределе — бесконечная плоскость).</li>
	<li>Каждая клетка на этой поверхности может находиться в двух состояниях: быть «живой» (заполненной) или быть «мёртвой» (пустой). Клетка имеет восемь соседей, окружающих её.</li>
	<li>Распределение живых клеток в начале игры называется первым поколением.</li>
	</ul>

	<h4>Каждое следующее поколение рассчитывается на основе предыдущего по таким правилам:</h4>
	<ul>
	<li>в пустой (мёртвой) клетке, рядом с которой ровно три живые клетки, зарождается жизнь;</li>
	<li>если у живой клетки есть две или три живые соседки, то эта клетка продолжает жить; в противном случае, если соседей меньше двух или больше трёх, клетка умирает («от одиночества» или «от перенаселённости»)</li>
	</ul>

	<h4>Игра прекращается, если</h4>
	<ul>
	<li>на поле не останется ни одной «живой» клетки</li>
	<li>конфигурация на очередном шаге в точности (без сдвигов и поворотов) повторит себя же на одном из более ранних шагов (складывается периодическая конфигурация)</li>
	<li>при очередном шаге ни одна из клеток не меняет своего состояния (складывается стабильная конфигурация; предыдущее правило, вырожденное до одного шага назад)</li>
	</ul>
	</div>
	<script>
	var canvas = document.getElementById('c').getContext('2d');
	canvas.strokeStyle = '#e1e1e1';
	canvas.fillStyle = 'cadetblue';

	function draw(cells, callback) {
	canvas.clearRect(0, 0, 512, 512);
	cells.forEach(function(row, x) {
	row.forEach(function(cell, y) {
	canvas.beginPath();
	canvas.rect(x8, y8, 8, 8);
	if (cell) {
	canvas.fill();
	} else {
	canvas.stroke();
	}
	});
	});
	}
	</script>
	<script src="game.js"></script>
	</body>
	</html>