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

学习silverlight将近半个月了，觉得挺好玩的，嘿嘿。。今天就来用silverlight来实现下最简单的五子棋，主要用来silverlight练习用，所以只关注sl部分，所以也就只是简单的自己和自己下棋，没实现网络版，当然也没有实现人机对战功能（目前实力有限，挺悲哀的）。好了废话不多说了，开始工作，呃。。。还是先看下最终效果：

测试地址： http://www.ophoneba.com/SL/chess.html

五子棋，要怎么做呢怎么做？网上一搜一大堆，什么版本都有。至于我这个，实在是有点丢人，太简单了。不过为了练习，不管这些了、

首先，我们来进行界面布局：

（这个简单—— ---只需简单的弄几下）

布局思路：用Grid布局，把整个窗口分成三部分，中间放棋盘。。棋盘？棋盘怎么放啊？想了想，就用了一块布（有点简陋，棋盘桌都没有），不过大家要问哪里来的布？就是Canvas画布。暂且把它当作棋盘吧。好了，布局结束-----

--------------------------------------------------------------等等，还有棋子呢？（这个不急不急，现在放上去也没用。等下棋子的时候再放，另外棋盘上的格子也在.Cs代码中进行绘制，因为这些在xaml中一条条画，代码就变好多，在.CS中只要几个循环就Ok啦。）

先看看布局代码：

  </UserControl.Resources>
  <Grid x:Name="LayoutRoot"  Loaded="LayoutRoot_Loaded">
        <Grid.Background>
            <ImageBrush ImageSource="bg.jpg"/>
        </Grid.Background>
            <Grid>
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="300"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="308"/>
            </Grid.ColumnDefinitions>
<Canvas Background="LightGray" Grid.Column="1" x:Name="Board" MouseLeftButtonDown="Board_MouseLeftButtonDown">
            </Canvas>
     <Button Grid.Column="0" Margin="5,150,0,0" Content="再来一局" Height="30" Width="80" Opacity="0.5" Click="Button_Click_1" >
                <Button.Background>
                    <ImageBrush ImageSource="bn.jpg"/>
                </Button.Background>
            </Button>
        </Grid>
    </Grid>
</UserControl>

那个Button是用来重新开始一局的，把它放在棋盘的左边---Grid.Column="0" ；

布局好了，先在要思考下，怎么实现逻辑代码部分。

首先，我就来定义几个类吧，我一共用了3个类：

分别是：ChessBoard（棋盘) ChessMan(棋子) GameEnigin(游戏控制)

接下去，我们就分别来完善它们-----------

先拿棋盘开刀，到目前为止。棋盘还只是一块布。上面空白一片啊。。。。。

太白了不好，所以我决定画写格子上去，这也是没办法的，发明五子棋的人规定的，要有横线啊，竖线啊交叉组成的格子。那么，就来画格子吧。

画画就要用笔划线，所以我们选择一个Line对象进行画线。

为了更方便的画棋盘，在此，我们设计一个DrawGrid(int x1,int y1,int x2,int y2)函数，里面的参数分别是

起点x坐标，y坐标，终点的x坐标和y坐标

因此整个函数是这样的：

public void DrawGrid(int x1,int y1,int x2,int y2)
        {
            Line line = new Line();

            line.X1 = x1*gat+MarginLeft;
            line.X2 = x2*gat+MarginLeft;
            line.Y1 = y1*gat+MarginTop;
            line.Y2 = y2*gat+MarginTop;
            line.StrokeThickness = 2;
            line.Stroke = new SolidColorBrush(Colors.Black);
            container.Children.Add(line);
        }

其中的container是一个容器，我们在类的开始处设置了一个Panel container;对象；

为什么要这么做呢？

因为我们知道在Silverlight或者WPF中，很多对象或者控件都有Content property; 因此，我们会在ChessBoard类的构造函数中传递外部对象，以实现把Line对象放进这个content中，在这里，我们会将外部的Canvas画布传进来，然后在container.Chindren.Add(line)中，把画好的线放到这块布上。这样就为光秃秃的棋盘画先了，不会别高兴的太早，这里只是一个画棋盘的函数，还没正真画呢。等等，或许你还会看到，这里面有几个新东西（gat MarginLeft MarginTop）这是什么呢？

加上gat是为了使得两条线之间留出相同的间隙，形成空格，至于MarginLeft 和 MarginTop 是用来控制整个格子区域的Margin；

有了画格子的函数，接下来，就来画了，这个函数可以这样理解，就像用line制作了一支画笔，然后就要用画笔画画了；

现在想想要画多少呢？这个规定是怎么样的？。。。。不能老按照规定，这次就打破规定，我没去查五子棋要有多少格，有兴趣哪位大哥帮我去查查，我棋类知识很菜，我也比较懒就不查，哈哈哈。。。所以，就自定义了下：

画一个12X12的。。。

看函数：

代码

public void DrawBoard()
        {
            for (int i = 0; i < 12; i++)
            {

                    DrawGrid(0, i, 11, i);   //画竖线
                    DrawGrid(i, 0, i, 11);    //画横线

            }



        }

哇，这么简单！！

对，就这么几行、画完后就我们的棋盘就这样了：

棋盘是不是太小了点啊？ -----------（哈哈，我在编辑文章的时候缩小图片了，本来当然还要大很多啦）；

看下整个ChessBoard类吧; （此类的实现，参考了园内路过秋天大哥的象棋文章）

代码

public class ChessBoard
    {
        Panel container;
        int gat = 50;
        int MarginLeft = 50;
        int MarginTop = 30;
       public ChessBoard(Panel control)
        {
            container = control;

       }
        public void DrawGrid(int x1,int y1,int x2,int y2)
        {
            Line line = new Line();

            line.X1 = x1*gat+MarginLeft;
            line.X2 = x2*gat+MarginLeft;
            line.Y1 = y1*gat+MarginTop;
            line.Y2 = y2*gat+MarginTop;
            line.StrokeThickness = 2;
            line.Stroke = new SolidColorBrush(Colors.Black);
            container.Children.Add(line);
        }
        public void DrawBoard()
        {
            for (int i = 0; i < 12; i++)
            {

                    DrawGrid(0, i, 11, i);
                    DrawGrid(i, 0, i, 11);

            }



        }

    }

今天就到此为止，写不动了。。下一篇讲实现那个ChessMan类。。。