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 中的 click 事件处理它们（最好使用 JQuery 之类的东西）应该会大大减少文件大小。

于 2010-04-06T08:17:42.137 回答
3

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

于 2010-04-06T08:24:41.160 回答
1

我的建议是将图块绝对定位在板内，以节省浏览器的 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;。
那，或者大卫 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
  });
});
于 2010-04-06T10:09:47.153 回答
0

您可以使用 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)}
于 2010-04-06T09:31:01.743 回答
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 回答