面试官：你用纯CSS来写个游戏吗？

• 作者：陈大鱼头
• github： KRISACHAN

前言

不知道大家小时候有没有玩过一款游戏叫『井字棋』的。

它长这样：

（我赢了，快夸我 ~o(´^｀)o）

上面的就是本次文章的最终结果，一个用纯CSS实现的AI井字棋游戏，Mmmm，虽然看起来有点蠢。。。

地址在此：

https://codepen.io/krischan77/pen/qBdYZLy

游戏的规则比较简单，就是在一个九宫格（据说十六宫格，二十五宫格也行~反正是格子就行），只要你下的棋能连成一条直线，就算赢。

所以这次鱼头就来教大家怎样才能在这个游戏中获胜。

额，不对，大雾呀~

是怎样通过纯CSS来实现上面这个游戏~

正文

先手选择

通过开头的GIF图，我们可以看到其实这个游戏是有先手选择的。

我们可以选择是玩家先下，还是电脑先下。

那么如果通过单纯的HTML标签 + CSS属性，该如何完成呢？

首先我们转换下思路，先手选择不是“我方”跟“电脑方”的选择，而是“选择我”以及“不选择我”之间两种状态的切换，那么基于这个原理，我们就很快可以联想到<input type="checkbox"/>

有以下的效果：

但这里还有一个问题，就是虽然我们实现了双向选择的效果，但是开头的GIF图里先手选择是一个好看的switch，明显<input type="checkbox"/>无法实现这个功能，那怎么呢？

嗯，所以我们还是用JS模拟吧！

（吃瓜群众：说好的CSS呢？给我打）

对不起，我们可以用<label>标签来模拟。

<label>标签可以通过for="#hash"来跟<input id="#hash">来进行关联，所以我们有以下效果：

源码如下：

<style>
    .switch {
    
        display: inline-block;
        width: 48px;
        height: 24px;
        background: #c4d7d6;
        vertical-align: bottom;
        margin: 0 10px;
        border-radius: 16px;
        position: relative;
        cursor: pointer;
    }
    .switch::before {
    
        content: '';
        position: absolute;
        display: block;
        width: 16px;
        height: 16px;
        top: 4px;
        left: 4px;
        background: #2e317c;
        border-radius: 100%;
        transition: all 0.25s;
    }
    #switch:checked ~ label[for='switch']::before {
    
        left: 28px;
        background: #863020;
    }
</style>
checkbox: <input type="checkbox" id="switch" />
<label for="switch" class="switch"></label>

然后我们再观察图1，可以发现，当我们选择时，是可以控制“电脑走”的按钮的。

那么这个又该怎么实现呢？

CSS实现不了，我们用JS吧。

（吃瓜群众：？？？？？？）

秋，秋，秋得嘛跌。CSS也可以实现！

我们看到上面的源码中有**~**这个选择器。

这玩意叫做“兄弟选择器”，可以选择同层级顺序排后的兄弟节点，而且不管距离由多远，总是心连心~。

例如有以下HTML结构：

<span>This is not red.</span>
<p>Here is a paragraph.</p>
<code>Here is some code.</code>
<span>And here is a span.</span>

以下CSS：

p ~ span {
   
  color: red;
}

这样一样可以选中<code>后面的<span>。

所以我们有：

代码如下：

<style>
    #computer {
    
        width: 100px;
        display: inline-block;