Игра жизни Конвея, реализованная в React без использования холста, Джонатан Джамел Холлоуэй.

Правила игры, которые я буду реализовывать, следующие:

  • Если ячейка жива и у нее есть ровно 2 или 3 живых соседа, она остается живой.
  • Если клетка мертва и у нее ровно 3 живых соседа, она снова поднимается.

Я считаю, что самое сложное - это начало. Как будет реализована структура данных, содержащая сетку? Какой это будет тип структуры данных? Когда я впервые подумал об этом, я подумал о двусвязном списке, в котором каким-то образом есть верх и низ. По правилам игры все эти части должны быть доступны для проверки на наличие живых соседей. Я решил использовать объект массивов.

Причина, по которой я выбрал этот тип структуры данных, заключается в том, что путем увеличения и уменьшения я могу получить доступ к левому и правому, а также к верхнему и нижнему. Я начал с создания сетки, которая позволила бы мне проверить, как она будет выглядеть, и как только я почувствовал, что она хорошо выглядит, я изменила состояние, чтобы я мог регулировать размер сетки. Теперь, когда я продолжаю, я изменил некоторые из них, чтобы лучше объяснить, как я реализовал, хотя я использовал некоторые из своих исходных заметок при создании программы. Записывать свои мысли - хороший способ спроектировать вашу программу. Программа будет реализована на React, а это значит, что у нас может быть состояние. Для начала вот как выглядит мое состояние:

Теперь, когда матрица («сетка») пуста, нам нужно загрузить матрицу, чтобы мы могли ее отобразить. Для этого я создал функцию под названием set matrix up.

Я не думаю, что в этой функции есть что-то трудное для понимания, но я быстро резюмирую. Сначала я создаю вложенные циклы while, которые будут повторяться на основе настроек по умолчанию количества строк и столбцов в состоянии. Я создаю массив, а затем вставляю в него нули. После этой части я создаю массив, теперь, когда я пишу это, я думаю, мог ли я создать массив в первых двух вложенных циклах, безусловно, это было бы более эффективно. Для целей этой статьи имена переменных помогают немного лучше разобрать код. Записи объекта принимают объект в качестве аргумента, а затем запись (может быть как угодно называть) представляет собой массив длины два. Нулевой индекс - это ключ, а единичный индекс - это массив. Затем я вызываю эту функцию в компоненте Will Mount function.

Отсюда я создал способ включения и выключения ячейки.

Еще у меня есть сброс и генерация случайных функций:

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

Вы можете заметить функцию обновления строки col, которая выглядит следующим образом:

Мне еще предстоит это изменить, но сначала я подумал о том, чтобы позволить пользователю вводить информацию самостоятельно. Однако я изменил способ, которым пользователь изменяет столбцы и размер строки, но реализовал слайдер. Причина этого в том, что чем меньше пользователю нужно вводить, тем меньше вероятность того, что он сделает что-то, чего вы не планировали. Строки можно изменить, а затем нажать кнопку, чтобы изменить размер матрицы. Этому способствуют следующие функции:

Я создал две функции, хотя на самом деле мог использовать только одну. Причина, по которой я использовал два, заключается в том, что я могу сделать что-то другое для строки, а не для столбца. Однако из-за того, как я установил состояние, я мог обойтись без одной функции. Однако функция должна служить только одной цели, поэтому, если вам приходилось выполнять несколько задач, использование функции для выполнения нескольких задач неэффективно. Часто, когда я программирую, я планирую несколько вещей, которые мне могут не понадобиться позже, но при подготовке к изменениям.

Следующие две функции - это запуск игры и остановка игры, которые используют setInterval, а также clearInterval. Обычно запуск игры вызывает функцию запуска игры до тех пор, пока не будет очищен интервал.

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

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

По сути, эта функция ищет живых соседей, окружающих ячейку.

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

У меня также есть следующая функция для изменения предустановок смещения на основе сетки.

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

Выбор скорости составляет от 125 до 2000 миллисекунд.

Остальной код в react выглядит так.

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

В заключение, это был забавный проект, когда я все реализовал, были трудные части, чтобы завершить этот проект. Больше всего в этом проекте мне понравилось то, что я смог реализовать его без использования холста. Если вы посмотрите эту программу, я не нашел многих реализаций без использования холста. Я также подумал, что этот проект действительно демонстрирует, на что способен программист. Это поле с алгоритмами и возможностями проявить свои способности. Что еще более важно, написание этого блога помогло увидеть, где я мог бы очистить свой код и улучшить. Я всегда стараюсь совершенствоваться, и я знаю, что это, возможно, не лучшая практика, но мастерство приходит через практику.

Взгляните на код, который я реализовал с помощью коммитов, и окончательный код здесь https://github.com/LambdaSchool/Conways-Life/pull/184

Взгляните на приложение здесь https://codejoncode.github.io/Conways-Life/