以下是复刻的源码：
123 4
56--五子棋游戏--
5152以下是对源码的分析与学习笔记：
五子棋小游戏代码详解：
结构上：
一个h3用来放标题，给了个id同时为了后期就可以更改提示信息放进去。
放一块画布
放三个按钮，分别是重来，悔棋，放弃悔棋。
样式中：
一：box-shadow
Box-shadow值得注意：一个box同时用了两个box-shadow;如下：
box-shadow: -2px -2px 2px #efefef, 5px 5px 5px #b9b9b9;
做一个案例彻底分析下：
box-shadow: -2px -2px 2px #f00, 5px 5px 5px #164A84;
为了看着明白，特地弄了对比明显的颜色。
色值说明：#f00【红色】, #164A84【蓝色】
X，y值得说明：-2px -2px, 5px 5px；【这么写,阴影是在是坐上和右下】
角度和x,y取值的关系表：
x,y的取值
阴影所在的角度
有阴影的两条边是
总结：
+x,+y
右下角
右边和下边
从左上角开始想象：
+x,-y
右边和上边
X负责左右，正右负左；
-x,+y
左下角
左边和下边
Y负责上下，正下负上；
-x,-y
左上角
左边和上边
二、display：flex；
Flex浏览器支持情况很差，仅火狐和谷歌通用。Ie10还不支持，手机上的浏览器全军覆没。
兼容写法：
display：-webkit-flex；
display： -moz-flex；
一个flexbox布局是有一个伸缩容器（flex containers）和这个容器里的伸缩内容（flex items）组成。
伸缩容器（flex containers）是一个HTML标签元素，并且“display”属性显式的设置了“flex”属性值。在伸缩容器中的所有子元素都会自动变成伸缩项目（flex items）。
三、Flex-direction：row（默认值）；
四、Justify-content： center；
注：
本代码纯属学习与练习之用
源代码及博文见掘金地址：https://juejin.im/post/594669d461ff4b006cf132ff
git地址：https://github.com/wj704/wj704.github.io/blob/master/five_game.html
用户评论
终于找到可以学到这种游戏的教程！我一直很喜欢五子棋，从小就和朋友玩，现在自己做一个出来说不定还能分享给朋友们玩!
有8位网友表示赞同！
这篇文章对技术要求比较高吧？我只会基础的HTML, JS这些都不太了解，感觉还是需要慢慢学习学习了
有20位网友表示赞同！
五子棋游戏制作步骤讲解很详细，配图清晰，跟着做一步一步来确实容易理解。我最喜欢最后提到的“可升级版本”，期待着还能学到更多高级技巧！
有11位网友表示赞同！
说H5+CS3，这不就是网页和前端动画？感觉自己学的技术还是太基础了
有19位网友表示赞同！
我用这个教程做了一个简单的五子棋游戏，还挺有意思的！但有时候AI会输得很奇怪哈哈哈
有13位网友表示赞同！
我之前也尝试过制作类似的游戏，但是总是卡在程序设计上，这种教程讲解清晰，或许能解决我的问题！
有11位网友表示赞同！
JS和H5+CS3这些东西确实越来越重要了，赶紧学习起来才能跟得上时代！这篇教程很有用，我要好好把它消化一下!
有19位网友表示赞同！
五子棋游戏制作的原理还是蛮简单的吧？关键在于程序逻辑设计，感觉这个教程应该能够让小白也能轻松入门。
有10位网友表示赞同！
这篇文章讲的东西我有些都不懂，需要再好好学习下编程这些知识了。
有11位网友表示赞同！
感觉这篇教程写的太简略了，缺少一些细节上的讲解，比如如何实现AI的决策策略等等。希望能有更深入的探讨！
有20位网友表示赞同！
这篇文章真是太棒了！终于可以自己制作一个五子棋小游戏啦！
有7位网友表示赞同！
我觉得这篇教程挺适合入门学习的，但如果是想要在项目中应用的话，可能还需要结合更多的资料进行学习。
有5位网友表示赞同！
我做了一个简单的版本，但是和电脑对弈总是输，不知道AI的水平怎么提升？
有16位网友表示赞同！
虽然我已经会写JS了，但这种H5+CS3的开发概念还是挺新的，这篇教程很有价值！
有14位网友表示赞同！
制作五子棋游戏真是太有趣了！这篇文章讲解很详细，我迫不及待想要自己动手试试！
有14位网友表示赞同！
这篇文章讲的太复杂了，我没看懂，我感觉只有专业开发者才能理解这种技术吧？
有16位网友表示赞同！
学习HTML, JavaScript基本是入门必修课，这篇教程能把这些知识运用到五子棋游戏中是非常好的实践
有7位网友表示赞同！
我已经学会了H5+CS3的开发技巧！这篇文章让我更加了解如何在实战中应用这些技术。
有16位网友表示赞同！
做网页游戏确实很有成就感！这篇教程的案例很有启发，我开始有了更多创意想要尝试！
有11位网友表示赞同！