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

网站建设哪家好，找成都创新互联！专注于网页设计、网站建设、微信开发、小程序设计、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了七里河免费建站欢迎大家使用！

基本思路是这样的：

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

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

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

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

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

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

效果图：

 

代码如下：

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

 l 

网页名称：自己写的HTML5Canvas+Javascript五
当前URL：http://abwzjs.com/article/jhjodd.html