第一步写样式：
利用cavans画布写游戏，首先要在html写上如下：
这几行代码就是先给画布标签属性设置宽高，然后转成块，，让画布距离浏览器边缘一段距离，添加个背景颜色，否则下棋时白棋看不到。
第二步写JavaScript(js):
写之前我们应该先考虑好写游戏需要的过程，这样我们就可以根据过程一步一步实现。我的具体想法如下：
1.绘制棋盘
1.1 绘制表格的操作
2.绘制棋子
2.1 如何绘制棋子
2.2 如何进行交互，点击下棋
2.3 一人一次
2.4 必须下到中心点，自瞄系统
2.5 友军判断，已经有棋的地方不下，记录棋盘状态
3.游戏胜负判断
3.1 棋盘状态
4.机器下棋（与电脑交互，目前没实现）
按照这个过程写代码，首先绘制直线成为棋盘
上述代码就是画表格，首先得到元素，var是js中用来定义变量的，比较常用；然后返回绘制画布的环境；getContext() 方法就是用于返回一个用于在画布上绘图的环境，通常都是2d。第一个循环就是创建一个二维数组，记录棋盘的每个点的状态，是否有棋子，开始默认都为0；
第二个循环就是画棋盘，因为棋盘并不是位于画布边缘，是从（30，30）坐标开始画的，前两个是画竖线，从（30，30）到（30，420），后两个画横线，循环执行14次，形成14行14列的表格，如下：
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色，可以通过ctx.strokeStyle=“green”;改变。画好后这个方法必须被调用，否则棋盘不会有出现。
2. 1绘制棋子
上述代码是画圆，即是棋子，这是一个函数，方便下面调用，棋子需要三个参数，位置和颜色，画图之前要先提笔，否则就会按上次结束的地方开始画了。设置好颜色属性后需要调用填充方法即fill();
2.2 如何进行交互，点击下棋
交互就是鼠标点击触发事件。
上述代码讲解：首先就是定义个数组，存放棋子颜色，step变量是记录点击次数，次数为奇数时是黑棋，偶数时为白棋，决定了两种棋子一种一次；mode数组变量，是为了判断哪个方向上棋子够五个，具体需要看下面讲解，第三个应该是右下，注释错了，里面参数就是代表要么加0要么加1，反方向就是要么减0要么减1，就是为了下面判断相邻棋子的颜色。
在点击函数中定义变量存储坐标，
floor() 方法执行的是向下取整计算，它返回的是小于或等于函数参数，并且与之最接近的整数，0.9取的是0整数
offsetX是浏览器自带的属性，发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标，
第二个if判断就是让在没有棋子的地方可以点击下棋，有棋子的地方棋盘状态就记录了黑白，不为0就无法在下。
在if中先调用画圆函数画棋子，根据次数显示的棋子颜色不同，同时也要改变棋子下的坐标的状态，使下一次不能在下。最后的几行就是下面判断输赢的函数了，下面讲解，同时点击次数变量数值也要增加。
上面就是判断输赢函数的代码，参数有坐标，颜色，还有方向。在此函数里，console.log()只是为了打印，调试时候用的，可以不写。
外围的if判断就是判断是否存在这个点，里面就是判断正方向和反方向的方法。
count变量记录相同棋子次数。
mode传入的时候是个数组，判断方向，在这里作为参数也是个数组，是指传入数组中的第一个数。相当于是个二维数组。
循环五次是判断正反方向棋子总共的次数，最后的if判断就是五次同样颜色的棋子获胜。
调用alert网页会弹出一个小窗口显示，location.reload();是为了结束之后自动刷新页面
