Conway的JavaScript生活游戏-第八部分-数组处理

快速更新:仍在随该项目一起运输! 我在重新投放广告方面遇到了主要障碍。 一旦我击中150个组件,并且每500毫秒更新0.33–0.75个组件,事情就会开始滞后。 我完全理解React不是用于游戏制作的工具。 话虽如此,我仍在研究React,因为我想探索其他一些功能,无论游戏的最终结果如何,我认为这对我的工具带都是有价值的。

我还开始探索d3作为绘制网格的替代解决方案。 这有一些自己需要解决的障碍,而我对此感到很沮丧。

现在进入今天的主题:

数组操作!

目的是要解决这个问题:

进入:

这是一艘太空船。 康威生活游戏的一种已知配置始终表现相同。 我知道,最终我想让用户选择其中一个,而不必手动计算每个单元格,错过一些单元格并弄乱游戏玩法。 因此,使用Life Lexicon,我可以抓取一些基本配置,将其转​​换为二进制数组以供我的应用程序使用。

要成功将其中一种配置转换为我的设置,需要三件事。

  1. 表示配置的哪些单元是活动的/无效的数据
  2. 构成配置的单行的索引数。 您会从原始数组的顶部注意到没有后续的定界符。 当我从词典中抓取它们时,我正在抓住它们。
  3. 用户当前正在查看的游戏板的大小。

我只是向用户介绍适合其当前游戏板的配置。 这消除了管理他们尝试演奏比现有游戏更大的游戏的麻烦。 因此,知道了这一点,我知道只要每种配置的行长小于我们所经营的游戏板的行长。

我发现处理需要以视觉方式表示正方形或矩形的数组的最佳方法是将其转换为数组。

然后,您需要确定这些单元在游戏板上的位置。 我选择了中间位置,或者选择了不由奇数行组成的数组,仅在中间位置的右侧/下方。 一旦大致了解了需要放置的位置,就可以开始创建新的数组(永不变异!)。 我将顶部/底部和左侧/右侧填充存储为数组对,即[0,1],其中需要在数组的右侧添加一个额外的单元格,但左侧不添加任何单元格。

findPadding()函数作为独立的逻辑被分离出来,因为它可以在技术上用于两种情况,在这种情况下,原始堆栈阵列需要扩展得更宽或更高。

这给我们带来了弄清楚数组有多高的问题。 我选择的处理方式与我发现行填充的方式类似。 我使用数组的总长度和配置行的长度来收集此信息。 我也可以使用数组数组的长度,但这似乎不一致。

因此,此行长为17的B29看起来像这样,然后才能适合我们的方形网格:

假设用户当前盯着21 x 21的网格。 我们可以预料需要做一些补充。

在spread运算符的帮助下,填充行并不太困难:

填充顶部/底部需要花费更多时间。 它要求我们在知道顶部和底部需要填充多少行的基础上,还要知道整行的长度。 因此,我最后得到了一个redraw()函数,该函数查找需要在顶部和底部填充多少列,填充我的行,快速查看一行的长度,然后为顶部和底部创建填充底部。

这里最棘手的一点不是将数组减少为扁平数组。 实际上,它正在尝试如何创建零,[0、0、0、0]的多个数组,这些数组只不过是一个整数。

首先,我们创建一个由空数组组成的数组,以便最终需要填写一些数字。

  Array(4).fill([]); 
//返回
[[],[],[],[]]

然后,我们可以映射它们并将空数组替换为填充数组。

  Array(4).fill([])。map(()=> Array(2).fill(0)); 
//返回
[[0,0],[0、0],[0,0],[0,0]]

并且-由于我们在每个实例中仅返回副本,因此我们的原始阵列永远不会被弄乱!