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

Question

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

现在，作为一个简单的示例，我将向您展示以下内容：

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

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

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

干杯 索特克拉

Answer 1

计算表格布局是一项非常复杂的工作浏览器，因为它必须知道最后一个单元格的尺寸才能计算每列的确切宽度。因此，如果您使用表格，请添加 table-布局：早期修复。

浮动框或相对定位可能会渲染得更快。

Answer 2

您可以尝试删除表格，而是使用 CSS {position:relative; 来定位各个部分。顶部：20 像素； left: 20px} 等并绘制重复的背景网格。

Answer 3

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

Answer 4

您可以使用 JavaScript 来操作 DOM 来构建表。如果网格的内容非常规则，则执行此操作的代码将比 400x400 倍 加标记小得多。当然，性能取决于 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;顶部: [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 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>

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