JavaScript扫雷边界计算技巧

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript扫雷边界邻居计算技巧》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

理解网格邻居计算的挑战

在扫雷等基于网格的游戏中，确定一个单元格的邻居是核心功能之一。通常，我们会通过简单地对当前单元格索引进行加减操作来获取其周围的单元格，例如 cellNumb - 1 (左侧)、cellNumb + 1 (右侧)、cellNumb - gridLength (上方) 等。然而，这种方法在处理网格边缘的单元格时会遇到问题。

例如，在一个5x5的网格中，如果单元格编号从1开始：

• 单元格5（第一行的最右侧）的右侧邻居理论上不存在，但 5 + 1 = 6 可能会被错误地识别为下一行的第一个单元格。
• 单元格6（第二行的最左侧）的左侧邻居理论上不存在，但 6 - 1 = 5 可能会被错误地识别为上一行的最后一个单元格。

这种“越界”计算会导致非预期的单元格被标记为雷的邻居（如“绿色”或“蓝色”单元格），从而破坏游戏逻辑和用户体验。

核心解决方案：边界检测与模块化逻辑

为了解决上述问题，我们需要在计算水平方向（左右）邻居时，额外判断当前单元格是否位于网格的左边界或右边界。这可以通过使用模运算符（%）来实现。

假设 gridLength 是网格的边长（例如，一个10x10的网格，gridLength 为10）。

1. 确定单元格的编号起始点

在扫雷游戏中，单元格编号通常从0或1开始。这会影响边界判断的逻辑。

• 如果 cellNumb 从 0 开始 (0-indexed):
  • 左边界：cellNumb % gridLength === 0
  • 右边界：(cellNumb + 1) % gridLength === 0
• 如果 cellNumb 从 1 开始 (1-indexed):
  • 左边界：cellNumb % gridLength === 1
  • 右边界：cellNumb % gridLength === 0

在本文的示例中，我们假设 cellNumb 从1开始。

let gridLength = Math.sqrt(numbOfCells); // numbOfCells是总单元格数
const cellNumb = Number(singleCell.textContent); // 当前单元格的编号

// 判断当前单元格是否在左边界或右边界
const atRightSide = cellNumb % gridLength === 0;
const atLeftSide = cellNumb % gridLength === 1; // 对于1-indexed编号

2. 应用边界判断到邻居计算

有了 atLeftSide 和 atRightSide 变量，我们就可以在判断水平方向邻居时，排除越界的情况。

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();
    });
}

通过这种方式，只有当单元格不在特定边界上时，才会尝试检查该方向的邻居，从而避免了错误的越界计算。

扩展应用：处理多层邻居（蓝色单元格）

在某些高级扫雷变体中，可能需要显示距离雷更远的提示单元格（例如，距离雷两格的“蓝色”单元格）。这同样会遇到边界问题，且需要更复杂的边界判断。

1. 扩展边界判断

对于距离两格的水平邻居，我们需要判断当前单元格是否在距离左右边界两格以内。

// 假设 cellNumb 从 1 开始
const atRightSide = cellNumb % gridLength === 0;
const atLeftSide = cellNumb % gridLength === 1;

// 判断当前单元格是否在距离右边界两格以内
// 例如，对于10x10网格，10, 9 都在右边界附近
const twoRightSide = atRightSide || (cellNumb % gridLength === (gridLength - 1)); 
// 判断当前单元格是否在距离左边界两格以内
// 例如，对于10x10网格，1, 2 都在左边界附近
const twoLeftSide = atLeftSide || (cellNumb % gridLength === 2); 

注意: 上述 twoRightSide 和 twoLeftSide 的具体逻辑需要根据 cellNumb 的起始点和实际需求进行微调。例如，如果 cellNumb 从 1 开始，cellNumb % gridLength === 2 表示位于第二列，即距离左边界一格。

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();
    });
}

可以看到，随着距离的增加，需要考虑的邻居数量和边界判断条件也会相应增加，代码会变得更加复杂。建议为不同距离的邻居定义独立的判断函数，以提高代码可读性和可维护性。

最佳实践与注意事项

1. 拼写准确性： 在代码中，length 是正确的拼写，而不是 lenght。保持命名规范和准确性有助于代码的可读性和维护。

2. 数据结构优化： bombsArray 用于检查某个单元格是否为雷。对于频繁的查找操作，将数组转换为 Set 数据结构会显著提高性能。Set.prototype.has() 的平均时间复杂度为 O(1)，而 Array.prototype.includes() 为 O(n)。

   // 初始化时
   const bombsSet = new Set(bombsArray);
   
   // 查找时
   if (bombsSet.has(cellNumb - 1)) { /* ... */ }

3. 代码可读性： 复杂的 if/else if 条件链会降低代码的可读性。考虑将邻居判断逻辑封装成辅助函数，或者使用更结构化的方式（例如，遍历一个预定义的偏移量数组）来处理不同类型的邻居。

4. 通用性： 尽可能使边界判断逻辑通用化，以便于在不同大小的网格中复用。

总结

在开发扫雷这类网格游戏时，精确处理边界单元格的邻居计算是至关重要的。通过引入 atLeftSide 和 atRightSide 等边界判断变量，并结合模块化逻辑，可以有效避免因越界计算导致的错误显示问题。对于多层邻居的判断，虽然逻辑更为复杂，但核心思想依然是基于边界判断来过滤无效的越界索引。遵循良好的编码实践，如使用合适的 数据结构和保持代码可读性，将有助于构建一个健壮且易于维护的游戏系统。

好了，本文到此结束，带大家了解了《JavaScript扫雷边界计算技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！