专栏首页鱼头的Web海洋二营长,快掏个CSS出来给我画个井字棋游戏

二营长,快掏个CSS出来给我画个井字棋游戏

•作者:陈大鱼头•github: KRISACHAN[1]

前言

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

它长这样:

(我赢了,快夸我 ~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;
        background: #131824;
        color: #eef7f2;
        border-radius: 5px;
        margin-top: 10px;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.25s;
    }
    #switch ~ #computer {
        display: none;
    }
    #switch:checked ~ #computer {
        display: block;
    }
</style>
checkbox: <input type="checkbox" id="switch" />
<label for="switch" class="switch"></label>
<div id="computer" class="computer">电脑走!</div>

选择完之后呢?

我们再回过头来看图1,选择先手的功能是以弹窗的形式出现的,就是为了确保选择先手之前不污染棋盘。所以这该怎么做呢?

通过上面的DEMO,我们发现有个:checked选择器,这个选择器任何可选元素的选中状态,例如<input type="radio"><input type="checkbox">以及<option>

所以我们有以下效果:

代码如下:

<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;
    }
    .btn {
        width: auto;
        display: inline-block;
        background: #131824;
        color: #eef7f2;
        border-radius: 5px;
        margin-top: 10px;
        padding: 5px;
        box-sizing: border-box;
        cursor: pointer;
        transition: all 0.25s;
    }
    #switch ~ #computer {
        display: none;
    }
    #switch:checked ~ #computer {
        display: inline-block;
    }
    #start:checked ~ .container {
        display: none;
    }
</style>
<input type="radio" id="start" />
checkbox: <input type="checkbox" id="switch" />
<div class="container">
    <br />
    <label for="switch" class="switch"></label>
    <br />
    <br />
    <label for="start" class="btn">皮皮虾,我们走</label>
</div>
<div id="computer" class="btn">电脑走!</div>

来画棋盘啦

接下来我们就是画棋盘,其实棋盘是个比较常规的九宫格,可以实现的方式有很多,不过这次鱼头要安利个grid布局在线生成的网站:http://grid.malven.co/

图一的DEMO布局就是用这个工具生成的,非常方便~

棋盘画好了,棋子呢?

好了,我们棋盘已经画好,那么棋子呢?

嗯,可以去文具店花15块钱买一盒黑白棋,然后就可以下了,好了,本文完结。

大雾啊~

有了棋盘我们就应该画棋子了,棋子该怎么画呢?

其实怎么画都不要紧,重要的是得保证每个格子都能下两方的棋子。

在我们画棋子之前我们先谈谈<input />的状态管理。

作为可替换元素的<input />,可真是个神器,因为有它以及后续浏览器对它功能的不断完善,所以也是变得越来越强大。

根据我们以往的开发经验以及上文的描述,我们很容易就能联系到两个存储正负状态的属性<input type="radio"><input type="checkbox">

以上两个不同属性的<input />都能存储选择状态。

唯一不同的是<input type="radio">选择状态本身是单向不可逆的,只有通过所关联的<input type="radio">才可以进行切换。

<input type="checkbox">则是双向可逆的,状态改变只在当前标签就可以完成。效果如下:

那么我们回到井字棋来。

我们棋盘的每个格子会有三种状态,一个是初始时,一个是我方落子,另一个是电脑落子。

如果以数字来表示,则有:

状态码

含义

00

无子

01

我方落子

10

电脑落子

结合上面的信息,我们不难选出<input type="radio">来画棋子,所以我们有:

所以思路就是每个格子放两个<input type="radio">,通过选择的一个标签来确定棋子内渲染的样式。棋子样式可以随自己美化,根据需求我们来画<label>就行。

所以我们棋盘的HTML就如下:

