Статьи

«Игра жизни» Конвея

Сентябрь 21, 2018

Много лет назад, когда я впервые научился программировать, я был очарован симуляцией жизненных форм Джона Конвея «Игра жизни». За эти годы было множество вариантов, написанных на разных языках, на множестве платформ. Независимо от выбранного языка, кодирование собственной версии Game of Life было обрядом для любого начинающего программиста. Вот что я предлагаю продемонстрировать в этой статье.

Однако с сегодняшним повсеместным присутствием браузера и связанных языков программирования мы можем обойтись без традиционных сред программирования и языков. Вместо этого мы можем научиться логическому кодированию и обработке массивов, написав версию Game of Life для запуска в браузере.

Игровая доска

Игровое поле состоит из сетки ячеек. Каждая ячейка может быть логически включена или выключена, это означает, что в этой ячейке присутствует жизненная форма или ячейка пуста. Сетка может быть любого размера, который мы выбираем, но обычно сетка 10 х 10 является отправной точкой для начинающих.

Кроме того, мы начнем с заранее определенной сетки или начального поколения, а не введем ее с помощью мыши или клавиатуры. Следующая таблица показывает поколение семян, которое мы будем использовать, что приведет к колебательной популяции всего за одиннадцать поколений.

игра в жизнь

Правила распространения

Правила распространения могут быть сделаны как угодно сложными, но в этой минималистской реализации игры мы будем использовать самые простые правила:

  • Если ячейка пуста и в ней ровно три соседа, заполните ячейку.
  • Если ячейка заполнена и имеется менее двух или более трех соседей, очистите ячейку.

Это так просто. 

adjacent = countAdjacent(i, j);
switch (generationThis[i][j]) {
  case 0:
       if ( (adjacent == 3) ) {
         generationNext[i][j] = 1;
       }
       break;
  case 1:
       if ( (adjacent == 2) || (adjacent == 3) ) {
         generationNext[i][j] = 1;
       }
}

Дополнительный аспект простоты для этой демонстрации — иметь только одну форму жизни. Более чем одна жизненная форма, каждая со своим цветом, создаст очень интересную симуляцию, но сделает сложность кодирования непригодной для этой демонстрации.

Поколения

Существует ряд возможных результатов от этой симуляции формы жизни:

  • Вымирание.
  • Устойчивое состояние населения.
  • Колеблющееся население.
  • Открытое изменение населения.

Все, кроме последнего, можно перехватить с помощью JavaScript, проверив массивы, используемые для хранения данных генерации. Самый простой способ добиться этого — хранить три последовательных поколения в своих собственных массивах. Затем, после расчета каждого нового поколения, сравните массивы в поисках этих трех состояний.

  • Если новое поколение совершенно пусто, форма жизни исчезла.
  • Если соседние поколения идентичны, население устойчиво.
  • Если следующее и предыдущее поколения идентичны, население колеблется.

Это основа требуемой логики, так что теперь давайте подумаем, как отобразить игровое поле в браузере.

Пользовательский интерфейс

HTML, CSS и JavaScript — все, что требуется для игры в жизнь. В этом примере элемент CANVAS Можно также использовать сетку элементов DIVTABLE

Все, что нужно для игрового поля — это элемент canvas и кнопка для расчета следующего поколения. 

 <form>
<p>Generation: <span id="generation"></span> &nbsp; <span id="status"></span></p>
<canvas id="gameboard"></canvas>
<input type="button" value="generate next" id="btnNext">
</form>

Генерация семян может быть рассчитана после загрузки страницы, после чего каждое нажатие кнопки переводит игру в следующее поколение. В качестве альтернативы использованию кнопки вычисление каждого последующего поколения может быть автоматизировано с помощью функции JavaScript setTimeout() Это, однако, лучше оставить, пока мы не убедимся, что код работает правильно, и мы знаем, что можем перехватить три состояния поколения, перечисленные выше. 

 <script src="gameoflife.js"></script>
<script>
$(document).ready(function() {
  seedGeneration();
  $("#btnNext").click(function(){
    nextGeneration();
    checkStatus();
    copyGrids();
    drawGeneration();
  });
});
</script>

И это все, что нужно для минималистской реализации Game of Life в браузере. Полный код этой статьи, включая файл gameoflife.jsдоступен для скачивания .

Улучшение интерфейса будет заключаться в предоставлении интерактивного пользовательского ввода для настройки ячеек для генерации начального числа, но это выходит за рамки этой демонстрации.

Дальнейшее чтение

dmoz открытый каталог проекта Game of Life
Новости Game of Life

Резюме

В этой статье мы рассмотрели основные элементы написания браузерной версии «Игры жизни» Джона Конвея. Используя не что иное, как HTML, CSS и JavaScript, мы увидели, как создать простую симуляцию, которая изначально запускается в браузере, симуляцию, которая традиционно была написана на таких языках, как BASIC и Pascal.

40
Share: