Question

我正在开发一款浏览器游戏，我不禁想知道制作游戏的网格/棋盘最轻的方法是什么。

现在，作为一个示例，我会告诉你：

-link不再有效，它基本上是25x25表+ tr + td网格 -

现在，随着网格变得越来越大，表格和它的td会创建一个非常繁重的文件页面，反过来......从浏览器引擎和计算机中吸收更多资源。

那么，用td制作一个巨大的网格状电路板的最轻量级的方法还是你推荐的更轻的方法？

干杯 Sotkra

Answer 1

计算表格布局对于浏览器来说是very complex work，因为它必须知道最后一个单元格的尺寸才能计算每列的确切宽度。因此，如果您使用表格，请尽早添加table-layout:fixed。

浮动框或相对定位的渲染速度可能更快。

Answer 2

你可以尝试摆脱桌子，而不是用CSS定位棋子{position：relative;上：20px; left：20px}等，并绘制一个重复的背景网格。

Answer 3

删除链接并通过Javascript中的click事件处理它们（最好使用JQuery之类的东西）应该减少文件大小。

Answer 4

您可以使用JavaScript来操作DOM来构建表。如果网格的内容非常规则，那么执行该操作的代码将比400x400倍<td></td>加上标记小得多。当然，性能取决于JavaScript引擎。但如果这不完全糟糕，它甚至可能比解析所有HTML更快，与网络传输时间无关。

Answer 5

我的建议是将瓷砖绝对放在电路板内，以便通过浏览器节省HTML（传输时间）和位置计算（加载时间）。 JS注册点击并处理它（减少HTML =减少传输和加载时间）。

所以，你可以拥有这个基础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;
}

然后生成如下的html：

<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>

其中每个图块的位置为left: [X*TileWidth]px; top: [Y*TileHeight]px; 那，或David M的建议。

如果您缩小页面大小，也可以减少页面加载时间 - 因此，如同建议的那样，使用JQuery或其他JavaScript框架为每个div点击创建触发器将是理想的即可。
我不是很精明，但使用JQuery会是这样的：

$(document).ready(function() {
  $(".tile").click(function() {
    // find out which square was clicked, and perhaps redirect to a page with get variables
  });
});

Answer 6

您可以使用CSS浮点数构建它，例如，如果正方形是20x20px：

<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>

请记住将IE与有效的doctype http://htmlhelp.com/tools/validator/doctype.html一起使用，或者在怪癖模式下使用盒子模型[http://tantek.com/CSS/Examples/boxmodelhack.html]。

如果使用ID而不是类并在CSS中使用单个字母，则可能会使上述内容占用更少。

最快的通常依赖于浏览器，例如如果IE在表格上表现更好，我会不会感到惊讶，而其他浏览器在相对DIV /浮点数方面表现更好。

（我没有测试过上述内容，但类似的东西应该有用。）

然后，您可以将上述内容转换为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)}

Answer 7

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>

如果您使用图像映射为方格板生成触发器，您只需要重复的背景和填充总数和高度的透明图像。

制作巨大的象棋网格最轻的方法是什么？

7 个答案: