Return coordinates (x,y) from an array of numbers in Javascript

Question

I am trying to make a collision map in a 2d top down view game in Javascript. I am using Tiled to build the maps. Tiled generates a json / javascript file with an array of each element in my map. I can set a boolean for each tile, so those with the true setting will come out in the array as 1 and those with the false value will return 0.

Now I want output those data as x,y coordenates. I mean if i have the array [0,0,0,0] I want that those output like (x,y) (0,0), (1,0), (2,0), (3,0) based in the width and height of the tilemap array. Something like this:

"data":[0,0,0,0,
        1,1,1,1,
        0,0,0,0,
        0,0,0,0]
"height":4,
"width":4,
"x":0,
"y":0

My problem is I don't know how to say it to my loop that there will be four columns and four rows and the index should change from (0,0), (0,1), (0,2), (0,3) to (1,0), (1,1),(1,2),(1,3) after end the first row continue until the last column.

Any idea?

Nested loops? It's not clear what the specific issue is.

Dave Newton
– Dave Newton

2021-12-23 00:23:01 +00:00
Commented Dec 23, 2021 at 0:23 — Dave Newton
– Dave Newton, Commented Dec 23, 2021 at 0:23

Sash Sinha · Accepted Answer · 2021-12-23 00:31:02Z

2

You could use two for-loops for the current row and col respectively:

const tiledOutputJson = {
    "data": [
        0, 0, 0, 0,
        1, 1, 1, 1,
        0, 0, 0, 0,
        0, 0, 0, 0
    ],
    "height": 4,
    "width": 4,
    "x": 0,
    "y": 0
};

const { data, height, width, x, y } = tiledOutputJson;

for (let row = 0; row < height; row++) {
    for (let col = 0; col < width; col++) {
        console.log(`(${row}, ${col}) = ${data[row * height + col]}`);
    }
    console.log();
}

answered Dec 23, 2021 at 0:31

Sash Sinha

22.8k4 gold badges27 silver badges48 bronze badges

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

1 Comment

0xNicko Over a year ago

I had been thinking about it for hours without knowing that I could do it with a nested loop. Thanks for the help!

Vincent Menzel · Accepted Answer · 2021-12-23 00:36:23Z

0

In general I would recommend to make it an array for x which contains the arrays for y

[
[0,0,0,0],
[1,1,1,1],
[0,0,0,0],
]

You can do the mapping like so

const data = {
  "data": [0, 0, 0, 0,
    1, 1, 1, 1,
    0, 0, 0, 0,
    0, 0, 0, 0
  ],
  "height": 4,
  "width": 4,
  "x": 0,
  "y": 0
}

for (let x = 0; x < data.height * data.width; x = x + data.width) {
  for (let y = x; y < data.width + x; y++) {
    console.log({
      x: x / data.height,
      y: y % data.width,
      v: data.data[y]
    })
  }
}

answered Dec 23, 2021 at 0:36

Vincent Menzel

1,0751 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

Return coordinates (x,y) from an array of numbers in Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related