Nick Dill Nick Dill - 8 months ago 39
HTML Question

How to load divs in all directions

I'm trying to build a game using primarily javascript with a django backend. Ideally the map will be huge, so I don't want to load the entire map for users but only what is around. (Similar to google maps) There would likely be 10,000+ divs, if loaded all at once.

I thinking of making some position relative background div, and load divs in with absolute positions. Javascript could load chunks using something like

In Javascript

var someX = -1000;
var someY = -500;

Div to load:

top: (someX + "px");
left: (someY + "px");

But I feel like this would be a huge mess to calculate how much to offset each chunk.

Will this work and is it a compatible solution across browser? Or is there an easier solution that can load chunks of the map similar to Google Maps?

bid bid
Answer Source

It depends on how you define your "chunks". Most Tileset-based engines make it easier for themselves by having "tiles" in fixed sizes (usually in pixels, but could be something else). So you can give "tile-count x,y" to a function, that just does:

offsetX = tileNumberX x tilewidth  ;
offsetY = tileNumberY x tileHeight ;

The ones that offer more flexibility usually have a file in json or xml for each individual tileset. This defines the borders and offsets for each tile. So your function would just have to read files, that you need to pre-calculate just once per tileset in your development cycle.

For experimenting before you start programming, I can really recommend the combination of the Tiled editor and the Superpowers engine.

It basically gives you exactly what you describe, so you could decide to use it as it is. Otherwise it's a great tool to experiment with different ways your own engine can handle things.