优化JavaScript扫雷游戏中的边界单元格逻辑-js教程-PHP中文网

优化JavaScript扫雷游戏中的边界单元格逻辑

碧海醫心

发布： 2025-07-09 20:24:11

原创

725人浏览过

优化JavaScript扫雷游戏中的边界单元格逻辑

本文深入探讨了在JavaScript实现扫雷等网格游戏时，如何精确处理边界单元格的邻居检测问题。通过引入模运算来判断单元格是否位于网格的左右边界，并结合逻辑判断，有效避免了因跨越边界而导致的错误邻居识别，从而确保游戏逻辑的准确性，并提供了代码优化建议。

在开发基于网格的桌面游戏，例如经典的扫雷，一个常见的挑战是如何准确地识别特定单元格的邻居，尤其是在这些单元格位于网格边缘时。如果处理不当，简单的索引加减运算可能导致程序错误地将网格一侧的单元格识别为另一侧的邻居，从而产生不符合预期的游戏行为。

边界单元格邻居检测的挑战

在扫雷游戏中，我们需要根据炸弹的位置来标记其周围的单元格（例如，标记为“绿色”表示距离炸弹较近，或“蓝色”表示距离稍远）。最初的实现可能会采用以下逻辑来判断一个单元格是否是炸弹的邻居：

let gridLenght = Math.sqrt(numbOfCells); // 拼写应为 gridLength
const cellNumb = Number(singleCell.textContent); // 单元格编号从1开始

if (bombsArray.includes(cellNumb)) {
    singleCell.classList.add('bomb');
} else if (
    bombsArray.includes(cellNumb - 1) || // 左侧
    bombsArray.includes(cellNumb + 1) || // 右侧
    bombsArray.includes(cellNumb - gridLenght) || // 上方
    bombsArray.includes(cellNumb + gridLenght) || // 下方
    bombsArray.includes(cellNumb - gridLenght - 1) || // 左上
    bombsArray.includes(cellNumb - gridLenght + 1) || // 右上
    bombsArray.includes(cellNumb + gridLenght - 1) || // 左下
    bombsArray.includes(cellNumb + gridLenght + 1)    // 右下
) {
    singleCell.classList.add('green');
    singleCell.addEventListener('click', function () {
        addGreenPoints();
    });
}

登录后复制

上述代码段的问题在于，当 cellNumb 位于网格的左右边界时，例如 cellNumb 是第一列的最后一个单元格（如10x10网格中的10），cellNumb + 1 会指向下一行的第一个单元格（11），这在逻辑上是错误的，因为它不是实际的右侧邻居。同理，当 cellNumb 是第二列的第一个单元格（如11），cellNumb - 1 会指向上一行的最后一个单元格（10），这也不是实际的左侧邻居。这种“跨界”现象会导致不准确的视觉反馈和游戏逻辑错误。

精确识别边界单元格

为了解决这一问题，我们需要引入边界检测机制，确保只有在合法的逻辑位置上才进行邻居判断。这可以通过模运算（%）来实现。假设单元格编号从1开始，且 gridLength 是每行的单元格数量：

判断是否在右边界：一个单元格在右边界的条件是其编号能够被 gridLength 整除。
```
const atRightSide = cellNumb % gridLength === 0;
```
登录后复制
判断是否在左边界：一个单元格在左边界的条件是其编号除以 gridLength 的余数为1。
```
const atLeftSide = cellNumb % gridLength === 1;
```
登录后复制

将这些边界条件整合到邻居检测逻辑中，可以有效避免跨界问题：

立即学习“Java免费学习笔记（深入）”；

let gridLength = Math.sqrt(numbOfCells);
const cellNumb = Number(singleCell.textContent);

// 判断当前单元格是否在左右边界
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();
    });
}

登录后复制

通过这种方式，我们确保了只有在逻辑上可能存在邻居的方位才进行数组包含性检查，从而解决了边界单元格的错误识别问题。

扩展应用：处理更远距离的单元格（蓝色单元格）

在扫雷游戏中，有时还需要标记距离炸弹更远的单元格（例如，标记为“蓝色”）。这同样需要扩展边界检测逻辑。例如，要检查距离当前单元格左右两格的炸弹（cellNumb - 2 或 cellNumb + 2），我们需要定义更宽泛的边界条件：

// 检查当前单元格是否在左起第二列或更靠左
const twoLeftSide = (cellNumb % gridLength === 1) || (cellNumb % gridLength === 2);
// 检查当前单元格是否在右起第二列或更靠右
const twoRightSide = (cellNumb % gridLength === 0) || (cellNumb % gridLength === gridLength - 1);

登录后复制

然后，在检查 cellNumb - 2 或 cellNumb + 2 等更远距离的水平或对角线邻居时，需要使用 !twoLeftSide 或 !twoRightSide 来限制：

腾讯混元

腾讯混元大由腾讯研发的大语言模型，具备强大的中文创作能力、逻辑推理能力，以及可靠的任务执行能力。

查看详情

// ... (绿色单元格逻辑) ...
} 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)) ||
    // 示例：左上角两格远的对角线（西北偏西）
    (!twoLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) - 2)) ||
    // 示例：右上角两格远的对角线（东北偏东）
    (!twoRightSide && bombsArray.includes(cellNumb - (gridLength * 2) + 2)) ||
    // ... 其他蓝色单元格的复杂判断 ...
) {
    singleCell.classList.add('blue');
    singleCell.addEventListener('click', function () {
        addBluePoints();
    });
}

登录后复制

这种模式可以推广到任何距离的邻居检测。关键在于根据偏移量的大小，动态地判断当前单元格是否距离相应的网格边界足够远，以避免“环绕”效果。

代码优化与最佳实践

除了上述逻辑修正，还有一些通用的代码优化建议：

变量命名规范：将 gridLenght 更正为 gridLength，遵循驼峰命名法和正确的拼写习惯，提高代码可读性。
数据结构选择：bombsArray 用于频繁地检查某个数字是否存在。在这种场景下，使用 JavaScript 的 Set 数据结构比 Array 更高效。Set.prototype.has() 方法的平均时间复杂度为 O(1)，而 Array.prototype.includes() 的平均时间复杂度为 O(n)。
```
// 初始化时
const bombsSet = new Set(bombsArray); // 将炸弹数组转换为 Set

// 检查时
if (bombsSet.has(cellNumb - 1)) { /* ... */ }
```
登录后复制
这将显著提升大型网格中炸弹位置查询的性能。
避免重复计算：如果 gridLength 在整个游戏生命周期中不变，可以将其定义为常量，避免在每次单元格处理时重复计算 Math.sqrt(numbOfCells)。