<form id="container" class="container">
    <input type="radio" name="c-radio-0" id="c-radio-0-X" />
    <input type="radio" name="c-radio-0" id="c-radio-0-O" />

    ......

    <div id="c-board" class="c-center">
        <div class="c-grid" id="c-grid-0">
            <label for="c-radio-0-X"></label>
            <div></div>
        </div>
        ......
    </div>
    <div id="c-computer" class="c-btn">
        电脑走!
        <label for="c-radio-0-O"></label>
        ......
    </div>

基本的棋盘布局就这么完成了,接下来就是下手规则的处理了。

来啦,互相伤害啊

那么下面我们就一步一步的解析落子程序。

首先我们来康康工具人标签:

<div class="c-grid" id="c-grid-0">
    <label for="c-radio-0-X"></label>
    <div></div>
</div>

通过上面我们不难知道<label for="c-radio-0-X"></label>就是落子标签,那么这个<div></div>是干啥的呢?

你可别看这个标签都没有,像个一无所有的舔狗一样,但是需要用到它的时候,它可以马上变成一个非常有用的工具人。

这个标签的作用就是用来承载落子的标记。

比如我们定义己方标签的id规则是input[id*='-编号-X'],电脑方是input[id*='-编号-0'],那么我们就可以通过 ~ 选择器来确定这个工具人渲染的样式,例如:

input[id*='-0-X']:checked~#c-board #c-grid-0 div::before {
    content: 'X';
    background: var(--color1);
    color: var(--color3);
}

input[id*='-0-O']:checked~#c-board #c-grid-0 div::before {
    content: 'O';
    background: var(--color2);
    color: var(--color3);
}

来到这里要格外提一点,每一个格子的input[id]都是 OX 两个的存在,而不是同一个的原因就是为了保证状态不可逆,当 checked 之后就不让它复原。

对,就是这样。

我们确定了落子的渲染方式,接下来就是确定如何落子了。

我们知道,一个格子里可以渲染input[id*='-0-X']以及input[id*='-0-O'],我们也可以通过点击来确定渲染哪一个,可是我们如何确定点击的是哪个呢?

我们先来捋捋思路。

首先我方下棋,这没什么问题,就跟小X王学习机一样,哪里不懂点哪里就可以,so easy~

但是电脑方是由电脑控制,在本DEMO里,需要通过点击下方的“电脑走”按钮,来让它自动落子,所以最开始需要让它隐藏起来。

#c-computer { display: none; }

还有就是我方落完子之后,这个按钮需要出现,按了之后需要隐藏,所以我们只需要交替让它显示就可以,也就是这样:

#c-computer,
input:checked~input:checked~#c-computer,
input:checked~input:checked~input:checked~input:checked~#c-computer,
input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~#c-computer,
input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~#c-computer {
    display: none;
}

input:checked~#c-computer,
input:checked~input:checked~input:checked~#c-computer,
input:checked~input:checked~input:checked~input:checked~input:checked~#c-computer,
input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~#c-computer {
    display: block;
}

这里的意思就是我第一个:checked<input />后面的按钮要display: block,再来一个则要display: none起来,如此一个接着一个,一个接着一个,一个接着一个。。

电脑方落子位置

我方落子位置可以通过我们主动点击确定,那么电脑方呢?

毕竟是电脑,要是落子位置还要我们确定,那就尴大尬了。

首先我们来看下电脑方相关的HTML结构。

<div id="c-computer" class="c-btn">
    电脑走!
    <label for="c-radio-0-O"></label>
    <label for="c-radio-1-O"></label>
    <label for="c-radio-2-O"></label>
    <label for="c-radio-3-O"></label>
    <label for="c-radio-4-O"></label>
    <label for="c-radio-5-O"></label>
    <label for="c-radio-6-O"></label>
    <label for="c-radio-7-O"></label>
    <label for="c-radio-8-O"></label>
</div>

通过上面,我们可以发现,当我们点 “电脑走” 按钮时,实际上是点label[for$='-O']

但是label的层级结构也是确定的,那么不就很容易跟label[for$='-X']的位置冲突了吗?

既然我们这里提到了 “层级” ,那么我们不难想到,可以通过z-index来确定点击的是哪个label

