本文旨在解决JavaScript扫雷游戏中，单元格邻近逻辑在网格边界处出现错误的问题。通过引入模块化算术进行边界条件判断，避免了单元格索引在网格边缘“环绕”的现象，确保了炸弹邻近单元格（如“绿色”和“蓝色”区域）的正确标记。同时，文章还提供了代码优化建议，包括使用Set数据结构和修正变量命名，以提升代码的健壮性和性能。
在开发像扫雷这样的网格游戏时，准确判断一个单元格的邻居是核心功能之一。然而，当游戏网格的单元格编号采用一维数组或线性索引时，计算其上下左右及对角线邻居的索引可能会在网格边界处产生错误，导致程序错误地识别出位于网格另一侧的单元格作为邻居。
理解边界问题
假设一个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）和规范的变量命名，能够进一步提升代码的性能和可维护性。这些优化措施对于构建健壮且用户体验良好的扫雷游戏至关重要。
