本文旨在解决在JavaScript扫雷游戏开发中，单元格状态判断（如邻近炸弹的“绿色”或“蓝色”单元格）在网格边界处出现错误的问题。核心在于利用模运算精确判断单元格是否位于网格的左右边界，从而避免跨越边界进行错误的邻近单元格计算。文章将详细阐述如何通过边界条件检查优化算法，并提供示例代码，以确保游戏逻辑的准确性与鲁棒性。
在开发基于网格的游戏，特别是像扫雷这样的项目时，一个常见的挑战是正确处理网格的边界条件。当计算一个单元格的邻居时，如果简单地通过索引加减来确定，当单元格位于网格边缘时，这些操作可能会导致索引超出边界，甚至“环绕”到网格的另一侧，从而产生错误的邻居判断。本教程将详细探讨如何通过引入边界检查逻辑，精确地确定单元格的邻居，并应用于扫雷游戏的“绿色”和“蓝色”单元格标记。
1. 问题背景：边界效应的产生
在扫雷游戏中，我们需要根据炸弹的位置来标记其周围的单元格。例如，紧邻炸弹的单元格可能被标记为“绿色”，而距离炸弹稍远的单元格可能被标记为“蓝色”。通常，我们会通过计算当前单元格索引的x+1（右邻）、x-1（左邻）、x+gridLength（下邻）、x-gridLength（上邻）以及对应的对角线邻居来判断。
然而，这种简单的加减法在遇到网格边界时会失效。例如，在一个10×10的网格中，如果单元格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. 总结
通过在扫雷游戏单元格状态判断中引入精确的边界条件检查，我们可以有效避免因索引越界或环绕导致的逻辑错误。利用模运算判断单元格的左右边界位置，并将其整合到邻居判断逻辑中，是构建鲁棒性网格游戏的关键一步。同时，结合代码规范和数据结构优化，可以进一步提升代码质量和游戏性能。