我们看实操栗子。

所以我们就可以控制每次电脑落子的位置。

怎么确定呢?

我们可以根据“ 玩家 ”的落子位置来确定。

比如玩家在“ 0号位置 ”已经有个:checked,那么我们就可以按照我们的想法来确定“ 电脑 ”的落子位置,以此类推。

例如这样:

#c-radio-0-X:checked~#c-radio-4-X:checked~#c-radio-8-O:checked~#c-computer label[for='c-radio-2-O'],
...... {
    z-index: 2;
}

#c-radio-0-O:not(:checked)~#c-radio-2-O:not(:checked)~#c-radio-4-X:checked~#c-radio-6-O:not(:checked)~#c-radio-8-O:not(:checked)~#c-computer label[for='c-radio-0-O'],
...... {
    z-index: 2;
}

输赢判断

好了,终于到了我们最后一个环节了,就是如何判断输赢。

这部分就是通过双方落子位置来确定。

众所周知,我们有以下几种赢法:

以字母“ X ”代表赢的规则:

<!--
XXX  OOO  OOO  XOO  OXO  OOX  XOO  OOX
OOO  XXX  OOO  XOO  OXO  OOX  OXO  OXO
OOO  OOO  xxx  XOO  OXO  OOX  OOX  XOO
-->

应该没有漏吧,就是以上几种,所以我们只需要判断双方的落子是否满足以上的规则即可,所以我们有:

#c-radio-0-X:checked~#c-radio-1-X:checked~#c-radio-2-X:checked~#c-result #c-info::before,
#c-radio-3-X:checked~#c-radio-4-X:checked~#c-radio-5-X:checked~#c-result #c-info::before,
#c-radio-6-X:checked~#c-radio-7-X:checked~#c-radio-8-X:checked~#c-result #c-info::before,
#c-radio-0-X:checked~#c-radio-3-X:checked~#c-radio-6-X:checked~#c-result #c-info::before,
#c-radio-1-X:checked~#c-radio-4-X:checked~#c-radio-7-X:checked~#c-result #c-info::before,
#c-radio-2-X:checked~#c-radio-5-X:checked~#c-radio-8-X:checked~#c-result #c-info::before,
#c-radio-0-X:checked~#c-radio-4-X:checked~#c-radio-8-X:checked~#c-result #c-info::before,
#c-radio-2-X:checked~#c-radio-4-X:checked~#c-radio-6-X:checked~#c-result #c-info::before {
    content: '恭喜你赢了~';
}

#c-radio-0-O:checked~#c-radio-1-O:checked~#c-radio-2-O:checked~#c-result #c-info::before,
#c-radio-3-O:checked~#c-radio-4-O:checked~#c-radio-5-O:checked~#c-result #c-info::before,
#c-radio-6-O:checked~#c-radio-7-O:checked~#c-radio-8-O:checked~#c-result #c-info::before,
#c-radio-0-O:checked~#c-radio-3-O:checked~#c-radio-6-O:checked~#c-result #c-info::before,
#c-radio-1-O:checked~#c-radio-4-O:checked~#c-radio-7-O:checked~#c-result #c-info::before,
#c-radio-2-O:checked~#c-radio-5-O:checked~#c-radio-8-O:checked~#c-result #c-info::before,
#c-radio-0-O:checked~#c-radio-4-O:checked~#c-radio-8-O:checked~#c-result #c-info::before,
#c-radio-2-O:checked~#c-radio-4-O:checked~#c-radio-6-O:checked~#c-result #c-info::before {
    content: '可惜你输了~';
}

(吃瓜群众:“完美个头,要是没输没赢呢?”)

要是没输没赢,没输没赢,没输没赢,该怎么办呢?没办法了,用JS吧。。。

对不起,我错了,这个功能只需要给这个提示标签一个默认文本即可。

当然我们得写个让提示弹窗出现的逻辑。

