在开发基于网格的游戏，特别是像扫雷这样的项目时，一个常见的挑战是正确处理网格的边界条件。当计算一个单元格的邻居时，如果简单地通过索引加减来确定，当单元格位于网格边缘时，这些操作可能会导致索引超出边界，甚至“环绕”到网格的另一侧，从而产生错误的邻居判断。本教程将详细探讨如何通过引入边界检查逻辑，精确地确定单元格的邻居，并应用于扫雷游戏的“绿色”和“蓝色”单元格标记。
1. 问题背景：边界效应的产生
在扫雷游戏中，我们需要根据炸弹的位置来标记其周围的单元格。例如，紧邻炸弹的单元格可能被标记为“绿色”，而距离炸弹稍远的单元格可能被标记为“蓝色”。通常，我们会通过计算当前单元格索引的x+1（右邻）、x-1（左邻）、x+gridLength（下邻）、x-gridLength（上邻）以及对应的对角线邻居来判断。
然而，这种简单的加减法在遇到网格边界时会失效。例如，在一个10x10的网格中，如果单元格50（右边界）的右邻是51，但实际上51是下一行的第一个单元格，这就会导致逻辑错误。同样，单元格51的左邻是50，但如果它位于左边界，其左邻应该是上一行的最后一个单元格，而不是当前行的前一个单元格。
// 原始的错误判断逻辑示例
// 假设cellNumb从1开始计数，gridLength为网格边长
if (bombsArray.includes(cellNumb - 1) // 左侧
|| bombsArray.includes(cellNumb + 1) // 右侧
|| bombsArray.includes(cellNumb - gridLength) // 上方
|| bombsArray.includes(cellNumb + gridLength) // 下方
|| bombsArray.includes(cellNumb - gridLength - 1) // 左上
|| bombsArray.includes(cellNumb - gridLength + 1) // 右上
|| bombsArray.includes(cellNumb + gridLength - 1) // 左下
|| bombsArray.includes(cellNumb + gridLength + 1) // 右下
) {
singleCell.classList.add('green');
}上述代码没有考虑边界，当cellNumb在左边界时，cellNumb - 1会指向上一行的末尾；当cellNumb在右边界时，cellNumb + 1会指向下一行的开头。对角线邻居的计算也存在类似问题。
2. 解决方案：引入模运算进行边界判断
解决边界效应的关键在于使用模运算（%）来确定单元格是否位于特定边界。由于本案例中的单元格编号从1开始（而不是0），我们需要对模运算的逻辑进行相应调整。
立即学习“Java免费学习笔记（深入）”；
假设gridLength是网格的边长，cellNumb是当前单元格的编号（1-indexed）。
- 判断是否在右边界： 如果一个单元格编号能被gridLength整除，则它位于该行的最右侧。 const atRightSide = cellNumb % gridLength === 0;
- 判断是否在左边界： 如果一个单元格编号除以gridLength的余数为1，则它位于该行的最左侧。 const atLeftSide = cellNumb % gridLength === 1;
有了这两个布尔变量，我们就可以在判断邻居时，排除那些会跨越边界的非法操作。
2.1 标记“绿色”单元格（直接邻居）
“绿色”单元格是与炸弹直接相邻的单元格（上下左右及对角线）。在判断这些邻居时，我们需要确保操作不会跨越左右边界。
// 获取网格边长和当前单元格编号
let 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();
});
}通过在每个可能跨越左右边界的判断前加上!atLeftSide或!atRightSide条件，我们确保了只有在有效范围内才进行邻居检查。
2.2 标记“蓝色”单元格（二级邻居）
“蓝色”单元格代表距离炸弹更远的区域，通常是距离炸弹两格的单元格。这需要更复杂的边界判断，因为涉及的偏移量更大。
首先，我们需要定义二级边界条件：
- 判断是否在右侧两列内：const twoRightSide = cellNumb % gridLength === 0 || (cellNumb + 1) % gridLength === 0; 这意味着当前单元格在最右列，或者其右侧的单元格在最右列（即当前单元格在倒数第二列）。
- 判断是否在左侧两列内：const twoLeftSide = cellNumb % gridLength === 1 || cellNumb % gridLength === 2; 这意味着当前单元格在最左列，或者其右侧的单元格在最左列（即当前单元格在第二列）。
然后，将这些条件应用到“蓝色”单元格的判断逻辑中。由于“蓝色”单元格的判断涉及更多的偏移量（例如cellNumb - 2、cellNumb + 2、cellNumb - (gridLength * 2)等），每个涉及到左右移动的条件都需要相应的!twoLeftSide或!twoRightSide检查。
// ... (之前的atRightSide, atLeftSide, twoRightSide, twoLeftSide 定义)
// ... (炸弹和绿色单元格的判断)
// 检查是否为蓝色单元格
else if (
// 左侧二级邻居：如果不在左侧两列内，则检查 cellNumb - 2
(!twoLeftSide && bombsArray.includes(cellNumb - 2)) ||
// 右侧二级邻居：如果不在右侧两列内，则检查 cellNumb + 2
(!twoRightSide && bombsArray.includes(cellNumb + 2)) ||
// 上方二级邻居：始终可以检查
bombsArray.includes(cellNumb - (gridLength * 2)) ||
// 下方二级邻居：始终可以检查
bombsArray.includes(cellNumb + (gridLength * 2)) ||
// ↖↖ 左上左二级对角线：如果不在左侧两列内，则检查 cellNumb - (gridLength * 2) - 2
(!twoLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) - 2)) ||
// ↖ 左上对角线：如果不在左边界，则检查 cellNumb - (gridLength * 2) - 1
(!atLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) - 1)) ||
// ↗ 右上对角线：如果不在右边界，则检查 cellNumb - (gridLength * 2) + 1
(!atRightSide && bombsArray.includes(cellNumb - (gridLength * 2) + 1)) ||
// ↗↗ 右上右二级对角线：如果不在右侧两列内，则检查 cellNumb - (gridLength * 2) + 2
(!twoRightSide && bombsArray.includes(cellNumb - (gridLength * 2) + 2)) ||
// ➡ 右侧一级对角线（水平偏移2）：如果不在右侧两列内，则检查 cellNumb - gridLength + 2
(!twoRightSide && bombsArray.includes(cellNumb - gridLength + 2)) ||
// ⬅ 左侧一级对角线（水平偏移2）：如果不在左侧两列内，则检查 cellNumb - gridLength - 2
(!twoLeftSide && bombsArray.includes(cellNumb - gridLength - 2)) ||
// ↘ 右下二级对角线（水平偏移2）：如果不在右侧两列内，则检查 cellNumb + gridLength + 2
(!twoRightSide && bombsArray.includes(cellNumb + gridLength + 2)) ||
// ↙ 左下二级对角线（水平偏移2）：如果不在左侧两列内，则检查 cellNumb + gridLength - 2
(!twoLeftSide && bombsArray.includes(cellNumb + gridLength - 2)) ||
// ↘↘ 右下右二级对角线：如果不在右侧两列内，则检查 cellNumb + (gridLength * 2) + 2
(!twoRightSide && bombsArray.includes(cellNumb + (gridLength * 2) + 2)) ||
// ↙ 左下对角线：如果不在左边界，则检查 cellNumb + (gridLength * 2) - 1
(!atLeftSide && bombsArray.includes(cellNumb + (gridLength * 2) - 1)) ||
// ↗ 右下对角线：如果不在右边界，则检查 cellNumb + (gridLength * 2) + 1
(!atRightSide && bombsArray.includes(cellNumb + (gridLength * 2) + 1)) ||
// ↙↙ 左下左二级对角线：如果不在左侧两列内，则检查 cellNumb + (gridLength * 2) - 2
(!twoLeftSide && bombsArray.includes(cellNumb + (gridLength * 2) - 2))
) {
singleCell.classList.add('blue');
singleCell.addEventListener('click', function () {
addBluePoints();
});
}请注意，对于垂直方向（gridLength的倍数）的偏移，不需要额外的左右边界检查，因为它们只影响行，不影响列的环绕问题。然而，对于结合了垂直和水平偏移的对角线情况，则需要根据水平偏移的距离应用atLeftSide/atRightSide或twoLeftSide/twoRightSide。
3. 注意事项与优化建议
拼写规范： 在代码中，gridLenght应更正为gridLength，保持变量命名的一致性和准确性。
-
数据结构优化： bombsArray（炸弹位置数组）在每次判断单元格时都会使用includes()方法进行查找。对于大型网格，includes()的性能是O(n)，效率较低。建议将bombsArray转换为Set数据结构。Set.has()方法的平均时间复杂度是O(1)，这将显著提高查找效率。
// 初始化时 const bombsSet = new Set(bombsArray); // 检查时 if (bombsSet.has(cellNumb)) { /* ... */ } else if (bombsSet.has(cellNumb - 1) || /* ... */ ) { /* ... */ } -
0-indexed vs. 1-indexed： 本教程的边界判断逻辑是基于单元格编号从1开始的情况。如果你的网格单元格编号从0开始，那么边界判断的模运算会有所不同：
- 右边界：cellNumb % gridLength === gridLength - 1;
- 左边界：cellNumb % gridLength === 0; 请务必根据你的实际编号方式进行调整。
4. 总结
通过在扫雷游戏单元格状态判断中引入精确的边界条件检查，我们可以有效避免因索引越界或环绕导致的逻辑错误。利用模运算判断单元格的左右边界位置，并将其整合到邻居判断逻辑中，是构建鲁棒性网格游戏的关键一步。同时，结合代码规范和数据结构优化，可以进一步提升代码质量和游戏性能。
