Minesweeper discovering blank squares

Question

I am trying to make minesweeper in JavaScript and I have run into a problem that has had me stuck for days. I am aware there are already posts about this topic however I've read them and tried it out and I've had no luck.

The problem I am having is when the user presses a blank square I want it to discover every blank square touching it (Blank square meaning a square on the grid that has 0 mines 1 square to the side or diagonal to it).

The program now clears almost every blank square that are one square apart however it is still missing a few random ones and I can't quite figure out why.

I have tried adding other combinations when calling runOffset() such as runOffset(25, 25) and runOffset(-25, -25) however this didn’t change anything. Is it a simple fix, or have I gone about this wrong?

The circled squares are squares that should have been cleared but weren't and the X is where the user clicked.

• Am I writing this out wrong? (Will the way I’ve written out the function do what I want it to do?)

• Is the function checkBlanks() being returned for the wrong reason or something?

• What am I missing for it to miss the squares circled in the image above?

Full Code (Line 297)

function borderingBombs(safeSquareCoords) {
    var minesNext = 0;
    for (var i = 0; i < mines.length; i++) {
        var mineCoords = mines[i].split(",");
        if (mineCoords[0] - 25 == safeSquareCoords[0]) {
            if (mineCoords[1] == safeSquareCoords[1]) {
                // Left
                minesNext++;
            } else if (mineCoords[1] - 25 == safeSquareCoords[1]) {
                // Top Left
                minesNext++;
            } else if (mineCoords[1] == safeSquareCoords[1] - 25) {
                // Bottom Left
                minesNext++;
            }
        } else if (safeSquareCoords[0] - 25 == mineCoords[0]) {
            if (mineCoords[1] == safeSquareCoords[1]) {
                // Right
                minesNext++;
            } else if (mineCoords[1] - 25 == safeSquareCoords[1]) {
                // Right Top
                minesNext++;
            } else if (mineCoords[1] == safeSquareCoords[1] - 25) {
                // Bottom Right
                minesNext++;
            }
        } else if (mineCoords[1] - 25 == safeSquareCoords[1] && mineCoords[0] == safeSquareCoords[0]) {
            // Bottom
            minesNext++;
        } else if (safeSquareCoords[1] - 25 == mineCoords[1] && mineCoords[0] == safeSquareCoords[0]) {
            // Top
            minesNext++;
        }
    }
    return minesNext;
}

// Discover all blanks touching blanks
function checkBlanks(blnkSquare) {
    if (!discovered(blnkSquare)) {
        var blnkSquareCoords = blnkSquare.split(",");
        safe.push(blnkSquare);
        ctx.drawImage(blankImg, blnkSquareCoords[0], blnkSquareCoords[1]);
        if (borderingBombs(blnkSquare) == 0) {
            runOffset(blnkSquareCoords, 0, -25); // Top
            runOffset(blnkSquareCoords, 0, 25); // Bottom
            runOffset(blnkSquareCoords, 25, 0); // Right
            runOffset(blnkSquareCoords, -25, 0); // Left
            runOffset(blnkSquareCoords, -25, 25);
            runOffset(blnkSquareCoords, 25, -25);
        }
    }
}

function runOffset(origin, xOffset, yOffset) {
    var newBlnkSquare = origin;
    newBlnkSquare[0] = parseInt(newBlnkSquare[0])+xOffset;
    newBlnkSquare[1] = parseInt(newBlnkSquare[1])+yOffset;
    outBlnkSquare = newBlnkSquare[0] + "," + newBlnkSquare[1];
    if (newBlnkSquare[0] >= 0 && newBlnkSquare[1] >= 0 && newBlnkSquare[0] < 250 && newBlnkSquare[1] < 250) {
        if (!isMine(outBlnkSquare)) {
            drawSafe(outBlnkSquare);
        }
    }
}

Answer 1

Your issue here is that you're checking the diagonals. Don't do that. Just check vertical and horizontal.

This will prevent the pattern you're seeing. You will still get clearing behavior when there are large empty expanses. Squares that are diagonal to the clicked square will clear if the square that is adjacent to it and the clicked square is also clear.