Javascript 如何为基于web的棋盘游戏结构设置GUI？

我想创建一个基于网络的棋盘游戏，比如reversi。我以前用python创建过一个类似的游戏，但现在我想尝试使用javascript/jquery/html/css实现它

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

---

我意识到对于一个网站的布局来说，表格是不可靠的，并且在不同的浏览器中不一致，但是在这样的游戏中，表格设置会更容易使用吗？

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

---

除此之外，您选择哪种方式并不重要，我会使用div，因为我觉得它们更整洁，但您可能会发现jQuery非常灵活，如果您使用了表，也不会太重要

想象您的网格结构如下：

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

CSS可能看起来像：

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

---

对于像reversi这样的东西，我认为表格是合适的——除了视觉效果之外，它是内容的一种体面的语义表示，即游戏板的状态。（

s不会执行相同的作业，因为它们不表示行和列之间的关系。）

---

我希望一个表和

s一样容易使用：可能稍微容易一点，因为你不必编写任何CSS来获得二维布局，尽管你可能需要使用稍微多一些的代码来生成HTML，这取决于你是如何用代码对游戏建模的。（例如，如果您已经将游戏建模为行中的单元格，则很容易。如果没有，则在生成HTML时必须在代码中跟踪该单元格。）

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

---

浮动可以模拟表，但不能很好地处理溢出情况。表格将自动回流以容纳其单元格的内容。如果溢出不是问题，那么无论如何都要考虑浮点。

< P>你可以根据用户屏幕的可用维度来使用数学方法。我将基于基本分割创建一个js对象，并将片段指定为具有适当偏移量的绝对位置元素。这对于像reversi这样的游戏来说尤其容易，因为您已经在使用jQuery库了，所以处理游戏块位置的初始计算和重写应该不会有问题

所以我有一个div（“#container”），它的宽度是100%；身高：100%；或者任何逻辑游戏板。
然后将$（'#container'）.width（）和$（'#container'）.height（）除以适用的分幅，并映射出一个js对象以创建数据网格以及每个单元格的预期宽度和高度。
然后在记录x和y的容器元素上附加一个click listener，并将其与初始加载的board division结果交叉引用。
然后定义初始工件的起始坐标（如果有），并绘制它们。

我知道这很模糊，但总体思路是完全消除网格的字面概念，把整个东西想象成一张空空的纸，里面有浮动的盒子

---

对不起，我的回答太冗长了。我想我的最终结果是建议使用div。既然你的董事会是一个固定的比例，就没有理由再把它当作表格了。

我改变了我先前的看法

对有意义的类名使用

，并根据需要使用CSS

display

属性，使用

table

、

table row

和

table cell

整个电路板将是

显示：表格

，每行

显示：表格行

，每个空间

显示：表格单元格

---

请参见我的示例fiddle at

“表格不可靠且跨浏览器不一致”False。表格是最一致的。这就是说，我不认为你的数据是“表格”数据，所以从语义上说，我不建议使用

@Ktash，我同意你的意见，除了OP说的网站布局。@AndrewBarber哈哈，我不确定你不同意lol的哪一部分。但我非常乐意捍卫我的观点。但如果我们这样做，我们可能会转向；）该死！为什么没有一个合适的解决方案？我想说的是内联块，这将是一个现代等效于这样的工作，但有一个空白的问题；当你漂浮的时候，你有一个明确的问题；桌子几乎不可能设计得得体。我希望有人能尽快采取行动，让所有的浏览器都接受它。@Paul-是的，独立运动。通过这种方式，他可以毫不费力地为网格之间的移动设置动画，而不用从文字DOM的角度担心任何元素恰好位于何处。我真的不知道reversi涉及到什么样的动画，但是一个有创造力的头脑可以使任何东西都充满活力，而且可以肯定的是，一个稍微有点动画化的游戏比一个只改变背景或将图像弹出到盒子中的游戏给人的印象要深刻得多。就我的2美分，真的吗？您试图在HTML中表示行和列，您要在

和

标记上选择

s？（请注意，

tr

代表“表行”。）不会显示：inline阻止呈现宽度和高度？@Ege:

float:left

胜过

display:inline

。后者是用来修复IE6和IE7中的浮动错误的

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