用 Silverlight 开发围棋在线对弈程序（一）UI 雏形

首先，介绍下围棋的简单规则：黑白双方交替落子，以占据棋盘上交叉点多者为胜。同时，双方为了争夺地盘，可能会发生“对杀”。一个棋子周围接触的空白交叉点数目叫做“气”，如果一个或多个棋子周围的气都被对方封死，气数=0，则这些棋子就称为死棋，需要从棋盘上移去。

一个围棋棋谱大致如下图所示（截图自Tom围棋网站）：

图片看不清楚？请点击这里查看原图（大图）。

在上图中，棋子上的数字一般在棋谱中显示，用于帮助了解棋局进行的次序。

下面我们来尝试用 Silverlight 2.0 开发一个围棋在线对弈程序。

首先，我们来创建围棋程序的 UI 部分。毕竟，这是最直观的东西。而且我喜欢边做边重构的开发方式，这样，不至于因为花了过多的时间做设计，而减慢了实际开发的进度。让我们先从一个小小的原型起步，然后不断的应用设计思维去改进它，最终达到目标。正如一部电影里的台词所说的：

Aim small, miss small.

好了，现在大概分析一下：

1.　　　　　　 我们打算在界面的左侧显示棋盘，而右侧是功能区域。

2.　　　　　　 棋盘是由19道横线，19道竖线，以及9个星位的标志组成的。为了方便查找棋盘上的位置，我们在棋盘的四周可能需要加上坐标。目前我们先只在左侧和上方加上坐标。右边和下面的位置留在那里。

对于棋盘的显示，我们打算用一个 Canvas 来实现。而其中的线条，圆点，棋子等视觉元素，只需往其中添加相应的 Line, Ellipse, Label 即可。