扫雷显示附近的瓷砖功能

Question

我正在尝试在网页中制作ms的空白或“0”功能。

目标：

我的情况：应该发生的情况：

红色方块表示被点击的按钮，绿色圆圈表示相邻的按钮squares/tiles。

我实现此功能的方法或逻辑是：

第 1 步：如果单击的按钮是 0，则显示其相邻的图块。
第 2 步：对于每个相邻的图块，如果该图块为 0，则显示该图块的相邻图块。依此类推，直到显示每个连接的 0 的所有相邻图块。

我的函数的代码：（参数是点击按钮的坐标。e.g.the上图中红色square/tile坐标为3,6）

function RevealNearbyTiles(y,x){

    var cordsx;                     //cordsx and cordsy represent the adjacent tiles of the coordinates (the parameters).
    var cordsy;                             
    var coordinates; 
    for(i=-1; i<2; i++){   //for every adjacent tile:
        for(j=-1;j<2;j++){
            cordsx = x;
            cordsy = y;
            if(i === 0 && j === 0){    
                continue;
            }
            else{
                cordsx += j; 
                cordsy += i;
                //if this ^ offset is within the grid:
                if((cordsx >= 0 && cordsx < 10) && (cordsy >= 0 && cordsy < 10)){
                    //the coordinates of the tile.
                    coordinates = $("#mstable tr:nth-of-type("+(cordsy+1)+") td:nth-of-type("+(cordsx+1)+") .tiles");
                    //if it has not been revealed
                    if(coordinates.parent().attr("data-revealed") === "false"){
                        //reveal this coordinate.   
                        coordinates.empty().append("<p id='number'>"+coordinates.parent().attr("data-value")+"</p>");                           
                        coordinates.parent().attr("data-revealed", "true");
                        //if this coordinate is 0
                        if(coordinates.parent().attr("data-value") === " "){
                            //reveal this coordiantes' nerabytiles
                            RevealNearbyTiles(cordsy,cordsx);
                        }

                    }       
                }
            }  
        }
    }
}

属性 "data-value" 是该图块附近的炸弹数量。如果图块已显示，则属性 "data-revealed" 为真，否则为假。两者都有作用，不用太担心。

每个磁贴按钮的代码：

$(".tiles").click(function(){
        //if this button is clicked, reveal this tile
        $(this).empty().append("<p id='number'>"+$(this).parent().attr("data-value")+"</p>");
        $(this).parent().attr("data-revealed","true");
        //if this tile's value is 0, call the function
        if($(this).parent().attr("data-value") === " "){
            RevealNearbyTiles($(this).parent().data("index").a,$(this).parent().data("index").b);
        }
    });

我认为问题是： for 循环应该运行用于被单击的图块的每个相邻图块，但是当它运行是第一个图块的函数，它会忘记所有其他相邻的图块。我需要使函数运行s 在所有为 0 的相邻图块上，以及在所有为 0 的相邻图块上，依此类推。

感谢您的帮助，这是一个很难解释的问题=/。我搜索了很多地方，但找不到答案。很抱歉这个很长很具体的问题。

Answer 1

我认为问题出在您的两个 for 循环中，它们使用名为 i 和 j 的全局变量，每次调用 RevealNearbyTiles() 时它们都是相同的。您可以使用以下代码解决此问题...

for(var i=-1; i<2; i++){   //for every adjacent tile:
    for(var j=-1;j<2;j++){

我认为发生的事情是你的算法运行直到它遇到显示所有相邻图块（例如 i = 1，j = 1）的情况，然后退出调用链值并退出每个循环而不是继续执行它们。

扫雷显示附近的瓷砖功能

Minesweeper reveal nearby tiles function

html

javascript

jquery

minesweeper