Minesweeper FloodFill JavaScript

Question

Got some problems with floodfill, i don't rly understand what is wrong with it as I tried to copy some code from someone other code, it was working for him, for me not. I have got a 9x9 double dimension array as border. First i wanted to display only fields horizontally, but the code goes infinity. With one FloodFill on it works good.

    function floodFill(x, y) {

    if (y < 0) {
        console.log("left border exceeded");
        return;
    }
    if (y > 8) {
        console.log("right border exceeded");
        return;
    }
    if (numberOfBombsAdjacentToField[x][y] > 0) {
        console.log("there are bombs nearly");
        return;
    }
    if (document.getElementById(((x).toString() + (y).toString())).style.backgroundColor == "darkGray") {
        console.log("already clicked");
        return;
    }
    document.getElementById(((x).toString() + (y).toString())).style.backgroundColor = "darkGray";
    floodFill(x, y + 1);
    floodFill(x, y - 1);
}

Check the value of `backgroundColor` when read back. I suspect the "already clicked" detection is failing. — user2864740, Dec 11 '16 at 18:47
Hmm, maybe that is it, i tried display color in log, and it didn't display anything. — cerbin, Dec 11 '16 at 20:06
Then that seems like something to explore .. nothing is not equal to "darkGray" and a value equal to "darkGray" would have resulted in something logged. When assigning directly to the `style` properties the browser is free to normalize these, including discarding invalid values. On Chrome, assigning "darkGray" will result in reading back "darkgray". YMMV elsewhere. — user2864740, Dec 11 '16 at 20:13
Ok, Thanks a lot @user2864740 that was it, Google Chrome was reading the value like darkgray, after i changed it, everything is ok. I will paste improved code, with 8 direction FloodFill, maybe that will be helpfull for someone. — cerbin, Dec 11 '16 at 20:50

score 0 · Accepted Answer · answered Dec 11 '16 at 20:51

Ok the problem was with the browser. Google Chrome was reading the color of DarkGray as darkgray. After i renamed it everything is fine. In addition to this i improved my code and that is the final form:

function floodFill(x, y) {

    if (y < 0) {
        console.log("left border exceeded");
        return;
    }
    if (y > 8) {
        console.log("right border exceeded");
        return;
    }
    if (x < 0) {
        console.log("top border exceeded");
        return;
    }
    if (x > 8) {
        console.log("bottom border exceeded");
        return;
    }
    if (board[x][y]) {
        console.log("bomb!");
        return;
    }
    if (document.getElementById(((x).toString() + (y).toString())).style.backgroundColor == "darkgray") {
        console.log("already clicked");
        return;
    }
    if (numberOfBombsAdjacentToField[x][y] > 0) {
        var divToChange = document.getElementById((x.toString() + y.toString()));
        divToChange.innerHTML = numberOfBombsAdjacentToField[x][y].toString();
        divToChange.style.backgroundColor = "darkGray";
        return;
    }
    else {
        document.getElementById(((x).toString() + (y).toString())).style.backgroundColor = "darkGray";
        document.getElementById(((x).toString() + (y).toString())).innerHTML = "";
    }
    floodFill(x, y - 1);
    floodFill(x, y + 1);
    floodFill(x + 1, y);
    floodFill(x - 1, y);
    floodFill(x - 1, y - 1);
    floodFill(x - 1, y + 1);
    floodFill(x + 1, y - 1);
    floodFill(x + 1, y + 1);
}

Minesweeper FloodFill JavaScript

1 Answers1