新手silverlight练习--五子棋( 二 )

新一天又开始了，继续上次的话题，讲到哪里了呢：? (这都忘记了，先拍一板砖）。。。

嘿嘿，想起来了，上次讲到把棋盘做好了。那我们就继续，接着讲棋子的设计。其实棋子比棋盘还简单------------

设计思路：

1.简单的定义它几个属性：

（1）棋子颜色（黑和白）Color

（2）棋子半径 Radius

（3）棋子坐标 Point

（4）棋子的标记（0，1，2） ----到时候方便用来判断（0表示没有棋子，1表示黑棋，2表示白棋）Tag

2.做一个函数：

此函数用来画棋子，并把棋子放到棋盘上去。放到棋盘上去的方法，和上篇文章中把棋盘格子画到棋盘上去的方法一样，所以函数大概是这样的：

代码

/// <summary>
        /// 画棋子
        /// </summary>
        public void DrowChessman(Canvas container)
        {

            Ellipse el = new Ellipse();
            el.Fill = new SolidColorBrush(CHcolor);    // 设置颜色
            el.Width = CRadius * 2;
            el.Height = CRadius * 2;

            container.Children.Add(el);
            Canvas.SetLeft(el,Cpoint.X-300-CRadius);   //在棋盘中定位棋子
            Canvas.SetTop(el, Cpoint.Y-CRadius);
        }

这个函数有一个形参，主要用来传进来上级容器，就是容纳棋子的容器（棋盘），然后根据棋子本身属性来设置颜色，大小等属性。而

Canvas.SetLeft(el,Cpoint.X-300-CRadius); //在棋盘中定位棋子
Canvas.SetTop(el, Cpoint.Y-CRadius);
这两个是用来定位在棋盘中棋子的,涉及到了屏幕坐标和Canvas容器内坐标的关系转换，下面我用图示简单讲解下原理：

现在我们要设置的是棋子在棋盘中的位置，我们以棋盘左上角的黑棋为例：

由于在之前进行布局的时候，在一个Grid中分成了三列，棋盘是中间的一列，而它左边的一列有300个单位，在进行画棋盘格子的时候我们当初用MarginLeft设置为50，所以最边上的竖线距离棋盘左边边缘50个单位。距离上边缘30个单位。而现在我们是在Canvas中对它进行定位，所以MarginLeft应该为50-radius；而我们能得到的是我们鼠标按下时候的屏幕坐标，在这个位置得到的x坐标为350，通过Cpoint.X-300-radius=50-radius 就推算出屏幕坐标与Canvas定位坐标的关系。其实，也可以这么想，假设当整个棋盘充满整个窗口的时候，我们得到的x坐标就可以直接用来在Canvas中进行定位，因为在Canvas中距离左边缘的位子，就是等于距离窗口最左边的位子。而现在，我们的Canvas相对于窗口向右边移动了300个单位，所以当我们得到屏幕坐标后需要减去300个单位。而y坐标也相同原理。

整个ChessMan类如下：

代码

namespace ChessGame
{
    public class ChessMan
    {

        /// <summary>
        /// 棋子坐标
        /// </summary>
        public Point Cpoint { get; set; }
        /// <summary>
        /// 棋子半径
        /// </summary>
        public int CRadius { get; set; }
        /// <summary>
        /// 棋子颜色
        /// </summary>
        public Color CHcolor { get; set; }

        /// <summary>
        ///   颜色标记，便于操作
        /// </summary>

        public int tag { get; set; }



       /// <summary>
       /// 构造函数
       /// </summary>
       /// <param name="pt"></param>
       /// <param name="radius"></param>
       /// <param name="color"></param>
        public ChessMan()
        {
            tag = 0;
        }
        public ChessMan(Point pt, int radius, Color color,int x)
        {
            CRadius = radius;
            Cpoint = pt;
            CHcolor = color;
            tag = x;
        }

        /// <summary>
        /// 画棋子
        /// </summary>
        public void DrowChessman(Canvas container)
        {

            Ellipse el = new Ellipse();
            el.Fill = new SolidColorBrush(CHcolor);
            el.Width = CRadius * 2;
            el.Height = CRadius * 2;

            container.Children.Add(el);
            Canvas.SetLeft(el,Cpoint.X-300-CRadius);
            Canvas.SetTop(el, Cpoint.Y-CRadius);
        }

    }
}

ChessMan类做好了，接下来继续来做剩下的一个类，GameEnigin类--------

有了棋盘，棋子，是该下几颗棋子了，那么就需要有个东西来控制下棋，这就是GameEnigin类的功能。这个类相比前面两个就要复杂的多，不过先别怕，我们慢慢来完善它。其它先不管，做棋盘，棋子做那么辛苦，也不知道它们有没有用，所以，我决定先在GameEnigin类中来控制下画棋盘。棋子，暂时不考虑位置啊，坐标啥的，先能把棋子放到棋盘上再说。

于是，就开始了。。。

先定义一个构造函数：

代码

public GameEnigin(Panel control)
        {

            ChessBoard cb = new ChessBoard(control);
            cb.DrawBoard();
            ChessMan ce=new ChessMan(new Point(350,28),radius,Colors.Black,1);
            ce.DrowChessman(Board);
         }

完工。。。。

等等，这边还有个radius（棋子半径)没定义，所以在GameEnigin类中定义radius=15；

这样，GameEnigin类就是这个样子了：

代码

namespace ChessGame
{
    public class GameEnigin
    {
        int radius = 15;

   public GameEnigin(Panel control)
        {

            ChessBoard cb = new ChessBoard(control);
            cb.DrawBoard();
            ChessMan ce=new ChessMan(new Point(350,28),radius,Colors.Black,1);
            ce.DrowChessman(Board);
         }

}
}

接下来，我们就开始测试吧；打开MainPage.xaml.cs文件，

在MainPage（）函数中加入代码，如下：

public MainPage()
        {
            InitializeComponent();
            GameEnigin ge=new GameEnigin(Board);
         }

好运行下看看。。