制作一个巨大的象棋一样的网格最轻的方法是啥？

Posted 2023-03-07

【中文标题】制作一个巨大的象棋一样的网格最轻的方法是啥？

【英文标题】：What is the lightest way to make a huge chess-like grid?制作一个巨大的象棋一样的网格最轻的方法是什么？

【发布时间】：2010-04-03 15:46:46

【问题描述】：

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

现在，作为一个示例，我将向您展示：

-链接不再活跃，它基本上是一个25x25的表格+tr+td网格-

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

那么，带有 td 的桌子是制作巨大网格状板的最轻量级的方法，还是有更轻的东西推荐？

干杯 索特克拉

【问题讨论】：

你说的轻量级是什么意思？有些人将您的问题解释为从服务器发送到浏览器的 html 的性能优化。但我认为浏览器中的 DOM 大小也可能是一个问题，这可能是无关的。

双向：调度时服务器上的“负担”和加载html时用户计算机上的“负担”。

【参考方案1】：

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

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

【讨论】：

我做了一些测试，哇。布局设置为固定的加载时间非常快。我也会尝试所有其他建议。恐怕我只能“批准”一个答案。谢谢大家！

【参考方案2】：

您可以尝试摆脱表格，而不是使用 CSS position: relative;顶部：20px； left: 20px 等并绘制一个重复的背景网格。

【讨论】：

是的，但是请记住，无论有桌还是没有桌，我们仍然有很多单独的作品。例如，想象一下 400x400。上次我尝试使用表格时，我的浏览器在加载时冻结了 20 秒。我想知道是否使用单独的“片段”，无论是 div 还是 span 或其他任何会真正减少文件大小/负载的东西。

想一想，他需要有触发器来选择每个方格。

【参考方案3】：

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

【参考方案4】：

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

【参考方案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
  );
);

【参考方案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>

记住使用带有有效文档类型http://htmlhelp.com/tools/validator/doctype.html 的IE 或在怪癖模式下使用盒子模型黑客[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)

【参考方案7】：

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

<img src="planets.gif"    usemap="#planetmap" />

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

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