在开发像扫雷这样的网格游戏时，准确判断一个单元格的邻居是核心功能之一。然而，当游戏网格的单元格编号采用一维数组或线性索引时，计算其上下左右及对角线邻居的索引可能会在网格边界处产生错误，导致程序错误地识别出位于网格另一侧的单元格作为邻居。
理解边界问题
假设一个N x N的网格，单元格从1开始编号，按行从左到右递增。gridLength表示每行的单元格数量（即网格边长）。 对于一个编号为cellNumb的单元格：
- 其左侧邻居是 cellNumb - 1
- 其右侧邻居是 cellNumb + 1
- 其上方邻居是 cellNumb - gridLength
- 其下方邻居是 cellNumb + gridLength
- 对角线邻居以此类推。
问题在于，当cellNumb位于网格的左边缘（如1, 11, 21...）时，cellNumb - 1会指向前一行的最后一个单元格，而不是一个无效的或非法的索引。同理，当cellNumb位于右边缘（如10, 20, 30...）时，cellNumb + 1会指向下一行的第一个单元格。这种“环绕”行为是扫雷游戏逻辑所不希望的。
解决方案：引入边界条件判断
为了解决这个问题，我们需要在检查水平方向（左右及对角线）的邻居时，额外判断当前单元格是否位于网格的左右边界。这可以通过模运算来实现。
对于从1开始编号的单元格：
- 右边界判断 (atRightSide): 如果 cellNumb 是 gridLength 的倍数，则它位于右边界。 const atRightSide = cellNumb % gridLength === 0;
- 左边界判断 (atLeftSide): 如果 cellNumb 除以 gridLength 的余数为1，则它位于左边界。 const atLeftSide = cellNumb % gridLength === 1;
将这些边界判断应用于邻居检查，可以有效避免环绕问题。
立即学习“Java免费学习笔记（深入）”；
示例代码：处理“绿色”单元格（一层邻居）
以下代码展示了如何利用 atLeftSide 和 atRightSide 变量来修正“绿色”单元格的逻辑：
function updateCellDisplay(singleCell, bombsArray, numbOfCells) {
// 修正拼写：lenght -> length
const gridLength = Math.sqrt(numbOfCells);
const cellNumb = Number(singleCell.textContent);
// 1-indexed 单元格的左右边界判断
const atRightSide = cellNumb % gridLength === 0;
const atLeftSide = cellNumb % gridLength === 1;
if (bombsArray.includes(cellNumb)) {
singleCell.classList.add('bomb');
} else if (
// 左侧邻居：如果不在左边界，则检查 cellNumb - 1
(!atLeftSide && bombsArray.includes(cellNumb - 1)) ||
// 右侧邻居：如果不在右边界，则检查 cellNumb + 1
(!atRightSide && bombsArray.includes(cellNumb + 1)) ||
// 上方邻居：不受水平边界影响
bombsArray.includes(cellNumb - gridLength) ||
// 下方邻居：不受水平边界影响
bombsArray.includes(cellNumb + gridLength) ||
// 左上对角线：如果不在左边界，则检查 cellNumb - gridLength - 1
(!atLeftSide && bombsArray.includes(cellNumb - gridLength - 1)) ||
// 右上对角线：如果不在右边界，则检查 cellNumb - gridLength + 1
(!atRightSide && bombsArray.includes(cellNumb - gridLength + 1)) ||
// 左下对角线：如果不在左边界，则检查 cellNumb + gridLength - 1
(!atLeftSide && bombsArray.includes(cellNumb + gridLength - 1)) ||
// 右下对角线：如果不在右边界，则检查 cellNumb + gridLength + 1
(!atRightSide && bombsArray.includes(cellNumb + gridLength + 1))
) {
singleCell.classList.add('green');
singleCell.addEventListener('click', function () {
addGreenPoints();
});
}
// ... 其他逻辑，例如蓝色单元格
}扩展到“蓝色”单元格（两层邻居）
处理距离炸弹两格远的“蓝色”单元格时，逻辑会变得更复杂，因为需要考虑两步水平移动的边界情况。我们需要判断单元格是否位于网格的最左两列或最右两列。
- 最右两列判断 (twoRightSide): 单元格位于右边界 (cellNumb % gridLength === 0) 或其右侧邻居位于右边界 ((cellNumb + 1) % gridLength === 0)。 const twoRightSide = cellNumb % gridLength === 0 || (cellNumb + 1) % gridLength === 0;
- 最左两列判断 (twoLeftSide): 单元格位于左边界 ((cellNumb - 1) % gridLength === 0) 或其左侧邻居位于左边界 ((cellNumb) % gridLength === 2)。 const twoLeftSide = (cellNumb - 1) % gridLength === 0 || (cellNumb) % gridLength === 2;
示例代码：处理“蓝色”单元格
function updateCellDisplay(singleCell, bombsArray, numbOfCells) {
const gridLength = Math.sqrt(numbOfCells);
const cellNumb = Number(singleCell.textContent);
const atRightSide = cellNumb % gridLength === 0;
const atLeftSide = cellNumb % gridLength === 1;
// 用于两步水平移动的边界判断
const twoRightSide = cellNumb % gridLength === 0 || (cellNumb + 1) % gridLength === 0;
const twoLeftSide = (cellNumb - 1) % gridLength === 0 || (cellNumb) % gridLength === 2;
// ... 绿色单元格逻辑 (同上)
// 蓝色单元格逻辑
else if (
// 距离炸弹两格远的水平邻居
(!twoLeftSide && bombsArray.includes(cellNumb - 2)) ||
(!twoRightSide && bombsArray.includes(cellNumb + 2)) ||
// 距离炸弹两格远的垂直邻居
bombsArray.includes(cellNumb - (gridLength * 2)) ||
bombsArray.includes(cellNumb + (gridLength * 2)) ||
// 距离炸弹两格远的对角线邻居 (例如：↖↖, ↗↗, ↙↙, ↘↘)
(!twoLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) - 2)) || // ↖↖
bombsArray.includes(cellNumb - (gridLength * 2) - 1) || // ↖
bombsArray.includes(cellNumb - (gridLength * 2) + 1) || // ↗
(!twoRightSide && bombsArray.includes(cellNumb - (gridLength * 2) + 2)) || // ↗↗
(!twoRightSide && bombsArray.includes(cellNumb - gridLength + 2)) || // ➡ (右移两格，上一行)
(!twoRightSide && bombsArray.includes(cellNumb + gridLength + 2)) || // ↘ (右移两格，下一行)
(!twoRightSide && bombsArray.includes(cellNumb + (gridLength * 2) + 2)) || // ↘↘
bombsArray.includes(cellNumb + (gridLength * 2) + 1) || // ➡ (右移一格，两行下)
bombsArray.includes(cellNumb + (gridLength * 2) - 1) || // ⬅ (左移一格，两行下)
(!twoLeftSide && bombsArray.includes(cellNumb + (gridLength * 2) - 2)) || // ↙↙
(!twoLeftSide && bombsArray.includes(cellNumb + gridLength - 2)) || // ⬅ (左移两格，下一行)
(!twoLeftSide && bombsArray.includes(cellNumb - gridLength - 2)) // ⬅ (左移两格，上一行)
) {
singleCell.classList.add('blue');
singleCell.addEventListener('click', function () {
addBluePoints();
});
}
}注意事项与优化建议
变量命名修正: 代码中多次出现了 gridLenght，正确的拼写应该是 gridLength。保持一致且正确的命名有助于代码的可读性和维护性。
-
bombsArray 优化: 当前 bombsArray 是一个数组，使用 includes() 方法进行查找的时间复杂度是 O(n)。如果炸弹数量较多，这会影响性能。更优化的做法是将其转换为 Set 数据结构。Set 的 has() 方法查找时间复杂度为 O(1)，能够显著提升性能。
// 初始化时将炸弹数组转换为Set const bombsSet = new Set(bombsArray); // 在逻辑判断中使用 Set.has() if (bombsSet.has(cellNumb)) { // ... } else if ( // ... bombsSet.has(cellNumb - 1) || // ... ) { // ... } 代码可读性: 对于复杂的条件判断，可以考虑将其拆分为更小的辅助函数或使用更清晰的变量名，以提高代码的可读性。例如，可以定义 isNeighborOfBomb(cellNumb, bombsSet, gridLength, isGreen) 这样的函数。
总结
通过在扫雷游戏的单元格逻辑中引入精确的边界条件判断，并结合模块化算术，可以有效解决单元格索引在网格边缘“环绕”的问题，确保邻近单元格的正确识别。此外，采用更高效的数据结构（如Set）和规范的变量命名，能够进一步提升代码的性能和可维护性。这些优化措施对于构建健壮且用户体验良好的扫雷游戏至关重要。
