javaScript 扫雷器显示空字段

Question

我正在尝试使用 html css 和 js 创建一个扫雷游戏。我创建了棋盘，字段(div元素)，放置了炸弹，每个字段“知道”他的位置(x，y)(x和y坐标保存为div的数据属性)，“知道”他是否在一枚炸弹以及附近炸弹的数量。我设法创建 onclick 事件来显示该图 block 是否是炸弹或显示附近的炸弹数量。现在我的问题是，如果我单击附近没有炸弹的图 block (空图 block )，我想显示周围的所有空图 block 。因此，如果我单击空字段，则会调用下一个函数:

function zero(x, y) {
    for (var i = x - 1; i <= x + 1; i++) {
        for (var j = y - 1; j <= y + 1; j++) {
            $('.tile[row-d=' + i + '][col-d=' + j + ']').text($('.tile[row-d=' + i + '][col-d=' + j + ']').attr('bomb_number')); // set the field text = bomb -number nearby
        }
    }
}

通过此操作，我显示了单击的空字段附近的所有周围字段，因此我仅显示 9 个字段。我想显示附近的所有空字段，而不仅仅是 9。我尝试使用递归函数，但页面崩溃了。所以任何人都可以帮助我使用可以解决这个问题的递归函数。谢谢。 (如你所见，我也在使用 jQuery)

Answer 1

基本规则是:

• 如果您发现炸弹旁边的邻近区域，请停止搜索
• 如果邻近区域没有炸弹，则继续扩展到新区域的邻居

在代码中:

function zero(x, y) {
    for (var i = x - 1; i <= x + 1; i++) {
        for (var j = y - 1; j <= y + 1; j++) {
            var neighbor = $('.tile[row-d=' + i + '][col-d=' + j + ']');
            var bombNr = neighbor.attr('bomb_number');

            neighbor.text(bombNr);

            if (bombNr === "0") zero(i, j);
        }
    }
}

编辑:递归模式的快速而肮脏的示例:

// The recursive function
const handleInput = i => {
  if (tapped.has(i)) return;
  
  // Count the bombs in neighboring tiles
  const bombs = neighbors(i)
    .map(j => board[j])
    .filter(v => v === x)
    .length;

  // Store the count so we can render it
  tapped.set(i, bombs);
  
  // If there are no bombs, handle all the neighbors'
  // as well.
  if (bombs === 0) {
    neighbors(i).forEach(handleInput);
  }
};

// Game state
const x = "x";
const board = [
  x, 0, 0, 0, 0,
  x, 0, 0, 0, 0,
  x, x, x, 0, 0,
  0, 0, 0, 0, 0,
  0, 0, x, 0, 0
];

const tapped = new Map();

// Quick & dirty render method to visualize what happens
const render = board => {
  const el = document.querySelector(".board")
  
  el.innerHTML =
    board
      .map((v, i) => tapped.has(i) ? tapped.get(i) : v)
      .map(txt => `<div>${txt}</div>`)
      .join("");
    
  Array.from(el.children).forEach((c, i) => {
    c.addEventListener("click", () => {
      
      if (board[i] === x) return console.log("Boom!");
      
      handleInput(i);
      
      render(board);
      
    });
    
    c.classList.toggle("tapped", tapped.has(i));
  });
}

const row = i => i / 5 << 0;
const col = i => i % 5;
const neighbors = i => {
  const top =    [ -6, -5, -4 ];
  const right =  [ -4,  1,  6 ];
  const bottom = [  4,  5,  6 ];
  const left =   [ -6, -1,  4 ];
  
  const ds = new Set([...top, ...right, ...bottom, ...left]);
  const remove = d => ds.delete(d);
  
  if (row(i) === 0) top.forEach(remove);
  if (row(i) === 4) bottom.forEach(remove);
  if (col(i) === 0) left.forEach(remove);
  if (col(i) === 4) right.forEach(remove);

  return [...ds].map(d => d + i);
};

render(board);

.board {
 width: 100px;
 height: 100px;
}

.board > div {
  width: 20px;
  height: 20px;
  border: 1px solid black;
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
}

.board > div.tapped {
  background: yellow;
}

<div class="board"></div>