如何将这两个数组合并为JavaScript中的单个3d数组

Question

我从一个基于文本的游戏开始，并且在其中有两个数组，一个名为mainArray的主数组，其中包含显示带边框地图的信息；另一个为colArray的碰撞数组，其中包含用于阻止玩家行走的信息不在地图上。

它目前正在按预期运行，除了一个问题。我想将碰撞信息以3d数组而不是2d的形式存储在mainArray中，但是我尝试使用的所有尝试均以失败告终。

[我一直认为，应该像在mainArray [i] [j]旁边的第三个[]上添加initMap函数中的if语句一样简单，然后再存储mainArray [i] [j] [k]实线”字符串，但这不起作用。

Here is a link to a diffrent version where I am trying to implement the third dimension and test for it without running any checks for "solid" and am instead just testing for k

[下面是使用2d数组mainArray和colArray的游戏的工作代码，我想将它们组合成一个3d数组。您也可以在此处运行代码。您可能需要在运行代码后单击全屏以查看发生了什么。

function gameloop() {
  var mainArray = [];
  var colArray = [];
  var mapSizeX = 32;
  var mapSizeY = 128;
  var idPos = {
    x: 0,
    y: 0
  };

  function initMap(mainArray, mapSizeX, mapSizeY) {
    for (var i = 0; i < mapSizeX; i++) {
      mainArray.push([])
      colArray.push([])

      for (var j = 0; j < mapSizeY; j++) {
        mainArray[i][j] = ".";
        colArray[i][j] = "";

        if (j == 0) {
          mainArray[i][j] = "#";
          colArray[i][j] = "Solid";
        }
        if (j == mapSizeY - 1) {
          mainArray[i][j] = "#";
          colArray[i][j] = "Solid";
        }
        if (i == 0) {
          mainArray[i][j] = "#";
          colArray[i][j] = "Solid";
        }
        if (i == mapSizeX - 1) {
          mainArray[i][j] = "#";
          colArray[i][j] = "Solid";
        }
      }
    }
  }

  function nl() {
    GameScreen.innerText += "\n";
  }

  function render() {
    GameScreen.innerText = mainArray.map(arr => arr.join("")).join("\n");
    nl();
    nl();
  }

  function reposition(xChange, yChange, strA) {
    if (colArray[idPos.x + xChange][idPos.y + yChange] === "Solid") {
      GameLog.innerText = "You can not travel in that direction"
    } else {
      mainArray[idPos.x][idPos.y] = ".";
      idPos.x = idPos.x + xChange;
      idPos.y = idPos.y + yChange;
      mainArray[idPos.x][idPos.y] = "@";
      GameLog.innerText = "You take a step to the " + strA
    }

    render();
  }

  //Startup
  initMap(mainArray, mapSizeX, mapSizeY);
  idPos.x = mapSizeX / 2;
  idPos.y = mapSizeY / 2;
  mainArray[idPos.x][idPos.y] = "@";
  //First Render
  render();

  document.addEventListener('keydown', function(event) {
    if (event.keyCode === 38) {
      reposition(-1, 0, "North");
    }
    if (event.keyCode === 40) {
      reposition(1, 0, "South");
    }
    if (event.keyCode === 37) {
      reposition(0, -1, "West");
    }
    if (event.keyCode === 39) {
      reposition(0, 1, "East");
    }
    //alert(event.keyCode);
  });
}

gameloop();

<p style="color:#7d7d7d;font-family:Lucida Console;">Dungeon Valley.<br>
  <font style="color:#ABABAB;font-family:Lucida Console;font-size:0.5em" ;>
    Taming the Borderlands.<br> v0.005 By heromedel. </P>
</font>
<P>
  <section id="GameScreen" style="color:#000000;font-family:Lucida Console;"></section>
  <P>
    <section id="GameLog" style="color:#000000;font-family:Lucida Console;">Arrow Keys to move.<br></section>
    <script src="main.js"></script>

Answer 1

在您的代码中，mainArray[x][y]是一个字符串。如果要在该（坐标）级别存储其他属性，则需要将该字符串替换为包含属性的对象。

我已经更新了您的代码。

一些注意事项：

• 我用一个if来检查所有4个条件，替换了您的4面墙if语句。
• 在render功能中，必须添加一个额外的map才能从新对象中提取表面符号。
• 对mainArray[x][y]的所有引用已更新为mainArray[x][y].surface。

function gameloop() {
  var mainArray = [];
  var colArray = [];
  var mapSizeX = 32;
  var mapSizeY = 128;
  var idPos = {
    x: 0,
    y: 0
  };

  function initMap(mainArray, mapSizeX, mapSizeY) {
    for (var i = 0; i < mapSizeX; i++) {
      mainArray.push([])
      colArray.push([])

      for (var j = 0; j < mapSizeY; j++) {
        mainArray[i][j] = {
          surface: "."
        };
        colArray[i][j] = "";

        if (j == 0 ||
          j == mapSizeY - 1 ||
          i == 0 ||
          i == mapSizeX - 1) {
          mainArray[i][j].surface = "#";
          colArray[i][j] = "Solid";
        }
      }
    }
  }

  function nl() {
    GameScreen.innerText += "\n";
  }

  function render() {
    GameScreen.innerText = mainArray.map(arr => arr.map(cell => cell.surface).join("")).join("\n");
    nl();
    nl();
  }

  function reposition(xChange, yChange, strA) {
    if (colArray[idPos.x + xChange][idPos.y + yChange] === "Solid") {
      GameLog.innerText = "You can not travel in that direction"
    } else {
      mainArray[idPos.x][idPos.y].surface = ".";
      idPos.x = idPos.x + xChange;
      idPos.y = idPos.y + yChange;
      mainArray[idPos.x][idPos.y].surface = "@";
      GameLog.innerText = "You take a step to the " + strA
    }

    render();
  }

  //Startup
  initMap(mainArray, mapSizeX, mapSizeY);
  idPos.x = mapSizeX / 2;
  idPos.y = mapSizeY / 2;
  mainArray[idPos.x][idPos.y].surface = "@";
  //First Render
  render();

  document.addEventListener('keydown', function(event) {
    if (event.keyCode === 38) {
      reposition(-1, 0, "North");
    }
    if (event.keyCode === 40) {
      reposition(1, 0, "South");
    }
    if (event.keyCode === 37) {
      reposition(0, -1, "West");
    }
    if (event.keyCode === 39) {
      reposition(0, 1, "East");
    }
    //alert(event.keyCode);
  });
}

gameloop();

.info {
  color: #7d7d7d;
  font-family: Lucida Console;
}

.info span {
  color: #ABABAB;
  font-family: Lucida Console;
  font-size: 0.5em;
}

#GameScreen,
#GameLog {
  color: #000000;
  font-family: Lucida Console;
}

<p class="info">Dungeon Valley.<br>
  <span class="">
    Taming the Borderlands.<br> v0.005 By heromedel.
  </span>
</p>
<section id="GameScreen"></section>
<section id="GameLog">Arrow Keys to move.<br></section>