6

私はブラウザゲームに取り組んでいますが、ゲームが行われるグリッド/ボードを作成する最も簡単な方法は何だろうかと思わずにはいられません。

今、単なるサンプルとして、これをお見せします：

-リンクはもうアクティブではありません。基本的には 25x25 のテーブル +tr+td グリッドでした-

さて、グリッドが大きくなるにつれて、テーブルとその td は非常に重いファイル ページを作成し、ブラウザ エンジンとコンピュータからより多くのリソースを吸い込みます。

それで、td のテーブルは、巨大なグリッドのようなボードを作成する最も軽量な方法ですか、それとも、お勧めの軽いものはありますか?

乾杯ソトクラ

4

7 に答える 7

4

テーブルレイアウトの計算は、各列の正確な幅を計算するために最後のセルの寸法を知る必要があるため、ブラウザにとって非常に複雑な作業です。したがって、テーブルを使用する場合は、table-layout:fixed早めに追加してください。

フローティングボックスまたは相対的な配置は、レンダリングが高速になる場合があります。

于 2010-04-06T10:44:48.353 に答える
3

CSS {position: relative; 上: 20px; left: 20px} などを繰り返し背景グリッドを描画します。

于 2010-04-03T15:53:28.203 に答える
3

リンクを削除し、Javascript (できれば JQuery など) のクリック イベントを介して処理すると、ファイル サイズが大幅に削減されます。

于 2010-04-06T08:17:42.137 に答える
3

JavaScript を使用して DOM を操作することにより、テーブルを作成できます。<td></td>グリッドのコンテンツが非常に規則的である場合、それを行うコードは、400x400 回にマークアップを加えたものよりもはるかに小さくなります。もちろん、パフォーマンスは JavaScript エンジンに依存します。しかし、それが完全にうまくいかない場合は、ネットワーク転送時間に関係なく、すべての HTML を解析するよりも高速になる可能性があります。

于 2010-04-06T08:24:41.160 に答える
1

My suggestion is having the tiles absolutely positioned inside the board, to save on HTML (transfer time) and position calculations (load time) by the browser. JS to register the clicks and handle it (less HTML = less transfer and load time).

So, you could have this base CSS:

#board {
  display: block;
  width: [BoardWidth]px; /* TileWidth * NumberOrColumns */
  height: [BoardHeight]px; /* TileHeight * NumberOfRows */
  position: relative;
}
.tile {
  display: block;
  width: [TileWidth]px;
  height: [TileHeight]px;
  float: left;
}

Then having the html generated like that:

<div id="board">
<div class="tile" style="position: absolute; left:0px; top:0px;"></div>
<div class="tile" style="position: absolute; left:20px; top:0px;"></div>
<div class="tile" style="position: absolute; left:40px; top:0px;"></div>
<div class="tile" style="position: absolute; left:60px; top:0px;"></div>
<div class="tile" style="position: absolute; left:0px; top:20px;"></div>
<div class="tile" style="position: absolute; left:20px; top:20px;"></div>
<div class="tile" style="position: absolute; left:40px; top:20px;"></div>
<div class="tile" style="position: absolute; left:60px; top:20px;"></div>
<div class="tile" style="position: absolute; left:0px; top:40px;"></div>
<!--(...)-->
</div>

In which every tile has position left: [X*TileWidth]px; top: [Y*TileHeight]px;.
That, or David M's suggestion.

You can also cut on page load time if you make the page size smaller - so, like suggested, using JQuery or another JavaScript framework to create the trigger for the click on each div would be ideal.
I'm not very savvy, but using JQuery it would be something like:

$(document).ready(function() {
  $(".tile").click(function() {
    // find out which square was clicked, and perhaps redirect to a page with get variables
  });
});
于 2010-04-06T10:09:47.153 に答える
0

http://www.w3schools.com/TAGS/tag_map.asp

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>

イメージマップを使用してチェッカー ボードのトリガーを生成する場合は、繰り返される背景と、合計を塗りつぶす透明な画像と高さだけが必要です。

于 2010-04-06T10:30:37.640 に答える
0

たとえば、正方形が 20x20px の場合は、CSS フロートで構築できます。

<style type="text/css">
div.container {
width: Xpx; /* 20px [square box width]+1px [border width of each square])) * number of squares */
height: Xpx; /* similar to above] */
border: solid black;
border-width: 1px 0px 0px 1px;} /* North East South West */

div.square {
float: left;
width: 20px;
height: 20px;
border: solid black;
border-width: 0px 1px 1px 0px;}

div.row {
clear: both;}
</style>


<div class="container">
    <div class="row">
        <div class="square">
        </div>
        ...
    </div>
...
</div>

有効な doctype http://htmlhelp.com/tools/validator/doctype.htmlで IE を使用するか、quirks モードでボックス モデル ハックを使用することを忘れないでください [ http://tantek.com/CSS/Examples/boxmodelhack.html]。

クラスの代わりに ID を使用し、CSS で単一の文字を使用すると、おそらく上記の作業を減らすことができます。

ただし、通常、何が最速かはブラウザーに大きく依存します。たとえば、IE がテーブルでより優れたパフォーマンスを発揮し、他のブラウザーは相対的な DIV/float でより優れたパフォーマンスを発揮しても驚かないでしょう。

（上記はテストしていませんが、同様のものが機能するはずです。）

次に、上記を JavaScript に変換して、ページの読み込み時間を短縮できます。たとえば、次のようになります。

function GenHTML(NumRows, NumCols) {
    var LRows = []
    for (var x=0; x<NumRows; x++) {
        var LCols = []
        for (var y=0; y<NumCols; y++) {
            var HTML = '<div class="square"></div>'
            LCols.push(HTML)}

        LRows.push('<div class="row">'+ LCols.join('') +'</div>')}
    return LRows.join('')}

function SetHTML(NumRows, NumCols) {
    document.getElementById('container').innerHTML = GenHTML(NumRows, NumCols)}
于 2010-04-06T09:31:01.743 に答える