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

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

本文旨在解决在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. 总结

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

© 版权声明
THE END
喜欢就支持一下吧
点赞9 分享