Javascript: Best way to store map data?

Question

I'm building a simple tile-based 2D game in JavaScript, and I want to know the best way to store map data on the client.

On the server, I store the map in 64x64 chunks and I'll request the next three sets when the player enters a quadrant of their current 64x64 chunk.

Because of this, I'll definitely need to split the chunk into a quadtree, where each node is 1/4 of the map.

I want to know how to store each quadrant within the quadtree. My biggest concern is how quickly I can parse the data. When I request a new 64x64 piece of the map, I need to have it ready to go before the player would be able to see it. If I store the map data as a 2-dimensional array, it would take O(N^2) time to store it, which I'm not satisfied with, especially because I'd be doing 3x 4096 tiles. Would it be possible to get this down to O(nlogn)?

If it helps, I have a simple demo of the game world up. Currently, it just copies one 64x64 chunk into a 2D array. https://rawgit.com/Meredithrs/HTML5-Canvas/master/game-window-demo/index.html

Answer 1

As per my understanding

First optimization

You could possibly try to store the allowed movement location in a single dimension array only for the main tile instead of storing position of all tiles. This would drastically reduce the data storage.

Another optimization

You could also split your view into four quadrants. (like divide and conquer)

Eg if total dimension is [400,400]

split it like

         - [0,0] - [ 200,200]
         -  [200,0] - [400, 200]
         -  [0, 200] - [200, 400]
         -  [200,200] - [400, 400]

Then create four single dimension array with allowed position co-ordinates [x,y] under each quadrant.

Now based on the tile location, pick which quadrant array. Then iterate through it to find whether that is allowed movement or not.

Optimization could be done even more.. Good luck with your project :)