Conway在不使用画布的情况下在React中实现了人生游戏
我将要实现的游戏规则如下：
- 如果一个单元还活着，并且恰好有2个或3个活着的邻居，则它保持活着
- 如果一个细胞死亡，并且恰好有3个活着的邻居，它会再次上升
我认为最困难的部分是开始。 保存网格的数据结构将如何实现？ 它将是什么类型的数据结构？ 当我第一次想到这一点时，我想到了一个以某种形式出现在顶部和底部的双链表。 由于游戏规则的原因，必须检查所有这些部分以检查周围的邻居。 我决定使用数组对象。
之所以选择这种数据结构，是因为通过递增和递减，我可以访问左侧和右侧以及顶部和底部。 我首先创建了一个网格，该网格将允许我测试它的外观，一旦感觉良好，便修改了状态，以便可以调整网格的大小。 现在，尽管我在创建程序时使用了一些原始笔记，但我仍在继续修改其中一些内容，以更好地解释我的实现方式。 写下您的想法是构建程序的好方法。 该程序将在React中实现，这意味着我们可以有一个状态。 首先，这是我的状态：
现在矩阵（“网格”）为空，我们将不得不加载矩阵以便显示它。 为此，我创建了一个名为set matrix up的函数。
我不认为该功能有很多难以理解的地方，但是我会很快总结。 我首先创建嵌套的while循环，该循环将基于状态的行数和列数的默认设置进行迭代。 我创建一个数组，然后将零推入该数组。 在这部分之后，我创建了数组，现在，在撰写本文时，我在考虑是否可以在前两个嵌套循环中创建数组，这肯定会更有效率。 出于本文的目的，变量名称有助于更好地分解代码。 对象条目将对象作为参数，然后条目（可以是您想调用的任何对象）是长度为2的数组。 零索引是键，一个索引是数组。 然后，我在组件Will Mount函数中调用此函数。
从这里开始，我创建了一种打开和关闭单元格的方法。
我也有重置并生成随机函数：
这些功能的目的是允许重置网格和游戏参数。 生成随机函数允许用户生成随机网格作为起点。
您可能会注意到更新行col函数看起来像这样：
我还没有改变，但是，我首先想到了允许用户自己输入信息。 但是，我更改了用户更改列和行大小但实现滑块的方式。 其背后的原因是，用户输入的次数越少，他们执行您未计划的事情的可能性就越小。 可以更改行，然后单击按钮以调整矩阵大小。 以下功能可帮助实现这一点：
实际上我只可以使用一个函数，所以我创建了两个函数。 我使用两次的原因是，我可能想对行然后对列做不同的事情。 但是，由于我设置状态的方式，我可以使用一个函数来摆脱困境。 但是，一个功能应该恰好用于一个目的，因此，如果您必须要做多个事情，而一个功能要做多个事情，则效率不高。 很多时候，当我编程时，我计划了很多事情，这些事情我以后可能实际上并不需要，但是为改变做准备。
接下来的两个功能是使用setInterval和clearInterval的开始游戏和停止游戏。 基本上，开始游戏将调用运行游戏功能，直到清除间隔为止。
这是运行游戏功能，也是下一代功能。 原因之二是因为运行游戏功能将一直运行到清除间隔。 仅当单击下一个按钮时，下一代才会运行。 因此，运行游戏仅可以调用下一代功能。
值得注意的是，在运行游戏和下一代功能中，有一个称为实时邻居功能。
基本上，此功能将查找仍在小区周围的邻居。
在游戏之外，可以更改单元格的颜色，因此我提供了以下功能：
我还具有以下功能来更改基于网格的预设。
还可以从默认值更改游戏速度。 在开始游戏功能中，我使用状态参数游戏速度是时间间隔。
速度选择范围为125到2000毫秒。
react中的其余代码如下所示。
最后一部分是使用条件显示将所有内容显示在屏幕上，以便为不同样式选择颜色和类名称。
总之，一旦我实现了所有事情，这就是一个有趣的项目，要完成这个项目有很多困难的部分。 我对这个项目最满意，因为我无需使用画布就能实现它。 如果您查找此程序，则在不使用画布的情况下不会发现很多实现。 我还认为该项目确实展示了编码人员可以做什么。 该领域具有算法和机会来展示您的技能。 更重要的是，撰写此博客有助于了解我可以在哪里清理代码并进行改进。 我一直在努力改进，我知道这可能不是最佳实践，但要通过实践来掌握。
看看我用commits实现的代码以及这里的最终代码https://github.com/LambdaSchool/Conways-Life/pull/184
在这里查看应用程序https://codejoncode.github.io/Conways-Life/
