閑情奕趣（基于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打開。