javascript - 扫雷扩展算法

我用javascript制作了一个简单的扫雷游戏，它运行良好，除了当我点击一个没有地雷的大区域的中间时，它不会清除整个区域，只清除我点击的位置。
这方面已经有其他问题，但我检查生成数字的方式（我相信）是不同的，因此应该更具体地为它制定解决方案，而不是将代码更改为更像其他人所做的。
下面是一个图像，它可以更好地解释这种情况（使用实际代码中没有显示的其他颜色）：

蓝色是用户单击的地方，然后它应该检查垂直和水平（深绿色）如果这些位置周围有0个地雷扩展（绿色），直到地雷（橙色）足够近的边界（黄色）。
我试图使代码可读性和易懂：

(function() {

  var minesweeper = document.createElement('div');
  var positions = [];
  var playing = true;

  function random(min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  }

  function end() {
    this.onclick = null;
    if ( playing ) {
      playing = false;
      this.style.backgroundColor = 'rgb(255, 0, 0)';
      alert('Game over.');
    }
  }

  function update() {
    this.onclick = null;
    if ( playing ) {
      this.style.backgroundColor = 'rgb(0, 255, 0)';
      this.className = 'safe';
      let mines = 0;
      let element = this.previousElementSibling;
      if ( element ) {
        if ( element.className == 'mine' && this.style.top == element.style.top ) mines++;
        for ( let i = 0; i < 8; i++ ) {
          element = element.previousElementSibling;
          if ( !element ) break;
        }
        if ( element ) {
          if ( element.className == 'mine' && this.style.top != element.style.top ) mines++;
          element = element.previousElementSibling;
          if ( element ) {
            if ( element.className == 'mine' ) mines++;
            element = element.previousElementSibling;
            if ( element )
              if ( element.className == 'mine' && (parseInt(this.style.top) - parseInt(element.style.top)) == 9 ) mines++;
          }
        }
      }
      element = this.nextElementSibling;
      if ( element ) {
        if ( element.className == 'mine' && this.style.top == element.style.top ) mines++;
        for ( let i = 0; i < 8; i++ ) {
          element = element.nextElementSibling;
          if ( !element ) break;
        }
        if ( element ) {
          if ( element.className == 'mine' && this.style.top != element.style.top ) mines++;
          element = element.nextElementSibling;
          if ( element ) {
            if ( element.className == 'mine' ) mines++;
            element = element.nextElementSibling;
            if ( element )
              if ( element.className == 'mine' && (parseInt(element.style.top) - parseInt(this.style.top)) == 9 ) mines++;
          }
        }
      }
      this.innerText = mines;
      if ( minesweeper.querySelectorAll('div.safe').length == 90 ) {
        playing = false;
        alert('Victory.');
      }
    }
  }

  minesweeper.style.backgroundColor = 'rgb(0, 0, 0)';
  minesweeper.style.fontSize = '7vmin';
  minesweeper.style.textAlign = 'center';
  minesweeper.style.userSelect = 'none';
  minesweeper.style.position = 'absolute';
  minesweeper.style.left = 'calc(50vw - 45.5vmin)';
  minesweeper.style.top = 'calc(50vh - 45.5vmin)';
  minesweeper.style.width = '91vmin';
  minesweeper.style.height = '91vmin';

  for ( let i = 0; i < 10; i++ ) {
    for ( let j = 0; j < 10; j++ ) {
      const n = i * 10 + j;
      positions[n] = document.createElement('div');
      positions[n].style.backgroundColor = 'rgb(255, 255, 255)';
      positions[n].style.position = 'absolute';
      positions[n].style.left = (j * 8 + j + 1) + 'vmin';
      positions[n].style.top = (i * 8 + i + 1) + 'vmin';
      positions[n].style.width = '8vmin';
      positions[n].style.height = '8vmin';
      minesweeper.appendChild(positions[n]);
    }
  }

  for ( let i = 0; i < 11; i++ ) {
    const empty = minesweeper.querySelectorAll('div:not(.mine)');
    if ( i == 10 ) {
      for ( let j = 0; j < 90; j++ ) {
        empty[j].onclick = update;
      }
      break;
    }
    const n = random(0, (empty.length - 1));
    empty[n].className = 'mine';
    empty[n].onclick = end;
  }

  document.body.style.margin = '0px';
  document.body.appendChild(minesweeper);

})();

我检查数字所在位置的方法是使用previousElementSibling和nextElementSibling。

最佳答案

