JavaScript 3 dimensional Arrays

Question

I want to create a DOS style game in Javascript but I cannot get the map to display correctly.

Here is the array in Windows Console:

char Map[1][10][20] = {
 "####################",
 "# #",
 "# #",
 "# #",
 "# #",
 "# #",
 "# #",
 "# #",
 "# #",
 "####################",
};

And this is what my javascript code is

var Map = {
 "#":["#","#","#","#","#","#","#","#","#","#","#","#","#","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 "#":["#","#","#","#","#","#","#","#","#","#","#","#","#","#"]
};

Essentially I want it to output the first array exactly as it appears. I should be able to do everything else.

• elclanrs: You can't have duplicated keys...
• Bergi: Your first dimension has length 1? Your JavaScript "array" has only two dimensions?

Answer 1

Use an array, not an object on which you had defined every row with the same key (overwriting each other, if not being invalid¹):

var Map = [
 ["#","#","#","#","#","#","#","#","#","#","#","#","#","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#"," "," "," "," "," "," "," "," "," "," "," "," ","#"],
 ["#","#","#","#","#","#","#","#","#","#","#","#","#","#"]
];

_{1: in strict mode, you will get a syntax error for this}

• Logan Cunningham: Thanks! Javascript arrays are kind of confusing for me a bit and this cleared it up so much!
• tybro0103: btw, that's 2d, not 3d ;)

Answer 2

Your variable Map should be an array of arrays, rather than an object.

Another way to initialize it that is a bit more visual:

// Splits each row by character to from a new array
var map = [
 "####################".split(''),
 "# #".split(''),
 "# #".split(''),
 "# #".split(''),
 "# #".split(''),
 "# #".split(''),
 "# #".split(''),
 "# #".split(''),
 "# #".split(''),
 "####################".split('')];

The result of this is the same as in @Bergi's answer.

You mentioned in your question wanting to "output the first array exactly as it appears". If you are doing this in the browser, one way to do that would be to make use of the pre tag:

HTML:

<pre id="map"></pre>

Code:

function updateMap() {
 // Iterates the array, joining each subarray with no separator,
 // then joining the result with a new line
 mapEle.innerText = map.map(function (val, idx, arr) {
 return val.join('');
 }).join('\n');
}

Each time you modify the map, you can render it by calling updateMap().

For example:

var chars = ['|', '/', '\u2014', '\\'];
var counter = 0;
window.setInterval(function () {
 map[4][9] = chars[counter % chars.length];
 updateMap();
 counter++;
}, 200);

Demo Fiddle

Take a look a this question on gamedev.stackexchange and its answers - if you want to focus on the game rather than building parts of the engine, the linked libraries may be interesting:

• unicodetiles.js
• rot.js