终极Tac趾板视图

Question

我已经为终极Tic脚趾(那是什么？)拼凑了一块板.这是当前代码挑战：编码一个终极的Tic-Tac-脚趾的一部分。

资源：

• 现场演示我的观点 -让你看看我在那里做了什么
• 西蒙的工作实现 -为了说明这将是一个功能游戏

问题：

• 你对标记有什么想法？过度杀人？刚刚好吗？
• 在CSS方面你会改进什么？特别是在绝对维度和边界的方向上。

HTML:

<div class="game">
    <div class="area area-0-0">
        <div class="tile tile-0-0">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-1-0">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-2-0">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-0-1">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-1-1">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-2-1">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-0-2">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-1-2">
            <button type="button" class="tile-button"></button>
        </div>
        <div class="tile tile-2-2">
            <button type="button" class="tile-button"></button>
        </div>
    </div>
    <div class="area area-1-0">
        <!-- 9 tiles -->
    </div>
    <div class="area area-2-0">
        <!-- 9 tiles -->
    </div>
    <div class="area area-0-1">
        <!-- 9 tiles -->
    </div>
    <div class="area area-1-1">
        <!-- 9 tiles -->
    </div>
    <div class="area area-2-1">
        <!-- 9 tiles -->
    </div>
    <div class="area area-0-2">
        <!-- 9 tiles -->
    </div>
    <div class="area area-1-2">
        <!-- 9 tiles -->
    </div>
    <div class="area area-2-2">
        <!-- 9 tiles -->
    </div>
</div>

CSS:

*, *:before, *:after {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

body {
    margin: 0;
}



/*
 *  GAME
 *  Board size is calculated as follows:
 *
 *  .game = .area * 3
 *  459px = 153px * 3
 *
 *  .area = padding-left + .tile * 3 + padding-right + border
 *  153px = 3px          + 48px  * 3 + 3px           + 3px
 *
 *  .tile = padding-left + .width    + padding-right
 *   48px = 3px          + 42px      + 3px
 */
.game {
    width: 459px;
    margin-top: 50px;
    margin-right: auto;
    margin-left: auto;
}

/* Clearfixing .game */
.game:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 500px) {
    .game {
        width: 315px;
    }
}



/*
 *  AREA
 */
.area {
    float: left;
    width: 153px;
    padding: 3px;
}

.area:nth-child(3n-1),
.area:nth-child(3n-0) {
    border-left: 3px solid #444;
}

.area:nth-child(4),
.area:nth-child(5),
.area:nth-child(6),
.area:nth-child(7),
.area:nth-child(8),
.area:nth-child(9) {
    border-top: 3px solid #444;
}

/* Clearfixing .area */
.area:after {
    content: "";
    display: table;
    clear: both;
}

@media screen and (max-width: 500px) {
    .area {
        width: 105px;
    }
}



/*
 *  TILE
 */
.tile {
    float: left;
    padding: 3px;
}



/*
 *  BUTTONS
 */
.tile-button {
    width: 42px;
    height: 42px;
    padding: 0;
    cursor: pointer;
    vertical-align: middle;

    border: 1px solid gray;
    border-radius: 3px;
    background-color: greenYellow;
}

@media screen and (max-width: 500px) {
    .tile-button {
        width: 26px;
        height: 26px;
    }
}

.tile-button:hover,
.tile-button:focus {
    border-color: #444;
    background-color: yellowGreen;
}

Answer 1

看起来不错。我喜欢它适应更小的窗户的方式。

我不知道为什么(除了作为造型的前奏)每个按钮周围都有一个div，也许这个按钮就行了。

而不是使用div，而是可能/适当地使用表。

您还没有演示(尽管Simon的游戏确实演示了)如何用O或X标记已玩过的按钮，也没有演示如何在获胜的游戏中划出一条线。如果X和O是不同的颜色(例如，蓝色和红色以反映您为赢得游戏而选择的颜色)，我会发现更容易一些；而且我不喜欢在您的font-size: small中使用的clean.css。

要在赢得的游戏中画一条(水平、垂直或对角线)线，可以使按钮半透明，这样这条线就可以成为CSS背景。

当一个象限是不可玩的(因为对手在其他地方玩)，你还打算在那个象限里画按钮，还是其他什么东西？

你需要做什么来调整‘视网膜’(双密度像素)显示器上的表观尺寸吗？

每个按钮是否需要一个name属性，它们是否应该嵌入到一个表单中？还是会添加javascript？

也许让索引1为基础(1到9)而不是0 (0到8).你有没有想过可达性 (例如有人使用屏幕阅读器)？

也许可以提供JSON和HTML中的游戏状态，这样正在玩游戏的机器人(例如，Greasemonkey脚本)不需要刮掉HTML就可以发现游戏状态。

为什么要使用px而不是em或%来指定CSS维度？

Answer 2

我在这里看到的一件绝对不必要的事情是使用按钮元素。如果您正确地使用事件委托(通过查看功能版本，因为它是模糊的)，您应该只需要一个附加到游戏板上的事件处理程序。只需检查事件的目标元素是否为tile，并根据需要对瓷砖的属性或子节点进行调整。

游戏板是一个领域，我认为它是适当的使用表，即使它的感觉，你会使用他们的布局。如果你考虑像国际象棋这样的游戏，所有的瓷砖都是命名的(A1-H8)。使用表格实际上可以简化一些CSS，因为您可以使用像border-spacing: 5px这样的属性来获得各个板块之间的良好缺口。

您为瓷砖类名选择的命名约定使我相信您正在使用JavaScript来解析它们的位置。我建议使用data-*属性来代替：

<div class="tile" data-row="1" data-col="1"></div>
<div class="tile" data-row="1" data-col="2"></div>

下面是一个演示，演示了一些关于纸牌游戏的想法(交互是存在的，但游戏不是)：http://codepen.io/cimmanon/pen/lKgpJ

Answer 3

你可以简化这个

.area:nth-child(4),
.area:nth-child(5),
.area:nth-child(6),
.area:nth-child(7),
.area:nth-child(8),
.area:nth-child(9) {
    border-top: 3px solid #444;
}

至

.area:nth-child(n + 4) {
    border-top: 3px solid #444;
}

由于您正在根据游戏计算维度，以及稍后设置媒体查询，这将使设置更容易。

area {
    width: 33%;
}

and 

tile {
    width: 28%;
    padding 2%;
} 

或者这条线上的什么东西。然后，您不需要担心查询同步。