召回方法的问题

Question

我正在制作战舰游戏。我想放置 3 艘长度为 3 块的船，它们不重叠。我写了以下代码：

var boatGrid = {

    placeBoat : function() {
        for (boatNum = 1; boatNum < 4; boatNum++) {
            console.log("boat placed now");
            this.selectPos();
            document.getElementById("boattest").innerHTML = boatPos;
            if (document.getElementById(boatPos).hasBoat == 1) {
                this.placeBoat();
                document.getElementById("boattest").innerHTML = "failed";
            }
            else {
                this.buildBoat();           
            }
        }
    },

    selectPos : function() { 
            xPos = Math.floor(Math.random() * 8 + 1);
            yPos = Math.floor(Math.random() * 10 + 1);
            boatPos = "cell_" + xPos + "_" + yPos;
    },

    buildBoat : function() {
        for (boatLen = 1; boatLen < 4; boatLen++) {
            boatPos = "cell_" + xPos + "_" + yPos;
            xPos = xPos + 1;
            document.getElementById(boatPos).hasBoat = 1;
            document.getElementById(boatPos).style.backgroundColor = "brown";
            console.log("placed one tile");
        }

    },

    clearTable : function() {
        for (y = 1; y < 11; y++) {
            for (x = 1; x < 11; x++) {
                boatPos = "cell_" + x + "_" + y;
                document.getElementById(boatPos).hasBoat = 0;
                document.getElementById(boatPos).boatHere = 0;
                document.getElementById(boatPos).style.backgroundColor = "#34B0D9"
                document.getElementById(boatPos).innerHTML = "<pre>     </pre>";
                boatGrid.hasChecked = 0;
            }
        }
    },
}

当一个坐标被选择两次时（变量boatPos 存储坐标），函数placeBoat() 应该调用它自己。然而，实际发生的是 buildBoat() 函数被调用了两次。你们中的任何人都可以看到问题吗？我目前认为 placeBoat() 函数必须从内部调用自身是一个问题，但我不知道如何解决这个问题。感谢所有帮助。

Answer 1

我会将boatPos 作为全局变量存储在boatGrid 中，如下所示：

var boatGrid = {
    boatPos: 0,

     placeBoat : function() {
        for (boatNum = 1; boatNum < 4; boatNum++) {
            //same code as before
            if (this.boatPos == 1) {
                this.placeBoat();
            // same code as before
        }
    },

    buildBoat : function() {
        for (boatLen = 1; boatLen < 4; boatLen++) {
            //same code as before
            this.boatPos = 1;
            // same code as before
        }
    },
}

如果您需要在boatPos 中存储更多属性（看起来如此），请使用对象：

boatPos = {
   hasBoat: 0,
},

然后，在函数中：

if (this.boatPos.hasBoat == 1)

和

this.boatPos.hasBoat = 1;