Silverlight五子棋

最新推荐文章于 2025-11-17 20:58:51 发布

最新推荐文章于 2025-11-17 20:58:51 发布 · 65 阅读

本文分享了一款使用Silverlight开发的五子棋游戏实践教程。作者从搭建开发环境开始，逐步介绍了如何创建棋盘、绘制棋子及实现下棋功能。通过跟随本教程，读者可以了解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代码如下：

Code:

<UserControlx: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">
<Gridx:Name="LayoutRoot"Background="White">
<CanvasHeight="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>
publicvoidDrawBoard(){
for(inti=1;i<=12;i++)
{
huaQipanLine(50,50*i,50*12,50*i);//画横线
huaQipanLine(50*i,50,50*i,50*12);//画竖线
}
}
///<summary>
///画棋盘的线
///</summary>
///<paramname="x1"></param>
///<paramname="y1"></param>
///<paramname="x2"></param>
///<paramname="y2"></param>
publicvoidhuaQipanLine(intx1,inty1,intx2,inty2){
Linel=newLine();
l.X1=x1;//50
l.Y1=y1;//50
l.X2=x2;//50*12;
l.Y2=y2;//50
l.Stroke=newSolidColorBrush(Colors.Black);
cQiPan.Children.Add(l);
}

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

Code:

DrawBoard();

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

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

Code:

///<summary>
///画棋子
///</summary>
publicvoidDrawChessman(boolchess_color,Pointpt)
{
Ellipseel=newEllipse();
el.Fill=newSolidColorBrush(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: