闲情奕趣（基于html5的围棋应用）

一、闲情奕趣

  少时，闻奕而不知奕之趣，观棋而不识棋之髓。近日，略习奕之规矩，演练一二，始觉其妙。今见各手谈之软件，心生一念，自编一演习软件，以调闲暇之情，培对弈之趣，故取一名，曰：“闲情奕趣”。

——雪飘七月 

  近日忙里偷闲得以编写此对弈软件，以HTML5为基础，canvas画布绘制展示棋盘棋子，localStorage本地存储本局的各个步骤。今日程序初具雏形，写此日志，以供大家交流学习。

下面上图一张：

二、棋布星罗

下面就来讲棋盘棋子的绘制，我们的绘制都是在canvas中一条线一个圆地绘制成的。

棋盘是19*19的线条与9个星位组成，9个星位就是9个以星位为圆心的圆。

棋子的绘制也是画圆，只是圆半径较星位大，而棋子是通过一个19*19的数组存储标记位来实现的，数组中361个值与棋盘上的361个位置一一对应。若数值为0，表示没有落子；数值若为1，表示黑方落子；数值若为2，表示白方落子。

三、旁观者清

当局者迷，旁观者清。

这一块其实我想说的是对弈的步骤，当然不是真的对弈的步骤，而是对弈程序中对弈提子的算法。

下面这块代码就是用来计算落子处是否可以提子的方法，

首先，方法中依次判断该子上方、左方、右方、下方的棋子是否能够被提，如果可以被提，就提子，然后返回true,这个方法的名称是checkOthersidePiece(x,y,side);

然后，查看本子是否会导致本方棋子被提，若会被提，提子，然后返回true,这个方法依然是checkOthersidePiece(x,y,side);

接下来我们就来看看这个神通广大的checkOthersidePiece(x,y,side);方法

该方法中新建一个19*19的数组，然后从该棋子位置循环遍历上、左、右、下的棋子，

如果周边棋子有空的，那将该空的位置标志位改为3；

如果周边棋子为己方的继续遍历该已方棋子的周边棋子，循环往复，直到遍历完与本子相连的已方棋子

再然后，我们来看一看这个递归遍历的方法吧setconnection_arr(arr,x,y,side);

在本方法中做的就是将本落子周围的己方棋子添加到connection_arr中，同时把周围的气以3为标志位添加到connection_arr中。

四、白璧微瑕

现在虽然可以顺畅地落子了，但是对于一些规则还是没有作限制，比如说：

1、刚被吃掉一子的地方不可立马落子（这需要添加一个机制）

2、不可悔棋，虽说落子无悔大丈夫，只是不小心点错位置导致整盘棋都废掉，实在有点可惜（这个可以引入数据库来解决）

等等等等，这些我会在之后的时间里慢慢改进

将这些能想到的改进之后，打算以socketio为基础做一个在线的对弈的小程序。

最后，欢迎各位IT大神以及各位喜欢围棋的大神们不吝赐教……

当然，有问题的也欢迎多多提问……

…………

什么？源码？好吧，点击下面的附件go.rar，下载到本地以chrome或firefox打开canvasgo.html即可跑起来啦！

效果？想看效果？给你个传送门吧！记得用chrome或firefox打开。