Javascript flood-fill function working only partially [Minesweeper]

Question

I've been trying to create my own minesweeper-game (for fun) for a couple months now. Only thing that I have really been stopped by is how to make recursive function (flood-fill) to fill the blank areas in the game.

The flood-fill works only partially. It does not extend to right or the bottom node from any clicked node.

Current full code

FloodFill -part:

function floodFill(node) {

    if (node < 0) {return};

    if (document.getElementById("cell" + node).style.backgroundColor == "white") {return};

    if (document.getElementById("cell" + node).classList.contains("nearby")) {return};

    document.getElementById("cell" + node).style.backgroundColor = "white";

    floodFill(node -= 1);                           
    floodFill(node += 1);
    floodFill(node -= 16);
    floodFill(node += 16);

    return

};

floodFill(here); 

The "here" means the clicked node. The size of the grid is 16, so the bottom node is current node + 16.

This small game -project means a lot for me, so any help is greatly appreciated.

Answer 1

The operators -= and += mean subtract/add a certain value to the variable.

a += 10;

is equivalent to

a = a + 10;

Therefore, in your code

floodFill(node -= 1);                           
floodFill(node += 1);
floodFill(node -= 16);
floodFill(node += 16);

node is being changed on each function call.

If node was, for example, 10, the following would happen:

• node would be decremented by 1 (node -= 1) and is now 9
• floodFill would be called, with node == 9
• node would be incremented by 1 (node += 1) and is now 10
• etc.

Instead of assignment operators (-=/+=), use the normal operators (-/+) instead.

---

Solution: change

floodFill(node -= 1);                           
floodFill(node += 1);
floodFill(node -= 16);
floodFill(node += 16);

to

floodFill(node - 1);                           
floodFill(node + 1);
floodFill(node - 16);
floodFill(node + 16);

Hope this helps!