如何在所有方向加载div(How to load divs in all directions)

如何在所有方向加载div(How to load divs in all directions)

我正在尝试使用主要使用django后端的javascript来构建游戏。 理想情况下，地图将是巨大的，所以我不想为用户加载整个地图，而只是加载周围的地图。 （类似于谷歌地图）如果一次加载，可能会有10,000多个div。

我想做一些位置相对背景div，并用绝对位置加载div。 Javascript可以使用类似的东西加载块

在Javascript中

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

分组加载：

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

但我觉得计算抵消每个块的数量会是一个巨大的混乱。

这是否有效，是否是跨浏览器的兼容解决方案？ 或者是否有一个更简单的解决方案可以加载类似于Google地图的地图块？

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?

最满意答案

这取决于你如何定义你的“块”。 大多数基于Tileset的引擎通过使用固定大小的“磁贴”（通常以像素为单位，但可能是其他东西）使自己更容易。 所以你可以给一个函数“tile-count x，y”，它只是：

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

提供更多灵活性的那些通常在每个tileset的json或xml中都有一个文件。 这定义了每个图块的边框和偏移。 因此，您的函数只需要读取文件，您需要在开发周期中为每个tileset预先计算一次。

在开始编程之前进行实验，我真的可以推荐Tiled编辑器和Superpowers引擎的组合 。

它基本上为您提供了您所描述的内容，因此您可以决定按原样使用它。 否则，它是一个很好的工具，可以尝试使用自己的引擎处理事物的不同方式。

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.