Question

我想创建一个像reversi这样的基于网络的棋盘游戏。之前我在python中创建了一个类似的游戏，但现在我想尝试使用javascript / jquery / html / css来实现它。

我想知道的主要问题是如何在浏览器中设置棋盘游戏的GUI？我有两个想法。一，创建一个包含64个单元格的html表结构。其次，创建64个浮动div。

我意识到，对于网站的布局，表格在浏览器中是不可靠和不一致的，但在像这样的游戏的情况下，表格设置是否更容易使用？

Answer 1

对于像reversi这样的东西，我觉得桌子是合适的 - 除了视觉效果之外，它是内容的一个不错的语义表示，即游戏板的状态。（<div> s不会执行相同的工作，因为它们不代表行和列之间的关系。）

我希望一个表和<div>一样容易使用：可能稍微容易一点，因为你不必编写任何CSS来获得二维布局，尽管你可能有使用稍多的代码来生成HTML，具体取决于您如何在代码中建模游戏。（例如，如果您已经将游戏建模为行内的单元格，则很容易。如果没有，则在生成HTML时，您必须在代码中跟踪该内容。）

Answer 2

我会选择桌子上的div。主要是因为当您操作表元素时，浏览器性能会受到影响（在某些浏览器上，比如旧版本的IE）。此外，使用div将为您提供更多的布局和样式可能性。生成基于“div”的板更容易，因为您不必担心插入tr。

除此之外，你要走哪条路并不重要

Answer 3

我会使用div，因为它们似乎更适合我，但你可能会发现jQuery非常灵活，如果你使用了表格就没那么重要了。

想象一下你的网格结构：

<div id="#grid">
    <div class="row1 column1"></div>
    <div class="row1 column2"></div>
    <div class="row1 column3"></div>
    ... (and so on) ...
</div>

然后可以使用jQuery选择单元格，如：

$(".row1 .column2").css("background-color","#ccc")

CSS可能如下所示：

    #grid div{
       display:inline;
       float:left;
       height:100px;
       width:100px;
       ... and so on ...
    }

Answer 4

简单的决定，如果布局是表格，那么使用表格。没有绝对坚持不使用表格。仅仅因为它们过去曾被过度使用并不意味着今天没有好的，合理的用途。

浮点数可以模仿表格，但不能很好地处理溢出条件。表将自动回流以容纳其单元格的内容。如果溢出不是问题，那么一定要考虑浮点数。

Answer 5

您可以根据用户屏幕的可用尺寸等采用数学方法。我将基于基本除法创建一个js对象，并将这些块分配为具有适当偏移的位置绝对元素。对于像reversi这样的游戏来说尤其容易，因为你已经使用了jQuery库，因此处理游戏块位置的初始计算和重写应该不是问题。

所以我会有一个div（'#container'）的宽度：100％;高度：100％;或者什么是逻辑游戏板然后将$（'＃container'）。width（）和$（'＃container'）。height（）除以适用的tile并映射出一个js对象来创建数据网格以及每个单元格的预期宽度和高度。
然后在记录x和y的容器元素上附加一个单击监听器，并将其与初始加载的委员会除法结果交叉引用。
然后定义初始部分的起始坐标（如果有），并绘制它们。

我知道，这是模糊的，但总的想法是根本消除网格的字面概念，并将整个事物想象成一张空纸，里面有浮动框。

对不起，我很抱歉。我想最终的结果是建议使用div。由于您的董事会是固定比例，因此没有理由将其视为表格。

Answer 6

我从早先的评论中改变了主意。

将<div>与有意义的类名一起使用，并根据需要使用CSS display属性，使用table，table-row和table-cell <的值/ p>

整个电路板为display: table，每行display: table-row，每个空间display: table-cell

在http://jsfiddle.net/XyK7s/

看到我的例子

您将如何为基于Web的棋盘游戏结构设置GUI？

6 个答案: