Игра жизнь на javascript

Модель, показывающая возможность появления стабильных структур при простых начальных правилах в условиях замкнутой среды. Вики в помощь.

Результат.

Игра состоит в том, что вселенная – поле из клеточек, имеет заполненные (живые) и пустые клетки (мертвые). Каждую итерацию клетка может “ожить”, “умереть”, или “продолжить жить” в зависимости от состояния ближних клеток (восемь штук в разных направлениях)

  • Eсли рядом с метвой есть 3 живых, то клетка “оживает”.
  • Eсли рядом с живой есть 2-3 живых, клетка продолжает жить.
  • Eсли рядом с живой 1 или больше 3 живых, клетка “умирает”.

При таких простых условиях появляются стабильные структуры (пульсары), структуры, двигающиеся по вселенно, структуры порождающие другие структуры. Чем не модель зарождения жизни.

Вселенная может быть замкнутой поверхностью, когда правый край – продолжение левого, а верх – продолжение низа. Такой подход используется в реализации. Для хранения вселенной используется одномерный массив в ущерб простоте доступа к соседним элементам клетки. В будущем планируется переход на типизированный массив для скоростных оптимизаций. Поэтому проще в первой реализации описать формулы доступа к соседним клеткам через индекс клетки и ширину и высоту вселенной.

Формулы доступа к соседним клеткам писались вручную для каждого соседа, с учетом “сворачивания” вселенной. Код неоптимизирован. Например, если рядом с живой клеткой уже есть 4 живых, она в любом случае умрет, и не имеет смысла продолжать искать живых соседей у нее. Но скорее всего его оптимизация принесет больше проблем с усложнением кода, чем решит вопросов производительности.

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

Второй этап проверки – запустить шагающую структурку, и убедиться, что она не ломается.

Производительность первого вариант желает лучшего как в плане математики, так и в плане FPS (более менее смотрится поле 320 x 240, увеличение ведет у проседанию FPS – ов на моем ноуте).

Интересно выглядит лесенка javascript heap в вебинспекторе

Все из-за того, что на каждую итерацию создается новый массив. Возможно копирование массива можно будет избежать, используя несколько arrayBufferView для типизированного массива..

Список возможных оптимизаций. Хороший повод потрогать новые технологии, кстати.

  • Вынести математику в webworker. Иметь запас вычисленных состояний поля на несколько итераций вперед
  • Использовать типизированный массив.
  • asm.js. Для меня было странным не найти компилятора из js в asm.js. Поищу еще, но я был уверен, что такой существует.
  • Не перерисовывать те области канваса, которые не требуют перерисовки.

Этого эксперимента не было, если бы ему не предшествовали размышления о жизни.

Share
Send
Pin
Popular