看到一些曾经只会灌水的网友，在学习了前端之后，已经能写出下载量几千几万的脚本、样式，帮助大众，成为受欢迎的人，感觉满羡慕的。我也想学会前端技术，变得受欢迎呀。于是心血来潮，开始学习前端知识，并写下了这个小练习。

创新互联建站专注于企业成都全网营销、网站重做改版、和县网站定制设计、自适应品牌网站建设、成都h5网站建设、商城网站定制开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为和县等各大城市提供网站开发制作服务。

基本思路是这样的：

1. 使用Canvas绘制棋盘、棋子。

2. 用二维数组保存棋盘状态。

3. 设置一个flag，用以标识落子顺序。

4. 点击时，在数组中检测当前点击位置是否存在棋子，若存在，则不落子；如游戏已结束，亦不落子。

5. 落子时，更新数组，并将当前落子所在的行、列、左上-右下列、左下-右上列四个方向的棋盘状态写入到一维数组中，用以判断新落子是否形成了五子连珠。

6. 若形成了五子连珠，提示胜利，并结束游戏；反之，则交换顺序，继续进行游戏。

效果图：

代码如下：

  1   2   3   4   5   6   7 您的浏览器不支持 HTML5 canvas 标签。  
  8 重置  9  10 194 

 l

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网站栏目：自己写的HTML5Canvas+Javascript五-创新互联
转载注明：http://ybzwz.com/article/docpch.html