自己写的HTML5 Canvas + Javascript五子棋

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

基本思路是这样的：

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

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

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

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

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

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

　　效果图：

　　

 

代码如下：

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

 l 

转载于:https://blog.51cto.com/12883930/1922702