扫雷显示附近的瓷砖功能

时间:2015-12-25 00:34:20

标签: javascript jquery html minesweeper

我试图在网页中创建ms的空白或“0”功能。

目标:

我的情况:会发生什么:

红色方块表示单击的按钮,绿色圆圈表示其相邻的方块/区块。

我的方法或逻辑是:

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

我的函数代码:(参数是点击按钮的坐标。例如上图中的红色方块/图块有坐标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”属性为true,如果不显示则为false。他们都工作,不要太担心他们。

每个图块按钮的代码:

$(".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循环应该针对单击的磁贴的每个相邻磁贴运行,但是当它运行第一个磁贴的函数时,它会忘记所有其他相邻的瓷砖。我需要这样做,以便函数在0的所有相邻tile上运行,并在0的所有相邻tile上运行,依此类推。

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

1 个答案:

答案 0 :(得分:2)

我认为问题在于你的两个 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)的情况下,它然后用这些值退出调用链并退出每个循环而不是而不是继续执行它们。