Игра жизни Конвея — это клеточный автомат, разработанный британским математиком Джоном Хортоном Конвеем в 1970 году.



Игра жизни Конвея — Википедия
Игра впервые была опубликована в выпуске журнала Scientific American за октябрь 1970 года, в статье Мартина Гарднера «…en.wikipedia. орг



Он имеет сетку ячеек, которые являются либо «живыми», либо «мертвыми», которые превращаются в клетки следующего поколения, следуя четырем простым правилам:

  1. Любая живая клетка с менее чем двумя живыми соседями умирает, как будто от недонаселения.
  2. Любая живая клетка с двумя-тремя живыми соседями живет до следующего поколения.
  3. Любая живая клетка с более чем тремя живыми соседями умирает, как бы от перенаселения.
  4. Любая мертвая клетка, имеющая ровно три живых соседа, становится живой клеткой, как бы путем размножения.

Как начать

Первый шаг — это то, как большинство людей создают приложения React: create-react-app <app-name>. Это псевдоним для npx create-react-app, который должен быть установлен глобально npm install -g create-react-app. Этот процесс создает шаблонный код для вашего приложения. Затем вы можете cd <app-name> и yarn start открыть новое приложение в окне браузера.

Но как насчет сетки? Как нам заставить это проявиться? Это делается с помощью холста HTML5. В вашем компоненте Game.js внутри render(){} и return() (область JSX) напишите что-то вроде этого:

Ширина и высота изначально могут быть жестко закодированы, но в моем случае я в конечном итоге разработал сетки разных размеров (маленькие, средние и большие) с разными размерами ячеек.

Сетка рисуется с помощью функций холста:

drawBoard() вызывается дважды, один раз в componentDidMount() и один раз после изменения размера доски с помощью тега select, с таймаутом 10 мс для ожидания отрисовки холста.

Теперь о включении и выключении ячеек. Вы хотите, чтобы эта опция была доступна только тогда, когда сетка не анимируется. Это делается с помощью простого флага continueAnimating, установленного в состоянии.

Как это называется, используя флаг для предотвращения переключения при анимации:

Итак, теперь квадраты (или «ячейки») могут быть включены/желтыми или отключены/синими. Если вам интересно, мой любимый названный цвет CSS — «dodgerblue». Теперь пришло время анимировать. Это делается с помощью requestAnimationFrame(), который вызывает себя снова и снова. Этот следующий блок включает фактическую логику для проверки каждого соседа на предмет его статуса «живой/мертвый» (который в моих матрицах равен либо 0, либо 1) и соблюдения четырех правил игры.

Остальной код в компонентах работает следующим образом:

  1. Кнопка переключения для запуска и остановки анимации.
  2. Кнопка очистки, которая очищает сетку с функцией и пустой матрицей.
  3. Функция изменения скорости с помощью setTimeout().
  4. Способ изменить размер доски с параметрами, установленными в состоянии: cellSize, numX, numY, boardSize. Это также устанавливает для firstMatrix, secondMatrix и clearMatrix значения, соответствующие выбранному размеру.
  5. OnClick для холста, который изменяет записи массива на основе координат щелчков мыши на холсте.
  6. Рандомизатор, который использует Math.round() и Math.random() для рандомизации сетки.
  7. Средство выбора предустановленной конфигурации, которое настраивает сетку на определенные структуры с забавным поведением.

И в моем JSX:

  1. Кнопка старт/стоп
  2. Кнопка очистки
  3. Три кнопки скорости, которые меняют состояние и, таким образом, setTimeout
  4. Выпадающий размер доски
  5. Три раскрывающихся списка, зависящих от размера платы, с предустановленными конфигурациями. Это связано с тем, что Pulsar слишком велик для сетки 15x15, а планер Gosper слишком велик для сетки 50x50.
  6. Случайная кнопка
  7. Счетчик генерации

Это подводит итог! Чтобы начать игру, перейдите на мое дурацкое доменное имя.

Спасибо и наслаждайтесь!