Approaches for storing grid-like information

Question

I am drawing this simple grid on my NodeJS server:

var grid = [];

for(var x = 0; x < 20; x++){
    grid[x] = [];
    for(var y = 0; y < 20; y++){
    grid[x][y] = 0;

    }
}

console.log(grid);

The outcome looks like this:

I know, pretty right?!

0 is supposed to indicate FREE, thus if a player requests to move to a field with 0, he will!

The problems come when I want to add more then just Free/Occupied, for instance I would like to give each Array Element an ID number for the Client Updates, or certain features on the field to be stored.

I tried to assign { something: N, something2: N}

But thought it looked rather performance expensive in the long run. (On a big Grid)

I read about using a single Object for several elements, but I cannot find this any more..

Should I perhaps use an Array of Objects, or an Additional Array inside each X,Y element?

Any performance / convenience / anything goes tips are welcome :D

Edit: Thank you for the ideas so far, I was now thinking to perhaps using Strings. Storing Variable_A + "," + Variable_B and then later using the .split to use the information. Any thoughts on this?

Answer 1

You seem to match this frequent use case :

• a big map with each cell having a few characteristics
• some objects being somewhere in the map

I suppose the map is big because you ask about performances. If the map is small, then both the question and my answer seem less relevant.

I usually use

• a grid containing an int for each cell, this int being able to carry up to 32 flags (using bitwise operation)
• a list of objects (may be an array or database records), each one having an x and an y

Not referencing the objects from the grid avoid coherency/race problems and is lighter.

A frequent practice is also to use a monodimensional array and to address the cells as a[x+W*y];. It makes many operation (like the cloning of the whole map or any range operation independent of the position) easier and faster. I'm not really familiar with node.js but I suppose the Buffer class should be used.

As I suppose you'll want to use a browser as final interface, here's a trick I use : I encode my maps as PNG, with each color of the palette simply being one of the possible flag combinations. This makes

• storage and transmission very efficient (PNG is compressed)
• map operations easy with image based operations
• fast rendering at low resolution easy in the browser using image rendering

Answer 2

You should absolutely use this approach:

{ something: N, something2: N}

Deciding to not use it, is a perfect example of premature optimization.

Just do the simplest thing that will work, and if it is slower or takes too much resources (this will more likely be the problem, not speed) you optimize from there.

People nowadays underestimate what a powerful beast they have in front of them. And I am not even talking about your dev PC, but of modern smartphones/tablets.