Silverlight五子棋

前几天看到 网上1篇一步一步silverlight--五子棋很有感触，好久没有动笔写自己的学习心得了...
照猫画虎 这几天讲课用到silverlight顺便也写了个五子棋的demo，这里记下步骤供同好者交流提意。

五子棋游戏不大，但要实现全部功能也是不少，我这里本着入门练习原则，仅将基本功能做一开发。
基本该有的 不外乎 棋盘、棋子和下棋落子三块，有了这个思路就是动手了。
这里我的开发环境是：vs2010+silverlight4

演示地址：
http://www.deepstudy.cn/demo/silverlight/wuziqi/

http://www.deepteach.com/

1、vs中单击菜单，文件-〉新建项目，左侧树选择“silverlight”，右侧选择Silverlight应用程序，确定创建解决方案。
2、双击打开“MainPage.xaml”，在设计器中 拖拽 左侧 Canvas控件 到 视图中设置宽高650，背景色#FFcccccc，Margin="10,10,0,0"，Name="cQiPan"

MainPage.xaml代码如下：
 

"五子棋.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" xmlns:sdk="http://schemas.microsoft.com/winfx/2006/xaml/presentation/sdk" d:DesignHeight="710" d:DesignWidth="870">

    "LayoutRoot" Background="White">
        "650" HorizontalAlignment="Left" Name="cQiPan" VerticalAlignment="Top" Width="650" Background="#FFcccccc" Margin="10,10,0,0">

 

Ctrl+F5开始执行就可以在浏览器中看到要画的棋盘区域了，有了棋盘区域，再横竖画12条线不就有了棋盘了么，

3、双击打开关联文件“MainPage.xaml.cs”在MainPage()构造方法下边 添加画棋盘的线、画棋盘两个方法
 

///
/// 画棋盘
///
public void DrawBoard() {

    for (int i = 1; i<=12;i++ )
    {
        huaQipanLine(50, 50 * i, 50 * 12 , 50 * i); //画横线
        huaQipanLine(50 * i, 50, 50 * i, 50 * 12 ); //画竖线
    }

}

///
/// 画棋盘的线
///
///
///
///
///
public void huaQipanLine(int x1,int y1,int x2,int y2){
    Line l = new Line();
    l.X1 = x1;  //50
    l.Y1 = y1;  //50
    l.X2 = x2;  //50*12;
    l.Y2 = y2;  //50
    l.Stroke = new SolidColorBrush(Colors.Black);
    cQiPan.Children.Add(l);
}

然后在 MainPage()构造方法中加入代码
           

DrawBoard();

Ctrl+F5开始执行就可以在浏览器中看到画的棋盘了

4、有了棋盘，当然得有棋子，这里我先定义一个方法 用来画棋子
 

///
 /// 画棋子
 ///
 public void DrawChessman(bool chess_color, Point pt)
 {
     Ellipse el = new Ellipse();
     el.Fill = new SolidColorBrush( chess_color?Colors.Black:Colors.White );
     el.Width = 50;
     el.Height = 50;

     cQiPan.Children.Add(el);
     //Canvas.SetLeft(el,50/2);
     //Canvas.SetTop(el,50/2);
     //Canvas.SetLeft(el, (int)pt.X - 35);
     Canvas.SetLeft(el, (Math.Round((pt.X -cQiPan.Margin.Left) / 50)) * 50-25  );
     Canvas.SetTop(el, (Math.Round((pt.Y - cQiPan.Margin.Top) / 50)) * 50-25 );


 }

显然只要调用执行这个方法就可以在指定的位置画个棋子出来。
5、棋子出来了 什么时候画啊，事件驱动--当然是点击棋盘cQiPan(Canvas控件)时响应事件中画了，
在“MainPage.xaml”编辑器下修改Canvas控件增加了一个MouseLeftButtonDown的事件回车 ，在隐藏代码中会相应的出现鼠标左键按下的事件响应函数private void cQiPan_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)，找到他修改为
 

///
/// 棋盘鼠标单击事件 画棋子
///
bool chess_color = true;
private void cQiPan_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
    Point pt = e.GetPosition(this);
    DrawChessman(chess_color,pt);
     if (chess_color)
    {
        chess_color = false;
    }else{
        chess_color = true;
    }

}

保存两个文件
Ctrl+F5开始执行 在棋盘上单击就可以下五子棋了

虽说可以下棋玩了，但要想实际应用 则有很多要考虑和开发的...代码没做解释，不难，实在也没什么解释的
好在这就是个demo，
无钱无动力 哎 怎么大家都这么功利了，就到这里吧，下次再说了

文章同步：http://www.itstudy.cn/www/article/article.asp?id=101

致谢 ：

沈凯 一步一步silverlight--五子棋 给了我不能偷懒的决心，望大家不要做比较，我不是要写代码说明比他好(写出来的都是好的)，只是以我的思路 写了一个五子棋的课堂练习而已。