javascript扫雷洪水填充算法无法正常工作

Question

我正在尝试编写我的第一个简单的扫雷游戏。为了显示空白字段，我编写了一个简单的洪水填充算法，但是它没有按应有的方式工作。这是一段sn-p代码：

function reveal(a,b){
var fieldId = getFieldId(a,b);  

/*
cells are stored in array fields[]. Each cell is an object {x: x,y: y, hasBomb: boolean,
hasBeenDiscovered: boolean}. Function getFieldId returns array key for (x,y) cell.
*/

if(a < 0 || a > boardWidth-1){return}
if(b < 0 || b > boardHeight-1){return}

if(fields[fieldId].hasBeenDiscovered == true){return}

if(getNeighbourNumber(a,b) > 0){
    document.getElementById(a+'x'+b).innerHTML = getNeighbourNumber(a,b);
    document.getElementById(a+'x'+b).style.backgroundColor = 'white';
    document.getElementById(a+'x'+b).setAttribute('discovered',1);
    fields[fieldId].hasBeenDiscovered = true;
    return
}else if(getNeighbourNumber(a,b) == 0){
    document.getElementById(a+'x'+b).innerHTML = ' ';
    document.getElementById(a+'x'+b).style.backgroundColor = 'white';
    document.getElementById(a+'x'+b).setAttribute('discovered',1);  
    fields[fieldId].hasBeenDiscovered = true;


}

    reveal(a,b);
    console.log('0 ' + '0');
    reveal(a+1,b);
    console.log('+1' + ' ' + '0');
    reveal(a-1,b);
    console.log('-1 ' + '0');
    reveal(a,b+1);
    console.log('0 ' + '+1');
    reveal(a,b-1);
    console.log('0 ' + '-1');
    reveal(a-1,b-1);
    console.log('-1 ' + '-1');
    reveal(a-1,b+1);
    console.log('-1 ' + '+1');
    reveal(a+1,b+1);
    console.log('+1 ' + '+1');
    reveal(a+1,b-1);
    console.log('+1 ' + '-1');
    console.log('------------');

}

当发现北部、西北和西部邻居有邻居炸弹的空单元格时，洪水填充只会显示这些单元格，即使其他邻居（南、东南西、东、东北）是空的。我是初学者，我无法弄清楚为什么这段代码不能完全正常工作。任何帮助将不胜感激:)

编辑：控制台日志仅用于调试尝试。

Answer 1

我很高兴地说，您编写了一段很棒的代码，它很容易阅读和理解。

你只需要检查revealField函数中的一个小东西，这里你需要记住的一件事是当你从属性中获取值时，它总是会在字符串中给你，所以你需要将字符串解析为数字十进制基数。

function revealField(){
    var x = this.getAttribute('x');
    var y = this.getAttribute('y');
    x = parseInt(x, 10);
    y = parseInt(y, 10);

    var fieldId = getFieldId(x,y);

    if(fields[fieldId].hasBomb == true){
        document.getElementById(x+'x'+y).innerHTML = 'B';
        this.style.backgroundColor = 'brown';
        this.setAttribute('hasBomb', 1);
        removeEvents();
        alert('Bomba! Przegrales!');
    }else{
        this.style.backgroundColor = 'white';
        this.setAttribute('discovered',1);
        reveal(x,y);
        if(validateVictory() == true){
            removeEvents();
            alert('Brawo! Odkryles wszystkie bomby!');          
        }   
    }
}

这里也是您更新的fiddle