Javascript 洪水填充功能仅部分工作 [扫雷]

Question

几个月来我一直在尝试创建自己的扫雷游戏(为了好玩)。唯一让我真正困惑的是如何使用递归函数(flood-fill)来填充游戏中的空白区域。

洪水填充仅部分起作用。它不会从任何单击的节点延伸到右侧或底部节点。

Current full code

FloodFill - 部分:

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); 

这里的“这里”是指被点击的节点。网格的大小是16，所以底部节点是当前节点+16。

这个小游戏项目对我来说意义重大，因此非常感谢任何帮助。

Answer 1

运算符-=和+=表示向变量减去/添加某个值。

a += 10;

相当于

a = a + 10;

因此，在您的代码中

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

node 在每次函数调用时都会发生更改。

例如，如果 node 为 10，则会发生以下情况:

• node 将减少 1 (node -= 1)，现在为 9
• floodFill 将被调用，node == 9
• node 将增加 1 (node += 1)，现在为 10
• 等等

不要使用赋值运算符 (-=/+=)，而是使用普通运算符 (-/+) >) 相反。

<小时/>

解决方案:更改

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

到

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

希望这有帮助!