Как создать и загрузить игровую карту, используя Javasctipt и XML DOM?

Question

Я разрабатываю карту для браузерной игры, и я действительно изо всех сил стараюсь, чтобы карта правильно загрузилась на странице. Игра представляет собой простую 2D-игру сверху вниз. Я хочу, чтобы карта была собрана в таблице на странице с использованием данных для каждой плитки, хранящейся в файле XML. Я застрял в отношении доступа к правильным данным в файле XML, а затем вывести их на веб-страницу. Файл XML на данный момент похож на:

<code><map></code>
  <code><y_pos_1></code>
    <code><x_pos_1 type="grass" active="yes"/></code>
    <code><x_pos_2 type="grass" active="yes"/></code>
    <code><x_pos_3 type="grass" active="yes"/></code>
  <code></y_pos_1></code>
  <code><y_pos_2></code>
    <code><x_pos_1 type="grass" active="yes"/></code>
    <code><x_pos_2 type="grass" active="yes"/></code>
    <code><x_pos_3 type="grass" active="yes"/></code>
  <code></y_pos_2></code>
  <code><y_pos_3></code>
    <code><x_pos_1 type="grass" active="yes"/></code>
    <code><x_pos_2 type="grass" active="yes"/></code>
    <code><x_pos_3 type="grass" active="yes"/></code>
  <code></y_pos_3></code>
<code></map>

Я просто не могу понять, как использовать запросы DOM / XML для установки данных X и Y в таблице с использованием данных XML. Мне нужно установить каждую строку в XML-файле на странице с данными класса, которые в XML-файле являются атрибутом типа. Я попытался использовать циклы while, чтобы установить его, но я не могу определить строку, которая является элементом y_pos. Он должен распечатать таблицу 3х3, но у меня просто нет знаний по XML, чтобы сделать это самому. Если бы кто-то мог подтолкнуть меня в правильном направлении для этого, я был бы очень признателен. Спасибо, Эйден.

Я знаю, что, наверное, не очень ясно. Я не очень хорош в объяснениях. Если вы заинтересованы в том, чтобы помочь мне, я мог бы попытаться объяснить это лучше. Просто дай мне знать. Спасибо.

Редактировать: я никогда не рассматривал JSON. Главным образом потому, что я никогда не слышал об этом, и я не знаю, с чего начать.

Answer 1

Я бы предложил сделать это динамически с помощью JavaScript, вы можете использовать очень чистый, простой для записи формат данных, такой как:

var level=
["abdecdfdhidnsksd"
,"fsldmgkxnkngjdxj"
,"kdnfndxgndxngjen"
,"djfjdznfdjdhfjnf"
,"fdmnjdgjdnejndjf"
,"sfnddxbvunusefne"
,"aknasdnfcjefbjgd"
,"efgfdwthyjtftdsw"
,"nsfeufnuwndauauf"]


document.write(level[3][5])

Answer 2

Ваш XML на самом деле не в разумном формате - вам нужно представить двумерный массив.

Представьте двумерный массив по-другому, и как это сделать, подсказывает:

<map>
  <y pos="1">
    <x pos="1" type="grass" active="yes"/>
    <x pos="2" type="grass" active="yes"/>
    <x pos="3" type="grass" active="yes"/>
  </y>
  <y pos="2">
    <x pos="1" type="grass" active="yes"/>
    <x pos="2" type="grass" active="yes"/>
    <x pos="3" type="grass" active="yes"/>
  </y>
  <y pos="3">
    <x pos="1" type="grass" active="yes"/>
    <x pos="2" type="grass" active="yes"/>
    <x pos="3" type="grass" active="yes"/>
  </y>
</map>

Лично я бы закодировал что-то подобное в другом формате (JSON это хорошо), который вернул бы только некоторое подмножество карты, которое вам нужно было кэшировать, которое было рядом с проигрывателем. Подумайте о том, как что-то вроде Google Maps делает это. Очевидно, что они не возвращают карты для всей земли одновременно, и они, конечно, не возвращают устаревшие части карты.

Что касается загрузки в DOM. Как это, что вы хотите отобразить это? Вы хотите просто вставить его в HTML-таблицу, или вы хотите отобразить его с помощью canvas, или как? Как карта отображается? Очевидно, что для типа «трава» недостаточно информации, чтобы знать, какой элемент HTML нужно поместить в определенную позицию.