React - это библиотека javascript с открытым исходным кодом, используемая для создания пользовательских интерфейсов. С момента своего выпуска React становился все более популярным. Имея это в виду, почему бы не провести несколько экспериментов, чтобы увидеть, как он себя ведет! Вот почему я решил реализовать игру Конвея в React.
Идея реализовать это, помимо того, что я уже упоминал ранее, заключается просто в том, что это звучит как забавная вещь в React и хороший вызов для изучения кое-чего. Если вам интересно, проект можно найти здесь.
Реализация Game of Life будет разделена на две части. Этот первый больше сфокусируется на структуре проекта. Вторая часть будет больше сосредоточена на реализации логики и наблюдении за «волшебством».
Что такое Игра жизни?
Игра Жизни была впервые представлена британским математиком Джоном Хортоном Конвеем в 1970 году. Смысл в том, чтобы определить непредсказуемый клеточный автомат, который представляет собой сетку ячеек, каждая из которых имеет конечное количество состояний, таких как включено или выключено.
Так из чего состоит настоящая игра? Игра вращается вокруг набора правил, которые будут рекурсивно взаимодействовать с текущим состоянием сетки. Вот почему ее еще называют игрой без игроков. Игра состоит из бесконечной двумерной ортогональной сетки квадратных ячеек.
Каждая ячейка может быть мертва или жива, следовательно, состояние может быть включено или выключено. Каждая ячейка будет взаимодействовать со своими 8 соседями. Эти соседи - это ячейки, которые по горизонтали, вертикали и диагонали примыкают к текущей ячейке.
Для этого у нас есть 4 правила:
1. Живая клетка с менее чем двумя живыми соседями умирает.
2. Живая клетка с двумя или тремя соседями доживает до следующего поколения.
3. Живая клетка с более чем деревом соседей умирает.
4. Мертвая клетка с тремя соседями возрождается и становится живой клеткой.
Поэтому, когда игра начнется, эти правила будут применены и обновят состояние сетки для следующего поколения. Идея состоит в том, что мы собираемся оценить живые клетки и их соседей, чтобы узнать, в каком состоянии они будут в следующем поколении.
Настройка проекта
Теперь, когда мы знаем правила игры, приступим к настройке. Сначала давайте создадим проект с React. В консоли перейдите к месту, где вы хотите сохранить папку, и напишите следующее:
create-react-app game-of-life
cd game-of-lifeТеперь, когда наш проект создан, давайте очистим его. Удалите файлы App.test.js и logo.svg и создайте папку с именем logic в папке src. . Внутри этой папки логики создайте файл с именем Universe.js.
Это должно выглядеть примерно так:
Рисование пользовательского интерфейса
Теперь, когда наша структура настроена, давайте начнем с рисования пользовательского интерфейса в функции рендеринга App.js. Одна вещь, которая может быть полезна, - это иметь заголовок. В этом разделе мы дадим пользователю возможность сообщить нам, сколько строк и столбцов будет в сетке. Здесь мы просто предполагаем, что сетка будет видна пользователю. Логика игры будет использовать бесконечную сетку. Мы также собираемся добавить две кнопки: кнопку запуска, чтобы запустить игру, и кнопку остановки, чтобы остановить игру. Также мы собираемся добавить структуру, чтобы React мог загружать сетку. Имейте в виду, что теперь в сетке будет указана доска. Код должен выглядеть примерно так:
Теперь давайте заменим css в App.css нашим css.
Проект не будет работать только с этим. На этом этапе давайте поищем и добавим то, что отсутствует в нашем файле App.js. Нам нужна функция для изменения количества строк и функция для изменения количества столбцов. Также нам нужна функция для рендеринга нашей доски. Функция для запуска и остановки игры и, конечно же, функция для запуска самой игры. Поскольку наша визуальная доска не будет бесконечной, мы ограничим ее максимум 90 столбцами и 20 строками. Это будет размер доски по умолчанию. Ваш код должен выглядеть следующим образом:
После всего этого мы получаем html-структуру для нашей игры. Хотя доска не отображается, теперь мы можем увидеть, как выглядит наш заголовок.
Давайте наконец добавим нашу доску в игру. Для этого нам нужно создать вложенный цикл for. Он будет отвечать за создание каждой строки и столбца и добавление соответствующих ячеек на нашу доску. Поэтому добавьте следующее к функции renderBoard в App.js.
Также добавьте новый компонент с именем Cell после класса App. Это понадобится для рисования каждой ячейки доски.
Не забудьте добавить CSS для наших ячеек. Добавьте следующий фрагмент в файл App.css.
После этого наша игра будет выглядеть так:
Итак, теперь у нас настроен визуальный макет. Мы все еще должны заставить его что-то делать. Нам нужно заставить работать кнопки, входы и добавить поведение каждой из ячеек на доске. В следующем посте этой серии основное внимание будет уделено реализации игровой логики, поэтому поведение ячеек будет добавлено только тогда.
Функции на месте, просто нужно что-то делать! Поэтому измените код handleRowChange, handleColumnChange, startGame и stopGame, чтобы он выглядел так:
Последнее, чего не хватает, - это состояние платы. Это будет полезно, чтобы мы могли контролировать, когда пользователь может изменить состояние доски, а также для предотвращения случая, когда пользователь нажимает кнопку запуска несколько раз и продолжает увеличивать интервал. Добавьте в конструктор в App.js следующее:
Теперь мы можем контролировать количество столбцов, строк, а также время запуска и остановки игры.
Это конец первой части. В следующей части мы реализуем логику игры, чтобы мы могли «поиграть» и посмотреть, как ведут себя разные паттерны.
Мне нравится создавать продукты, и я нашла себе место для этого в Runtime-Revolution. Если вам интересно, кто мы и чем мы занимаемся, обязательно свяжитесь с нами!
