Battleship JavaScript 不会显示二维数组答案

【问题标题】：Battleship JavaScript won't display the 2d arrayBattleship JavaScript 不会显示二维数组
【发布时间】：2020-01-24 13:06:39
【问题描述】：

我正在尝试创建一个简单的 Battleship 10x10 游戏，其中包含五艘船。但是我有点卡在我的二维数组不起作用的第一部分，就像我尝试运行它时它不会显示任何东西一样。这是因为我的语法还是什么？ gameArray 用于显示船只的位置。

var gameArray=[];
var empty = 0;
var hit = 1;
var miss = 2;
var numShips =5;
initGame(10);
dispgameArray();
shipLocator();
dispgameArray();
dispBoard(); 
document.getElementById("part2").innerHTML = "<img src='water.png' alt='1' height='100' width='100'>";

function initGame(n){
    alert("initGame");
    var rows=0;
    var cols=0;
    for (rows=0; rows<n; rows++){
        for(cols=0; cols<n; cols++){
            gameArray[rows][cols] = empty;
        }
    }
}

function isOdd(num) {
    if (num%2 === 0){
        return true;
    } 
    else {
        return false;
    }
}

function dispgameArray(){

    var rows=0;
    var cols=0;
    var html = "";
    alert(gameArray[rows].length);
    for (rows=0; rows < gameArray.length; rows++){
        for(cols=0; cols<gameArray[rows].length; cols++){
            if (gameArray[rows][cols] == empty) {
                if (isOdd(rows)){
                    html = html + "X"
                } 
                else
                {html = html + "X "}
            }
            if (gameArray[rows][cols] == ship){
                if (isOdd(rows)){
                    html = html + "&"
                } 
                else
                {html = html + "&  "}
            }
            if (gameArray[rows][cols] == miss){
                if (isOdd(rows)){
                    html = html + "M"
                } 
                else
                {html = html + "M  "}
            }
            if (gameArray[rows][cols] == hit){
                if (isOdd(rows)){
                    html = html + "*"
                } 
                else
                {html = html + "*  "}
            }
        }
    }
    document.getElementById("part3").innerHTML = html;
}

【问题讨论】：

标签： javascript html multidimensional-array

【解决方案1】：

您的代码存在一些问题：

在 JavaScript 中创建二维数组时，您需要对其进行初始化，例如在行循环中执行 gameArray[rows] = [];。
您缺少ship 变量。（我已将其设置为 3。）

如果您想要一种简单的方法来调试此类问题，请尝试打开开发者工具，在 Firefox 或 Chrome 中使用键盘快捷键 Control+Shift+I 打开它们。应该有一个控制台选项卡会显示错误。

你仍然缺少一个 shipLocator() 方法，但我无法预测应该去那里，所以我只是让你知道。

var gameArray=[];
var empty = 0;
var hit = 1;
var miss = 2;
var ship = 3;
var numShips =5;
initGame(10);
dispgameArray();
shipLocator();
dispgameArray();
dispBoard(); 
document.getElementById("part2").innerHTML = "<img src='water.png' alt='1' height='100' width='100'>";

function initGame(n){
    alert("initGame");
    var rows=0;
    var cols=0;
    for (rows=0; rows<n; rows++){
        gameArray[rows] = [];
        for(cols=0; cols<n; cols++){
            gameArray[rows][cols] = empty;
        }
    }
}

function isOdd(num) {
    if (num%2 === 0){
        return true;
    } 
    else {
        return false;
    }
}

function dispgameArray(){

    var rows=0;
    var cols=0;
    var html = "";
    alert(gameArray[rows].length);
    for (rows=0; rows < gameArray.length; rows++){
        for(cols=0; cols<gameArray[rows].length; cols++){
            if (gameArray[rows][cols] == empty) {
                if (isOdd(rows)){
                    html = html + "X"
                } 
                else
                {html = html + "X "}
            }
            if (gameArray[rows][cols] == ship){
                if (isOdd(rows)){
                    html = html + "&"
                } 
                else
                {html = html + "&  "}
            }
            if (gameArray[rows][cols] == miss){
                if (isOdd(rows)){
                    html = html + "M"
                } 
                else
                {html = html + "M  "}
            }
            if (gameArray[rows][cols] == hit){
                if (isOdd(rows)){
                    html = html + "*"
                } 
                else
                {html = html + "*  "}
            }
        }
    }
    document.getElementById("part3").innerHTML = html;
}

&lt;div id="part3"&gt;&lt;/div&gt;

【讨论】：