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

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

注意事项与优化建议

  1. 变量命名修正: 代码中多次出现了 gridLenght,正确的拼写应该是 gridLength。保持一致且正确的命名有助于代码的可读性和维护性。

  2. 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) ||     // ... ) {     // ... }
  3. 代码可读性: 对于复杂的条件判断,可以考虑将其拆分为更小的辅助函数或使用更清晰的变量名,以提高代码的可读性。例如,可以定义 isNeighborOfBomb(cellNumb, bombsSet, gridLength, isGreen) 这样的函数。

总结

通过在扫雷游戏的单元格逻辑中引入精确的边界条件判断,并结合模块化算术,可以有效解决单元格索引在网格边缘“环绕”的问题,确保邻近单元格的正确识别。此外,采用更高效的数据结构(如Set)和规范的变量命名,能够进一步提升代码的性能和可维护性。这些优化措施对于构建健壮且用户体验良好的扫雷游戏至关重要。

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