查看终极井字游戏板

我已经为终极井字游戏拼板了（那是什么？）。这是当前代码挑战的一部分：为最终的井字游戏编写代码

资源：

我的观点的实时演示–供您查看我在那做的事情

Simon的有效实现–为说明这将是一个功能性游戏

问题：

您对标记有何想法？过度杀伤力？正确吗？
您会在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;
}

回顾这一点，我忍不住想起来，这几天用CSS-grid一定可以做到...？

#1 楼

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

我不确定为什么每个按钮周围都有一个div（除了样式方面）。

代替使用divs可能/适当地使用表。

您尚未演示（尽管Simon的游戏演示了）您打算如何用O或X标记播放的按钮；也不知道如何通过赢得比赛来划清界限。如果X和O是不同的颜色（例如蓝色和红色以反映您为获胜游戏选择的颜色），我会发现更容易；而且我不喜欢您的clean.css中使用的font-size: small。

要通过获胜游戏绘制一条（水平，垂直或对角线）线，可以使按钮半透明，以使该线可以是CSS背景。

当一个象限无法显示时（因为对手在其他地方玩过），您是否仍打算在该象限中绘制按钮或其他？

您是否需要做任何事情来调整“视网膜”（双密度像素）显示器上的外观大小？

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

也许使索引从1开始（从1到9），而不是从0开始（从0到8）。您是否考虑过可访问性（例如，使用屏幕阅读器的人）？

也许以JSON和HTML形式提供游戏状态，因此正在玩的机器人（例如，Greasemonkey脚本）不提供此功能。无需刮擦HTML即可发现游戏状态。

为什么要使用px而不是em或％来指定CSS尺寸？

\ $ \ begingroup \ $
我在控制元素（我的版本中为按钮）周围使用了一个额外的div，以更好地控制填充/边距之类的思想。我们在聊天中讨论了表主题。我们只需要表格以简化布局处理。因此，我们想使用div代替。另外，这是一个代码挑战。：p
\ $ \ endgroup \ $
– kleinfreund
2014年2月5日在10:54

\ $ \ begingroup \ $
因为我不是程序员，所以我只是在看Simon的工作游戏。您引用的clean.css是Simon的游戏中生成的某些内容，而不是我的。我也不喜欢我将在聊天中讨论您的问题。我们也同意使用基于0到8的索引来反映逻辑。我希望从1到9。
\ $ \ endgroup \ $
– kleinfreund
2014年2月5日在10:58

\ $ \ begingroup \ $
我喜欢X和O的不同颜色！从技术上讲，按钮不要求名称也不要求特定的CSS类即可使逻辑正常工作，就像我在GWT（Google Web Toolkit）中实现的那样，当动态添加按钮时，GWT保留对按钮的引用。我喜欢JSON的想法！我看不到基于1的良好索引会产生什么？
\ $ \ endgroup \ $
–西蒙·福斯伯格
2014年2月6日17:30

\ $ \ begingroup \ $
@SimonAndréForsberg基于1的方法对于人类读者（如果有的话）而不是浏览器而言可能是一个愚蠢的想法。当它只有0..2时，我可以“可视化”该位置，但使用0..8则更困难。与UI相关的更重要的注释是IMO可能不使用px，而是显示行（也许通过半透明的按钮）。
\ $ \ endgroup \ $
– ChristW
2014年2月7日下午0:39

#2 楼

我在这里看到的绝对没有必要的一件事是使用button元素。如果您正确地使用了事件委托（由于功能版本被混淆，我无法查看功能版本），那么您需要做的就是将一个事件处理程序附加到游戏板上。只需检查一下事件的目标元素是否为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

\ $ \ begingroup \ $
我正在看西蒙的比赛，但不是逻辑。我不是程序员。谢谢你的建议。我会考虑这些。听起来不错。
\ $ \ endgroup \ $
– kleinfreund
2014年2月5日在10:59

\ $ \ begingroup \ $
GWT（Google Web工具包）为我处理了所有JavaScript内容。它将我的Java代码编译为JavaScript。因此，您的JS建议对我无济于事：)我喜欢数据行而不是类名的想法（从技术上讲，我什至不需要所有的类名，因为GWT在它们存在时会自动保留对元素的引用添加）。至于CSS，我让@kleinfreund决定：)
\ $ \ endgroup \ $
–西蒙·福斯伯格
2014年2月6日在17:24

#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%;
}

或该行中的内容。然后，您无需担心同步查询。

\ $ \ begingroup \ $
我正在使用display：inline-block;而不是float：left;在早期版本中，并且在移动设备上计算出的尺寸存在问题。因此，对于第一个工作演示，我坚持使用像素。我将在下一个版本中使用百分比。谢谢。 :)
\ $ \ endgroup \ $
– kleinfreund
2014年2月5日在10:51

\ $ \ begingroup \ $
至于多个.area选择器，我认为这看起来不是很理想，我想我将应用特定的类名，例如has-top-border和has-left-border，并从我的GWT中动态应用它们（Google Web工具包）代码。
\ $ \ endgroup \ $
–西蒙·福斯伯格
2014年2月6日在17:26

编程黑洞网

查看终极井字游戏板

评论

#1 楼

评论

#2 楼

评论

#3 楼

评论