すべての方向でdivをロードするには

Question

私は主にジャンゴバックエンドでjavascriptを使ってゲームを構築しようとしています。理想的にはマップは膨大なものになるので、ユーザーのためにマップ全体をロードするのではなく、周りのものだけをロードしたいと考えています。 （Googleマップに似ています）一度にすべて読み込まれると、10,000個以上のdivが存在する可能性があります。

私はいくつかの相対的なバックグラウンドdivを作成し、絶対位置でdivをロードすることを考えています。 Javascriptがロードするために本部

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

Javascriptを

で

のようなものを使用してチャンクを読み込むことができます：

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

しかし、これは各チャンクを相殺するためにどのくらいの計算に巨大な混乱になるような気がします。

これは機能し、ブラウザ間で互換性のあるソリューションですか？または、Googleマップに似たマップのチャンクを読み込むことができる簡単なソリューションがありますか？

Answer 1

「チャンク」の定義方法によって異なります。ほとんどのTilesetベースのエンジンは、固定サイズ（通常はピクセル単位であるが、他のものでもよい）の「タイル」を持つことで、自分自身にとってより簡単になります。だから、与えることができ、「タイル数のx、yの」ちょうどない機能に：より多くの柔軟性を提供します

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

ものは通常、個々のタイルセットのためのJSONまたはXMLでファイルを持っています。これは、各タイルの境界線とオフセットを定義します。したがって、あなたの関数は、ファイルを読み込むだけで済むので、開発サイクルでタイルセットごとに1回だけ事前計算する必要があります。

プログラミングを開始する前に、はTiled editorとSuperpowers engineの組み合わせをお勧めします。

これは基本的にはあなたが何を記述しているのかを正確に示しているので、そのまま使用することができます。それ以外の場合は、独自のエンジンで処理できるさまざまな方法を試す素晴らしいツールです。