HTML 五子棋

思路

1.棋盘与棋子

棋盘为纵横十五道也就是14×14的方格，这里使用table作为棋盘方格，可以在html中定义一个table，但并不填充tb与tr，使用js进行批量填充，这样可以节约代码书写。
棋子为黑白棋子，需要落在棋盘线的交点处，因此需要为棋子设置定位。由于棋子是圆的，因此要设置圆角，颜色也要互相不同，可以棋子设置为相同的类。然后针对白棋黑棋分别设置颜色等属性。

2.落子与位置

落子需要根据鼠标位置落子，可以设置鼠标点击事件，点击后在最近的一个焦点放置棋子。棋子要轮番放置，因此需要定义flag来判断棋子颜色属性。当一方获胜后，棋盘应不能继续下棋。为了使用户能够更清晰的查看棋子，需要有一个棋子跟随用户的鼠标，也就是定义鼠标移动函数。落子位置也不可以是之前别的棋子落过的位置，当然也不可以超出棋盘。

3.胜负判断

如果每次落子都将所有的棋子进行查询，不方便，因此可以只判断此次落子是否会影响胜负即可，可以在js中定义一个二维数组来对棋子进行映射。对于不同颜色与空白区域分别用一个数字加以区分。对于每一个落下的棋子，都判断其八方，即上，下，左，右，左上，右下，左下，右上的棋子是否与其本身是同颜色，如果不是，则停止。如果是则继续累加。如果最终累加和大于5，则返回胜利。根据所下棋子颜色判断胜利方。

4.其他功能

增加清空棋盘功能，清空的同时重置js二维数组，让用户可以重新下棋。增加计分板功能，获胜会使分数增加。换色功能，使用户互相更换颜色，同时计分板的分数也对应更换。

代码

选手1获胜

0

盘

选手2获胜

0

盘