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.

Your first dimension has length 1? Your JavaScript "array" has only two dimensions? — Bergi
– Bergi, Commented Sep 19, 2013 at 3:25

Bergi · Accepted Answer · 2013-09-19 03:27:16Z

2

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}

answered Sep 19, 2013 at 3:27

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Logan Cunningham Over a year ago

Thanks! Javascript arrays are kind of confusing for me a bit and this cleared it up so much!

tybro0103 Over a year ago

btw, that's 2d, not 3d ;)

Community · Accepted Answer · 2017-04-13 12:18:41Z

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:

Collectives™ on Stack Overflow

JavaScript 3 dimensional Arrays

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related