JavaScript扫雷游戏开发：精确处理边界单元格的算法与优化-js教程-PHP中文网

JavaScript扫雷游戏开发：精确处理边界单元格的算法与优化

本文旨在解决在JavaScript扫雷游戏开发中，单元格状态判断（如邻近炸弹的“绿色”或“蓝色”单元格）在网格边界处出现错误的问题。核心在于利用模运算精确判断单元格是否位于网格的左右边界，从而避免跨越边界进行错误的邻近单元格计算。文章将详细阐述如何通过边界条件检查优化算法，并提供示例代码，以确保游戏逻辑的准确性与鲁棒性。

在开发基于网格的游戏，特别是像扫雷这样的项目时，一个常见的挑战是正确处理网格的边界条件。当计算一个单元格的邻居时，如果简单地通过索引加减来确定，当单元格位于网格边缘时，这些操作可能会导致索引超出边界，甚至“环绕”到网格的另一侧，从而产生错误的邻居判断。本教程将详细探讨如何通过引入边界检查逻辑，精确地确定单元格的邻居，并应用于扫雷游戏的“绿色”和“蓝色”单元格标记。

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条件，我们确保了只有在有效范围内才进行邻居检查。

AliGenie 天猫精灵开放平台

天猫精灵开放平台

查看详情

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. 总结

通过在扫雷游戏单元格状态判断中引入精确的边界条件检查，我们可以有效避免因索引越界或环绕导致的逻辑错误。利用模运算判断单元格的左右边界位置，并将其整合到邻居判断逻辑中，是构建鲁棒性网格游戏的关键一步。同时，结合代码规范和数据结构优化，可以进一步提升代码质量和游戏性能。

以上就是JavaScript扫雷游戏开发：精确处理边界单元格的算法与优化的详细内容，更多请关注php中文网其它相关文章！