Как я могу объединить эти два массива в один трехмерный массив в javascript - PullRequest
0 голосов
/ 28 февраля 2020

У меня есть работающее начало текстовой игры, и в нем два массива: основной массив mainArray, который содержит информацию для отображения карты с границами, и массив коллизий colArray, который содержит информацию, чтобы остановить игрока от уходит с карты.

В настоящее время она работает так, как задумано, за исключением одной проблемы. Я хочу сохранить информацию о столкновениях в mainArray в виде трехмерного массива вместо 2d, но каждая попытка работать с ним не удалась.

Я продолжаю думать, что это должно быть так же просто, как добавить к операторам if в функции initMap третий [] рядом с mainArray [i] [j] что-то вроде mainArray [i] [j] [k] и затем сохраните строки "solid", но это не сработает.

Вот ссылка на другую версию, где я пытаюсь реализовать третье измерение и проверить его, не выполняя никаких проверяет "solid" и вместо этого просто проверяет 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>

1 Ответ

1 голос
/ 28 февраля 2020

В вашем коде mainArray[x][y] - это строка. Если вы хотите сохранить дополнительные свойства на этом (координатном) уровне, вам нужно заменить эту строку объектом, содержащим свойства.

Я обновил ваш код, чтобы сделать это.

Некоторые примечания:

  • Я заменил ваши 4 оператора стены if на один if, проверяющий все 4 условия.
  • В функции 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>
...