JavaScript扫雷游戏：边界单元格逻辑处理与优化指南-js教程-PHP中文网

JavaScript扫雷游戏：边界单元格逻辑处理与优化指南

DDD

发布： 2025-07-09 20:44:21

原创

256人浏览过

JavaScript扫雷游戏：边界单元格逻辑处理与优化指南

本文旨在解决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) 这样的函数。