如何将这两个数组组合成 javascript 中的单个 3d 数组

Question

我有一个基于文本的游戏的功能开始，其中有两个数组，一个名为 mainArray 的主数组，其中包含显示带边框的地图的信息，另一个名为 colArray 的碰撞数组，其中包含停止玩家远离地图。

除一个问题外，目前一切正常。我想将碰撞信息作为 3d 数组而不是 2d 数组存储在 mainArray 中，但我尝试使用它的每次尝试都失败了。

我一直认为它应该像在 initMap 函数的 if 语句中添加第三个 [] 到 mainArray[i][j] 一样简单，比如 mainArray[i][j][k] 然后将 "solid" 字符串存储在那里，但这不起作用。

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>

如何将这两个数组组合成 javascript 中的单个 3d 数组

How can I combine these two arrays into a single 3d array in javascript

javascript

arrays

3d

collision