JavaScript扫雷点击空白单元格自动展开至雷邻区功能实现求助

核心问题定位 #

你当前代码无法完成完整空白区域展开的原因有2个：

1. 递归遍历方向不全 #

你在gNegs === 0（当前单元格周围无炸弹）的逻辑块里，只实现了上、下、右三个方向的递归调用，完全遗漏了左方向，同时也没有覆盖四个对角线方向，导致大量相邻空白格没有被触发展开。

2. 冗余无用代码 #

countNegs函数中存在空的if (negsCount === 0) {}判断，虽不影响功能但属于冗余代码。

修复代码 #

1. 替换cellClicked函数中递归逻辑块 #

将原来只判断三个方向的代码，替换为完整8邻域遍历逻辑，避免遗漏方向，代码也更简洁：

if (gNegs === 0) {
  // 遍历当前单元格的8个相邻方向
  for (let dx = -1; dx <= 1; dx++) {
    for (let dy = -1; dy <= 1; dy++) {
      // 跳过当前单元格自身
      if (dx === 0 && dy === 0) continue;
      const ni = i + dx;
      const nj = j + dy;
      // 判断相邻坐标是否在棋盘范围内
      if (ni >= 0 && ni < gBoard.length && nj >=0 && nj < gBoard[0].length) {
        // 跳过已展示、已标记的单元格
        if (!gBoard[ni][nj].isShown && !gBoard[ni][nj].isMarked) {
          const uCell = document.getElementById(gBoard.length * ni + nj);
          cellClicked(uCell, ni, nj);
        }
      }
    }
  }
}

如果只需要四邻域（上下左右）展开，也可以单独补上左方向的判断即可：

// 补充左方向判断
if (j > 0) {
  var uCell = document.getElementById(gBoard.length * i + (j - 1));
  if (!gBoard[i][j - 1].isShown && !gBoard[i][j - 1].isMarked) {
    cellClicked(uCell, i, j - 1);
  }
}

2. 清理countNegs函数冗余代码 #

删除函数末尾无用的空if语句即可，修改后函数如下：

//counting neighbors
function countNegs(cellI, cellJ) {
  var negsCount = 0;
  for (var i = cellI - 1; i <= cellI + 1; i++) {
    if (i < 0 || i > gBoard.length - 1) continue;
    for (var j = cellJ - 1; j <= cellJ + 1; j++) {
      if (j < 0 || j > gBoard[i].length - 1) continue;
      if (i === cellI && j === cellJ) continue;
      if (gBoard[i][j].isMine) {
        negsCount++;
      }
    }
  }
  return negsCount;
}

验证注意点 #

修改完成后测试时注意：

• 首次点击不会触雷的逻辑保持正常
• 空白区域会一次性展开到相邻数字格为止
• 标记过的旗子不会被自动展开

内容的提问来源于stack exchange，提问作者NewbieAeg