input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~input:checked~#c-result,
...... {
    display: block;
}

就是全部空格都:checked以及几个关键空格占满的时候,就让它展示。

初始化

如果我们想玩下一盘该怎么办?

刷新页面啊!!!

(吃瓜群众:“就这?”)

当然不是就这啊,接下来要给大家介绍最后一个姿势:<input type="reset">

<input type="reset">呈按钮状,可以一键初始化表单内所有的<input />,就像这样

一键初始化,非常方便~

结语

<input />是一个非常有用且有趣的可替换标签,业界中大部分的纯CSS游戏差不多都是用它来完成的,虽然不是特别实用,但是结合选择器,是可以帮助我们在业务中解决很多问题的。

参考资料

1.纯 CSS 井字棋:并不神秘的 CSS AI 编程之旅[2]

后记

如果你、喜欢探讨技术,或者对本文有任何的意见或建议,你可以扫描下方二维码,关注微信公众号“ 鱼头的Web海洋 ”,随时与鱼头互动。欢迎!衷心希望可以遇见你。

References

[1] KRISACHAN: https://github.com/KRISACHAN [2] 纯 CSS 井字棋:并不神秘的 CSS AI 编程之旅: https://www.ibm.com/developerworks/cn/web/wa-css-ai-coding-tic-tac-toe-game/index.html

本文分享自微信公众号 - 鱼头的Web海洋(krissarea),作者:陈大鱼头

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 从ES6到ES10的新特性万字大总结(不得不收藏)

    ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)在标准ECMA-262中定义的脚本语言规范。这种语言在万维网上应用广泛,它往往被称为Jav...

    陈大鱼头
  • 【适合收藏】为了多点时间陪女朋友,我向BAT大佬跪求了这15条JS技巧

    为了减少加班,从而挤出更多的时间来陪女朋友,我就厚着脸皮向一些BAT大佬求来了这15条JS技巧,现在分享给大家,千万别错过。

    陈大鱼头
  • 面试官:你可以用纯 CSS 判断鼠标进入的方向吗?

    在之前某一个前端技术群里,有一个群友说他面试的时候遇到了一个问题,就是面试官让他用纯 CSS 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。

    陈大鱼头
  • HTML5视频和Canvas

    本文是来自SFVideo Technology 2019年7月的演讲,演讲者是Matt McClure,演讲题目是"HavingFun with HTML5 V...

    用户1324186
  • Python爬虫基础:验证码的爬取和识别详解

    今天要给大家介绍的是验证码的爬取和识别,不过只涉及到最简单的图形验证码,也是现在比较常见的一种类型。

    Python中文社区
  • python: input()、raw_input() 探究

    JNingWei
  • Python爬虫基础教程:验证码的爬取和识别详解

    Python现在非常火,语法简单而且功能强大,很多同学都想学Python!所以小的给各位看官们准备了高价值Python学习视频教程及相关电子版书籍,欢迎前来领取...

    python学习教程
  • 这10篇文章只改了下标题,阅读量就从1万+涨到10万+!

    腾讯官方曾给出过一个数据——微信公众号有80%的流量,来自朋友圈。虽然不知道现在这个比例如何,但可以肯定的是,如果你的文章在朋友圈不引人瞩目,那基本就告别传播了...

    曾响铃
  • 丝绸之路(Silk Road)沉浮录:你不知道的那一面(上)

    一提到丝绸之路(Silk Road),所有人第一反应就是:啊,就是那个卖毒品的地下黑市。对,今天要说的就是那个买卖毒品的地下黑市,经历两次复辟,最终还是无力回天...

    FB客服
  • FPGA/ASIC初学者应该学习Verilog还是VHDL?

    对于FPGA或者ASIC的初学者来说,选择哪种语言貌似应该根据自身的需求而定,例如实验室项目需要使用哪种语言,或者实验室师兄师姐使用了哪种语言,或者导师推荐你学...

    Reborn Lee

扫码关注云+社区

领取腾讯云代金券