我需要帮助来调试扫雷个人项目中的单元

Question

第一次发帖。我是新手，对于我的个人 Javscript 项目，我正在尝试克隆旧的 Mine Sweeper windows 游戏。在生成场算法中，我声明了这个 If 语句，用于计算前一个数字、后一个数字以及向上、向下和对角线。假设 x= 炸弹编号，我将 x+1、x-1 用于下一个和上一个。然后x+rowLenght，x-rowLenght为向上和向下。然后 x+rowLenght +1, x+rowlenght +1, x-rowLenght +1, x-rowLenght-1 用于对角线。

在网格边界上放置炸弹时出现问题，所以我在错误的位置（之后或之前）也得到了绿色单元格。

        let gridLenght = Math.sqrt(numbOfCells);
        const cellNumb = Number(singleCell.textContent);       

        if (bombsArray.includes(cellNumb)) {
            // 🔽🔽 💣 this adds bombs based on bombsArray generated randomly

           singleCell.classList.add('bomb')

            // 🔽🔽💚 this creates the green cells near the bomb cell

            
        } else if (bombsArray.includes(cellNumb - 1)
            || bombsArray.includes(cellNumb + 1)
            || bombsArray.includes(cellNumb - gridLenght)
            || bombsArray.includes(cellNumb + gridLenght)
            || bombsArray.includes(cellNumb - gridLenght - 1)
            || bombsArray.includes(cellNumb - gridLenght + 1)
            || bombsArray.includes(cellNumb + gridLenght - 1)
            || bombsArray.includes(cellNumb + gridLenght + 1)
        ) {

            singleCell.classList.add('green');
            singleCell.addEventListener('click', function () {
                addGreenPoints()
            })

        }

我正在尝试添加一个特定的规则，当炸弹被放置在边界上时读取并在这种情况下覆盖 if else 语句，或者可能只是删除绿色单元格类。

if (bombsArray.includes(cellNumb) == (gridLenght * 10)) {
            singleCell.classList.remove('green');
            console.log("bomb on the right border");
        }

但它似乎不起作用，同样，条件从未得到验证。我无法弄清楚问题是出在逻辑上还是代码本身。

非常感谢您的帮助。

编辑：网格数 (cellNumb) 以 1 开头，而不是 0。

编辑：蓝色网格： 作为第二个功能，我尝试使用 Trincot（谢谢）建议的相同逻辑，但要添加代表炸弹最远指示器的蓝色单元格外缘，如果您单击它，它们将给出 1 分而不是 3 分。基本逻辑有效，但我发现边界上有奇怪的行为。似乎我的检查器常量（twoRightSide 和 twoLeftSide）没有按预期工作，我缺少什么？

    let gridLength = Math.sqrt(numbOfCells);
    const cellNumb = Number(singleCell.textContent);

    const atRightSide = cellNumb % gridLength === 0;
    const atLeftSide = (cellNumb - 1) % gridLength === 0;

    const twoLeftSide = (cellNumb - 2) % gridLength === 0;
    const twoRightSide = (cellNumb + 2) % gridLength === 0;
    // those two won't work



    if (bombsArray.includes(cellNumb)) {
        singleCell.classList.add('bomb')

        // 🔽🔽💚 this create green cells

    } else if (!atLeftSide && bombsArray.includes(cellNumb - 1)
        || !atRightSide && bombsArray.includes(cellNumb + 1)
        || bombsArray.includes(cellNumb - gridLength)
        || bombsArray.includes(cellNumb + gridLength)
        || !atLeftSide && bombsArray.includes(cellNumb - gridLength - 1)
        || !atRightSide && bombsArray.includes(cellNumb - gridLength + 1)
        || !atLeftSide && bombsArray.includes(cellNumb + gridLength - 1)
        || !atRightSide && bombsArray.includes(cellNumb + gridLength + 1)
    ) {

        singleCell.classList.add('green');
        singleCell.addEventListener('click', function () {
            addGreenPoints()
        })

        // 🔽🔽💙 this create blue cells

    } else if (
        !twoLeftSide && bombsArray.includes(cellNumb - 2)
        || !twoRightSide && bombsArray.includes(cellNumb + 2)

        || bombsArray.includes(cellNumb - (gridLength * 2))
        || bombsArray.includes(cellNumb + (gridLength * 2))
        // these are the top/bottom cells

        || !twoLeftSide && bombsArray.includes(cellNumb - gridLength - 2)
        || !twoLeftSide && bombsArray.includes(cellNumb - gridLength - 1)
        || !twoLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) - 2)
        || !twoLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) - 1)
        || !twoLeftSide && bombsArray.includes(cellNumb + gridLength - 2)
        || !twoLeftSide && bombsArray.includes(cellNumb + gridLength - 1)
        || !twoLeftSide && bombsArray.includes(cellNumb + (gridLength * 2) - 2)
        || !twoLeftSide && bombsArray.includes(cellNumb + (gridLength * 2) - 1)
        
        || !twoLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) + 1)
        || !twoLeftSide && bombsArray.includes(cellNumb + (gridLength * 2) + 1)
        
        || !twoRightSide && bombsArray.includes(cellNumb - gridLength + 2)
        || !twoRightSide && bombsArray.includes(cellNumb - (gridLength * 2) + 2)
        || !twoRightSide && bombsArray.includes(cellNumb - (gridLength * 2) + 1)
        || !twoRightSide && bombsArray.includes(cellNumb + gridLength + 2)
        || !twoRightSide && bombsArray.includes(cellNumb + (gridLength * 2) + 2)
        || !twoRightSide && bombsArray.includes(cellNumb + (gridLength * 2) + 1)
        
        || !twoRightSide && bombsArray.includes(cellNumb + (gridLength * 2) - 1)
        || !twoRightSide && bombsArray.includes(cellNumb - (gridLength * 2) - 1)
    ) {

        singleCell.classList.add('blue');
        singleCell.addEventListener('click', function () {
            addBluePoints()
        })
        
        
    }

Answer 1

为避免代码查看板另一端的单元格（因为越界），请使用模块化逻辑，如下所示：

    const atRightSide = (cellNumb + 1) % gridLenght === 0;
    const atLeftSide  = cellNumb % gridLenght === 0;

然后：

    } else if (!atLeftSide && bombsArray.includes(cellNumb - 1)
        || !atRightSide && bombsArray.includes(cellNumb + 1)
        || bombsArray.includes(cellNumb - gridLenght)
        || bombsArray.includes(cellNumb + gridLenght)
        || !atLeftSide && bombsArray.includes(cellNumb - gridLenght - 1)
        || !atRightSide && bombsArray.includes(cellNumb - gridLenght + 1)
        || !atLeftSide && bombsArray.includes(cellNumb + gridLenght - 1)
        || !atRightSide && bombsArray.includes(cellNumb + gridLenght + 1)
    ) {

其他备注：

• 正确的拼写是“length”，而不是“lenght”

• bombsArray

  可以更好地成为一个集合而不是一个数组

备注

如果您的单元格编号不是以 0 开头，而是以 1 开头，则只需调整

atLeftSide

和

atRightSide

变量的定义：

    const atRightSide = cellNumb % gridLenght === 0;
    const atLeftSide  = cellNumb % gridLenght === 1;