Question

作为学习jQuery的一部分，我决定用JavaScript做一个简单的tic-tac-toe游戏，目前，我正在使用HTML表格来表示间距并在表格中使用图形图像。

图像是小圆圈或大X或O.当用户点击圆圈时，它会变为X或O，然后检查游戏是否已赢得。

Lame，我知道，但这是一次很好的教育经历。

图像大小相同（圆圈有很多空白区域），以确保表格大小不变。

我的问题是双重的。

1 /我应该使用CSS而不是表来进行格式化以及如何做到最好（HTML表格非常简单）？

2 /有没有比使用图像更好的方法，所以我不必事先创建JPG？我尝试使用文字标签（＆lt; a＆gt;），但颜色和下划线的变化使我烦恼？

正如您可能已经知道的那样，我对HTML感到满意，但CSS却不是这样。

Answer 1

继续使用表格进行布局 - tic-tac-toe是一个网格，因此使用网格来包含游戏区域是有意义的。 CSS可用于颜色，字体，边框等。

您可以使用CSS覆盖锚点的颜色和下划线样式，但IMO更容易使用图像。 PNG优于JPEG，因为您可以使PNG图像透明而不会产生伪影。

Answer 2

澄清一点。您写道：“我应该使用CSS而不是表格......”CSS可以应用于所有HTML元素。甚至表格。

在jQuery中使用CSS类可以使您的javascript代码更简单，更易读。

例如：您定义了两个CSS类：“OH”和“EX”。（文本或背景图像可以正常工作。）然后，当单击一个单元格时，添加相应的类。

var ex_or_oh = 'EX'; // 'OH'
$('td.box').click(function() {
  var t = $(this);
  if (t.hasClass('OH') || t.hasClass('EX')) { return; } // spot taken
  t.addClass(ex_or_oh);
  (ex_or_oh == 'EX') ? ex_or_oh = 'OH' : ex_or_oh = 'EX';
});

HTML就像是：

<table><tr>
  <td class="box"></td>
  <td class="box"></td>
  <td class="box"></td></tr>
  ...
</table>

Answer 3

只是为了好玩这里是一个基本的CSS实现：

<!-- your html -->
<div id="board">
  <div class="square" id="topLeft">&nbsp;</div>
  <div class="square" id="topCenter">&nbsp;</div>
  <div class="square" id="topRight">&nbsp;</div>
<!-- 6 more .square divs! -->
</div>

这是你的CSS

#board {
  width: 606px;
  height: 606px;
  border: 1px solid #000000;
}

.square {
  float: left;
  width: 200px;
  height: 200px;
  border: 1px dotted #CCCCCC;
}

边框的额外像素（1px x 2边x每行3个框= 6）

您可以使用以下CSS更改文字装饰：

a:hover, a:active, a:visited {
  text-decoration: none;
  font-color: blue;
}

无论如何我也没有看到它是一个表的任何问题（表格毕竟是表格数据）。我发现有用的CSS参考网站是w3schools

Answer 4

如果你想以任何有意义的方式使用jQuery，你需要学习CSS - CSS选择器是使用库时表达事物的主要方式之一。 jQuery的真正优势之一是它如何轻松地支持关注点分离 - 在HTML中进行语义标记，在CSS中定义外观，然后使用jQuery对行为增强进行分层。

关于细节：

有很多语义上有意义的方法可以标记一个井字棋盘（一张桌子不是其中之一 - 这些行的标题是什么？）。无论您使用哪种方式，都要确保您了解框中的模型以及您需要解决的实现中特定于浏览器的错误。
如果你学习CSS，你可以将O和X作为文本进行设计，然后根据自己的需要设计它们......

Answer 5

您可以使用类似以下内容的表格：

.board {
    border-collapse: collapse;
}
.board td {
    width: 40px;
    height: 40px;
    border: 1px solid #666;
    font-size: 40px;
    line-height: 40px;
    font-family: 'courier new' serif;
    font-weight: bold;
    background-color: #ddf;
    text-align: center;
}

带

<table class="board">

并在每个单元格中填写一个字母（X或O）

您不需要使用链接进行交互。你可以直接在表格单元格上使用onclick事件：

<td onclick="alert(1)">

玩得开心：）

Answer 6

嗯，这是值得的，在HTML tic-tac-toe game我没有使用表格或CSS。我只是将图像放在一起，然后使用＆lt; br /＆gt;来打破这些线条。

Answer 7

最终（当浏览器赶上，特别是使用IE8时），使用<table>和{{1}来获得没有HTML display: table-row;语义的表格式布局的“CSS方式” }。

文章中有一篇很好的文章：Everything you know about CSS is wrong

如何最好地使用jQuery：使用HTML或CSS进行格式化

7 个答案: