如何使用 Javascript 和 XML DOM 创建和加载游戏地图？

Question

我正在为基于浏览器的游戏设计地图，但我真的很难让地图在页面上正确加载。该游戏是一款简单的 2D 自上而下视图游戏。我希望使用存储在 XML 文件中的每个图块的数据将地图组装在页面上的表格中。我坚持要访问 XML 文件中的正确数据，然后将其输出到网页上。目前的 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_pos_1>
  <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_pos_2>
  <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_pos_3>
</map>

我只是不知道如何使用 DOM/XML 请求在使用 XML 数据的表中设置 X 和 Y 数据。我需要它在页面上的 XML 文件中设置每一行，其中包含 XML 文件中的类型属性的类详细信息。我尝试使用 while 循环来设置它，但我无法定义行，即 y_pos 元素。它应该打印出一个 3x3 的表格，但我只是没有自己的 XML 知识。如果有人可以将我推向正确的方向，将不胜感激。谢谢，艾登。

我知道我可能不是很清楚。我不太擅长解释。如果您有兴趣帮助我，我可以尝试更好地解释它。让我知道。谢谢。

编辑：我从未考虑过 JSON。主要是因为我从来没有听说过，也不知道从哪里开始。

Answer 1

您的 XML 格式并不合理 - 您需要表示一个二维数组。

以不同的方式表示 2D 数组，以及如何做到这一点本身就是建议：

<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 很好）对这样的东西进行编码，它只会返回您需要缓存的地图子集，这些子集位于玩家附近。想想像谷歌地图这样的东西是如何做到的。显然，他们不会立即返回整个地球的地图，当然也不会返回地图中已弃用的部分。

至于将其加载到 DOM 块中。你想如何显示这个？您只想将其粘贴在 html 表格中，或者您想使用画布显示它，还是什么？地图是如何渲染的？显然，一种“草”类型的信息不足以知道需要将什么 html 元素放在特定位置。

Answer 2

我建议用 javascript 来动态化它，你可以使用一种非常干净、易于编写的数据格式，如下所示：

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


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