Outer grid in Mine Sweeper game bugged condition

Question

I'm trying to replicate in Js the old Mine Sweeper game. But I'm stuck declaring conditions to the blue grid (that is distant 2 numbers from the bomb at the center of it); I have 2 bugged cells appearing on the other side when a bomb is on the grid left/right border. See this Example

(In the conditions you can see comments with numbers referring to 50 bomb position to help locate better which condition does what, hope it helps)

Thanks a lot for help me, I'm a student :)

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

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

        const twoRightSide = cellNumb % gridLength === 0 || (cellNumb + 1) % gridLength === 0;
        //check 9+10 nums and 10 multiplies
        const twoLeftSide = (cellNumb - 1) % gridLength === 0 || (cellNumb) % gridLength === 2;
        // check 1+10 nums and 2+10 nums

        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 (example 55)

        } else if (
            !twoLeftSide && bombsArray.includes(cellNumb - 2)
            // 53
            || !twoRightSide && bombsArray.includes(cellNumb + 2)
            // 57
            //left and right blue cell

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

            || !twoLeftSide && bombsArray.includes(cellNumb - (gridLength * 2) - 2)
            // ↖↖  (33)

            // ----------- I think these are the bugged ones
            || bombsArray.includes(cellNumb - (gridLength * 2) - 1)
            //  34
            || bombsArray.includes(cellNumb - (gridLength * 2) + 1)
            // ↗ 36
            || bombsArray.includes(cellNumb + (gridLength * 2) + 1)
            // ➡  76
            || bombsArray.includes(cellNumb + (gridLength * 2) - 1)
            // ⬅ 74 
            // -----------

            || !twoRightSide && bombsArray.includes(cellNumb - (gridLength * 2) + 2)
            // ↗↗ 37
            || !twoRightSide && bombsArray.includes(cellNumb - gridLength + 2)
            // ➡ 47
            || !twoRightSide && bombsArray.includes(cellNumb + gridLength + 2)
            // ↘ 67
            || !twoRightSide && bombsArray.includes(cellNumb + (gridLength * 2) + 2)
            // ↘↘ 77
            || !twoLeftSide && bombsArray.includes(cellNumb + (gridLength * 2) - 2)
            // ↙↙ 73
            || !twoLeftSide && bombsArray.includes(cellNumb + gridLength - 2)
            // ⬅  63
            || !twoLeftSide && bombsArray.includes(cellNumb - gridLength - 2)
            // ⬅ 43

        ) {

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

        }

I think I have these conditions that are useful when generating normal numbs cells, but at borders they create the bugged cells. I tried adding my condition !twoRightSide/!twoLeftSide at these, but I got removed also good cells as you can see here.

            || bombsArray.includes(cellNumb - (gridLength * 2) - 1)
            || bombsArray.includes(cellNumb - (gridLength * 2) + 1)
            || bombsArray.includes(cellNumb + (gridLength * 2) + 1)
            || bombsArray.includes(cellNumb + (gridLength * 2) - 1)
            

Answer 1

It seems you are creating a lot of complexity by trying to define and compare each cell individually. I would recommend using a two-dimensional array to represent the grid. Then you can use for loops to loop through the rows and columns. In this example I create a 5x5 grid. Each cell has a value of 0.

let grid = [
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
  [0, 0, 0, 0, 0],
]

You can set one cell directly using

grid[2,2] = 1    // third row, third column is now 1

If you want to also set the surrounding cells to 1 you can create a for loop that loops through the rows and columns. You can use a clamp function to prevent selecting cells that are outside the grid.

For example:

function showCells(x, y) {
  // start to the left and end to the right of the selected cell
  let startrow = y - 1
  let endrow = y + 1
  let startcol = x - 1
  let endcol = x + 1

  // make sure the position cant be smaller than 0 or bigger than the grid
  startrow = clamp(startrow, 0, grid.length - 1)
  endrow = clamp(endrow, 0, grid.length - 1)
  startcol = clamp(startcol, 0, grid[0].length - 1)
  endcol = clamp(endcol, 0, grid[0].length - 1)

  // set the position and everything around it to 1
  for (let row = startrow; row <= endrow; row++) {
    for (let col = startcol; col <= endcol; col++) {
      grid[row][col] = 1
    }
  }
}

function clamp(num, min, max) {
  return Math.min(Math.max(num, min), max);
}

showCells(2, 2)
console.log(grid)