新手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);
         }

 

好運行下看看。。

運氣不錯，成功了，今天就到這裏，在下一篇中將講解黑白棋子的分別建立和屏幕座標與邏輯座標的轉換。