How to create and load a game map using Javasctipt and XML DOM?

Question

I'm designing a map for a browser based game, and I'm really struggling getting the map to load up correctly on the page. The game is a simple, 2D top down view game. I want the map to be assembled in a table on the page using data for each tile stored in an XML file. I'm stuck as towards accessing the correct data in the XML file, and then outputting it onto the web page. The XML file at the moment is similar to:

<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>

I just can't figure out how to use DOM/XML requests to set the X and Y data in a table using the XML data. I need it to set every row in the XML file on the page with the class details which in the XML file is the type attribute. I've tried using while loops to set it but I can't define the row, which is the y_pos element. It should print out a 3x3 table but I just don't have the XML knowledge to do it myself. If someone could push me in the correct direction for doing this it'd be greatly appreciated. Thanks, Aiden.

I know I probably wasn't very clear. I'm not very good at explanations. If you're interested in helping me out I could try and explain it better. Just let me know. Thanks.

Edit: I've never considered JSON. Mainly because I've never heard of it, and I wouldn't know where to start with it.

Answer 1

Your XML isn't really in a sensible format - you need to represent a 2D array.

Represent a 2D array in a different fashion and how to do this suggests itself:

<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>

Personally I'd encode something like this in a different format (JSON is nice) that would only return some subset of the map that you needed to cache that was near the player. Think about how something like google maps does this. Obviously they don't return the maps for the entire earth at once, and they certainly don't return deprecated portions of the map.

As for the loading it into the DOM piece. How is it that you want to display this? You want to just stick it in an html table, or do you want to display it using canvas, or what? How is the map being rendered? Obviously a type of "grass" is not enough information to know what html element needs to be put in a specific position.

Answer 2

I would suggest making it dynamically with javascript, you can use a very clean, easy to write data format like this:

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


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