干得好！我要绞死半个小时来测试这个游戏：）
要清除单击位置周围的区域（如果此位置周围有0个地雷），可以递归地为其所有邻居调用update函数。
我稍微修改了您的代码：创建了所有非我的邻居的negihbors数组，并为每个邻居调用了update.call(neighbor)。

(function() {

    var minesweeper = document.createElement('div');
    var positions = [];
    var playing = true;

    function random(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    function end() {
        this.onclick = null;
        if (playing) {
            playing = false;
            const mines = minesweeper.querySelectorAll('div.mine');
            for (let mine of mines) mine.style.backgroundColor = 'rgb(255, 0, 0)';
            alert('Game over.');
        }
    }

    function update() {
        this.onclick = null;
        if (playing && !this.className.length) {
            this.style.backgroundColor = 'rgb(0, 255, 0)';
            this.className = 'safe';
            let neighbors = [];
            let mines = 0;
            let element = this.previousElementSibling;
            if (element) {
                if (this.style.top === element.style.top) {
                    if (element.className === 'mine') mines++;
                    else neighbors.push(element);
                }
                for (let i = 0; i < 8; i++) {
                    element = element.previousElementSibling;
                    if (!element) break;
                }
                if (element) {
                    if (this.style.top !== element.style.top) {
                        if (element.className === 'mine') mines++;
                        else neighbors.push(element);
                    }
                    element = element.previousElementSibling;
                    if (element) {
                        if (element.className === 'mine') mines++; else neighbors.push(element);
                        element = element.previousElementSibling;
                        if (element) {
                            if (parseInt(this.style.top) - parseInt(element.style.top) === 9 ) {
                                if (element.className === 'mine') mines++;
                                else neighbors.push(element);
                            }
                        }
                    }
                }
            }
            element = this.nextElementSibling;
            if (element) {
                if (this.style.top === element.style.top) {
                    if (element.className === 'mine') mines++;
                    else neighbors.push(element);
                }
                for (let i = 0; i < 8; i++) {
                    element = element.nextElementSibling;
                    if (!element) break;
                }
                if (element) {
                    if (this.style.top !== element.style.top) {
                        if (element.className === 'mine') mines++;
                        else neighbors.push(element);
                    }
                    element = element.nextElementSibling;
                    if (element) {
                        if (element.className === 'mine') mines++; else neighbors.push(element);
                        element = element.nextElementSibling;
                        if (element) {
                            if (parseInt(element.style.top) - parseInt(this.style.top) === 9 ) {
                                if (element.className === 'mine') mines++;
                                else neighbors.push(element);
                            }
                        }
                    }
                }
            }
            this.innerText = mines;
            if (mines === 0) {
                for (let neighbor of neighbors) update.call(neighbor);
            }
            if (minesweeper.querySelectorAll('div.safe').length === 90) {
                playing = false;
                alert('Victory.');
            }
        }
    }

    minesweeper.style.backgroundColor = 'rgb(0, 0, 0)';
    minesweeper.style.fontSize = '7vmin';
    minesweeper.style.textAlign = 'center';
    minesweeper.style.userSelect = 'none';
    minesweeper.style.position = 'absolute';
    minesweeper.style.left = 'calc(50vw - 45.5vmin)';
    minesweeper.style.top = 'calc(50vh - 45.5vmin)';
    minesweeper.style.width = '91vmin';
    minesweeper.style.height = '91vmin';

    for (let i = 0; i < 10; i++) {
        for (let j = 0; j < 10; j++) {
            const n = i * 10 + j;
            positions[n] = document.createElement('div');
            positions[n].style.backgroundColor = 'rgb(255, 255, 255)';
            positions[n].style.position = 'absolute';
            positions[n].style.left = (j * 8 + j + 1) + 'vmin';
            positions[n].style.top = (i * 8 + i + 1) + 'vmin';
            positions[n].style.width = '8vmin';
            positions[n].style.height = '8vmin';
            minesweeper.appendChild(positions[n]);
        }
    }

    for (let i = 0; i < 11; i++) {
        const empty = minesweeper.querySelectorAll('div:not(.mine)');
        if (i === 10) {
            for (let j = 0; j < 90; j++) {
                empty[j].onclick = update;
            }
            break;
        }
        const n = random(0, (empty.length - 1));
        empty[n].className = 'mine';
        empty[n].onclick = end;
    }

    document.body.style.margin = '0px';
    document.body.appendChild(minesweeper);

})();

关于javascript - 扫雷扩展算法，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48837440/