用SilverLight实现 连连看 游戏 (1)

概述使用了一段时间的SilverLight，写个小游戏练练手，同时把过程写出来，与大家一同进步！ 如果有什么问题，请大家指出。   连连看 应该是比较受欢迎的小游戏，所以，实现起来也应该让人觉得比较有意思。同时，难度也应该不大，这是我选择这个程序练手的原因。   OK，现在我大概的规划一下要实现的功能：   在SL上显示若干个小图标 可以点击小图标并标识选中的图标 两个相同图标间的连线（寻路功能、判断

使用了一段时间的Silverlight，写个小游戏练练手，同时把过程写出来，与大家一同进步！

如果有什么问题，请大家指出。

 

连连看 应该是比较受欢迎的小游戏，所以，实现起来也应该让人觉得比较有意思。同时，难度也应该不大，这是我选择这个程序练手的原因。

 

OK，现在我大概的规划一下要实现的功能：

 

在SL上显示若干个小图标 可以点击小图标并标识选中的图标 两个相同图标间的连线（寻路功能、判断是否存在两图标是可连接的） 计时功能，游戏开始后，需要显示离游戏结束时的剩余时间。

 

根据我初步的想法，实现这几点功能，一个小游戏的雏形就已经完成了！

接下去，大家可以自己去完善它：）

 

接下来开始第一点功能：

 

在SL上显示若干个小图标

第一步，当然是创建工程了，这里步骤略去

我的环境是

VS2010 + SL4

大家可以去下载，express版本都是free的

 

第二步，找程序用的资源，图标

 

 

 

呵呵，QQ的表情是比较经典的啊！

再加上是GIF动态的图，吸引眼球！！那就用它做为我们的图片资源了。(可以动态替换就好了，如QQ皮肤，因为每个人的喜好不同）

 

为了方便演示，程序的图标数量假定为 16 X 16

有了图标，接下来需要排版：

这个功能应该是比较简单的，在SL中有比较强大的 layout 控件。

用的比较多的当然是 GrID 了。

 

如图所示：

 

生成一个控件 slucFacesContainer.xaml 上面用GrID控件排版为 16X16 ，每个Cell的大小为 24 X 24 （因为QQ的表情图标为这个大小，这里也是为了演示而直接硬代码了）

 

排版好了，接下来我就需要把QQ图标放到每个CELL中去。

 

第一个问题出现了

SL中不支持 GIF 的资源

 

网上找了一些资源，基本上不可能通过SL的直接支持而实现GIF的显示。同时也发现了第三方的替代品(.NET Image Tools)

（试用之后，感觉非常棒！就用它了！）

 

 

OK，现在我们的程序结构如下：

1.添加了QQ 表情资源（添加到工程中的文件的 BuildAction 需要设置为 Resource）

2.添加了Imagetools第三方控件(直接引用到工程中)

图如下：

 

上面 slucFacesContainer.xaml 实现了我们的的逻辑。

主要包括如下几点：

 

1.在控件的loaded 事件中进行初始化

2.获取配置信息

   如：界面上的Cell 大小，数量，表情图标的个数等等

3.排版

   随机获取表情图标，并把它放到 Cell 表格中

 

代码比较多，请耐心查看啊 :)

namespace @R_403_6862@er{ public partial class slucFacesContainer : UserControl { struct tagCellsInfo { /// <summary> /// 表格中横向可放置的表情数量 /// </summary> public int iWIDthNum; /// <summary> /// 表格中竖向可放置的表情数量 /// </summary> public int iHeightNum; } struct tagFaceInfo { /// <summary> /// 有多少个表情可用？ /// </summary> public int iCount; /// <summary> /// 表情以索引的方式获取，最小索引值是多少 /// </summary> public int iMinIDx; /// <summary> /// 获取表情的最大索引值是多少 /// </summary> public int iMaxIDx; /// <summary> /// 表情与表情之间的间隔是多少？Cell 的大小 /// </summary> public int iFaceSpan; } /// <summary> /// 保存了表格UI的信息 /// </summary> tagCellsInfo m_cellsInfo; /// <summary> /// 保存了表情相关的信息 /// </summary> tagFaceInfo m_faceInfo; /// <summary> /// images loaded into memory. /// </summary> Dictionary<int,Imagetools.Image> m_lstimgsLoaded = new Dictionary<int,Imagetools.Image>(); public slucFacesContainer() { InitializeComponent(); this.Loaded += new RoutedEventHandler(slucFacesContainer_Loaded); } tagCellsInfo GetCellsInfo() { //为了演示，这里 hard-code return new tagCellsInfo() { iWIDthNum = 16,iHeightNum = 16 }; } tagFaceInfo GetFacesInfo() { //为了演示，这里 hard-code return new tagFaceInfo() { iCount = 91,//我一共copY到91个表情到工程中 iMaxIDx = 90,iMinIDx = 0,iFaceSpan = 24//Cell的大小 }; } voID slucFacesContainer_Loaded(object sender,RoutedEventArgs e) { //得到Cell信息 m_cellsInfo = GetCellsInfo(); //得到表情信息 m_faceInfo = GetFacesInfo(); //把表情读取到内存中，并显示出来！(放到16 X 16的CELL表格中) LayoutCellFaces(m_cellsInfo,m_faceInfo); } /// <summary> /// 获取某索引的GIF资源。 /// </summary> /// <param name="iIDx"></param> /// <returns></returns> Imagetools.Image Getimg(int iIDx) { //是否已经保存在内存中了？ if (m_lstimgsLoaded.Keys.Contains(iIDx) == false) {//如果不是，则读取并保存它 StreamResourceInfo sr = Application.GetResourceStream( new Uri("@R_403_6862@er;component/Faces/" + iIDx,UriKind.relative)); Imagetools.IO.Gif.GifDecoder dcd = new Imagetools.IO.Gif.GifDecoder(); Imagetools.Image img = new Imagetools.Image(); dcd.Decode(img,sr.Stream); m_lstimgsLoaded[iIDx] = img; } return m_lstimgsLoaded[iIDx]; } /// <summary> /// 排版 /// </summary> /// <param name="ci"></param> /// <param name="fi"></param> voID LayoutCellFaces(tagCellsInfo ci,tagFaceInfo fi) { Random r = new Random(DateTime.Now.Millisecond); for (int i = 0; i < ci.iHeightNum; ++i)//row { for (int j = 0; j < ci.iWIDthNum; ++j)//column { //这是 Imagetools的控件，具体用法请参考它的官方主页 Imagetools.Controls.AnimatedImage ai = new Imagetools.Controls.AnimatedImage(); ai.source = Getimg(r.Next(fi.iMinIDx,fi.iMaxIDx)); layoutRoot.Children.Insert(0,ai); GrID.SetRow(ai,i); GrID.SetColumn(ai,j); } } } }

 

 

点击查看 下一章

总结

以上是内存溢出为你收集整理的用SilverLight实现 连连看 游戏 (1)全部内容，希望文章能够帮你解决用SilverLight实现 连连看 游戏 (1)所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。