JavaScript+Canvas场景下，如何判断线性矩阵中元素是否存在右侧邻接元素

架构老林

2026-4-14

我懂你现在在折腾Wave Function Collapse的边界判断，卡在怎么检查单元格有没有右侧邻居对吧？咱们先把逻辑理清楚，顺便也帮你修正下之前上下边界判断里的小问题——这些细节很容易踩坑！

首先，你的一维数组是用来模拟DIM×DIM的二维网格，每个元素的索引i对应的二维位置是：行号Math.floor(i/DIM)，列号i%DIM。那右侧邻居存在的核心判断就是：当前单元格不是所在行的最后一个元素。

对应的两种可行的判断表达式：

方式一：i % DIM !== DIM - 1
列号从0开始，每行最后一个元素的列号是DIM-1，只要当前列号不等于这个值，就有右侧邻居。
方式二：(i + 1) % DIM !== 0
如果当前是行尾，i+1就是下一行的第一个元素（索引是行号×DIM），模DIM的结果是0，反过来就说明不是行尾，有右侧邻居。

把这个逻辑加到你的代码里，右侧邻居的判断就应该是：

// 检查右侧邻居是否存在
if (i % DIM !== DIM - 1) {
  rightCell = matrix[i + 1];
}

另外，你之前的上下边界判断有错误，我顺便帮你修正下，避免数组越界：

上方邻居的判断：你之前写的if(i <= DIM)会导致i-DIM出现负数索引，正确的应该是当当前索引大于等于DIM时，才有上方元素：

if (i >= DIM) {
  aboveCell = matrix[i - DIM];
}

下方邻居的判断：之前的if(i <= grid.length-DIM)会让i+DIM超出数组最大索引（比如DIM=3，grid.length=9，i=6时i+DIM=9，而数组索引最大是8），正确的条件是i+DIM小于数组长度：

if (i + DIM < grid.length) {
  belowCell = matrix[i + DIM];
}

最后把修正后的边界判断部分整合起来，就是这样：

for(let i=0; i<DIM*DIM; i++)
{
   let cell = grid[i];
   let aboveCell = null;
   let belowCell = null;
   let rightCell = null;
   let leftCell = null;

   // 修正后的边界判断
   // 上方邻居：当前索引 >= DIM，才不会越界
   if (i >= DIM) {
      aboveCell = matrix[i - DIM];
   }

   // 下方邻居：i+DIM < 数组长度，确保不越界
   if (i + DIM < grid.length) {
      belowCell = matrix[i + DIM];
   }

   // 左侧邻居：当前不是行首（模DIM不等于0）
   if (i % DIM !== 0) {
      leftCell = matrix[i - 1];
   }

   // 右侧邻居：当前不是行尾（模DIM不等于DIM-1）
   if (i % DIM !== DIM - 1) {
      rightCell = matrix[i + 1];
   }

   // 后续可以在这里添加你的WFC规则判断逻辑
}

这样你就可以准确获取到存在的邻居元素，不会出现数组越界或者错误获取邻居的情况啦，后续加WFC的规则也能更顺畅~

备注：内容来源于stack exchange，提问作者Juan Perez