Silverlight五子棋（转）

原文来自：http://student.csdn.net/space.php?uid=232537&do=blog&id=41966

前几天看到网上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代码如下：

Code:

<UserControl x:Class="五子棋.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">
<Grid x:Name="LayoutRoot" Background="White">
<Canvas Height="650" HorizontalAlignment="Left" Name="cQiPan" VerticalAlignment="Top" Width="650" Background="#FFcccccc" Margin="10,10,0,0"></Canvas>
</Grid>
</UserControl>

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

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

Code:

/// <summary>
/// 画棋盘
/// </summary>
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 ); //画竖线
}
}
/// <summary>
/// 画棋盘的线
/// </summary>
/// <param name="x1"></param>
/// <param name="y1"></param>
/// <param name="x2"></param>
/// <param name="y2"></param>
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()构造方法中加入代码

Code:

DrawBoard();

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

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

Code:

/// <summary>
/// 画棋子
/// </summary>
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)，找到他修改为

Code:

/// <summary>
/// 棋盘鼠标单击事件画棋子
/// </summary>
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--五子棋给了我不能偷懒的决心，望大家不要做比较，我不是要写代码说明比他好(写出来的都是好的)，只是以我的思路写了一个五子棋的课堂练习而已。

原文来自：http://student.csdn.net/space.php?uid=232537&do=blog&id=41966

posted on 2010-09-29 08:44 playman0211 阅读(216) 评论(0) 编辑收藏举报

刷新页面返回顶部

相忘于江湖