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

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

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

 

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

 

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

 

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

 

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

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

 

接下来开始第一点功能：

 

在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 Linker { public partial class slucFacesContainer : UserControl { struct tagCellsInfo { /// <summary> /// 表格中横向可放置的表情<a href="/tag/shuliang/" target="_blank" class="keywords">数量</a> /// </summary> public int iWidthNum; /// <summary> /// 表格中竖向可放置的表情<a href="/tag/shuliang/" target="_blank" class="keywords">数量</a> /// </summary> public int iHeightNum; } struct tagFaceInfo { /// <summary> /// 有多少个表情可用？ /// </summary> public int iCount; /// <summary> /// 表情以索引的方式<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>，最小索引值是多少 /// </summary> public int iMinIdx; /// <summary> /// <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>表情的最大索引值是多少 /// </summary> public int iMaxIdx; /// <summary> /// 表情与表情之<a href="/tag/jiande/" target="_blank" class="keywords">间的</a>间隔是多少？Cell 的大小 /// </summary> public int iFaceSpan; } /// <summary> /// 保存了表格UI的信息 /// </summary> tagCellsInfo m_cellsInfo; /// <summary> /// 保存了表情相关的信息 /// </summary> tagFaceInfo m_faceInfo; /// <summary> /// images loaded into memory. /// </summary> Dictionary<int,Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Image> m_lstImgsLoaded = new Dictionary<int,Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.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,//我一共<a href="/tag/cop/" target="_blank" class="keywords">cop</a>Y到91个表情到工程中 iMaxIdx = 90,iMinIdx = 0,iFaceSpan = 24//Cell的大小 }; } void slucFacesContainer_Loaded(object sender,RoutedEventArgs e) { //得到Cell信息 m_cellsInfo = GetCellsInfo(); //得到表情信息 m_faceInfo = GetFacesInfo(); //把表情读取到内存中，并<a href="/tag/xianshi/" target="_blank" class="keywords">显示</a>出来！(放到16 X 16的CELL表格中) LayoutCellFaces(m_cellsInfo,m_faceInfo); } /// <summary> /// <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>某索引的GIF资源。 /// </summary> /// <p<a href="/tag/ara/" target="_blank" class="keywords">ara</a>m name="iIdx"></p<a href="/tag/ara/" target="_blank" class="keywords">ara</a>m> /// <returns></returns> Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Image GetImg(int iIdx) { //是否已经保存在内存中了？ if (m_lstImgsLoaded.Keys.Contains(iIdx) == false) {//如果不是，则读取并保存它 StreamResourceInfo sr = Application.GetResourceStream( new Uri("Linker;component/Faces/" + iIdx,UriKind.Relative)); Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.IO.Gif.GifDecoder dcd = new Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.IO.Gif.GifDecoder(); Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Image img = new Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Image(); dcd.Decode(img,sr.Stream); m_lstImgsLoaded[iIdx] = img; } return m_lstImgsLoaded[iIdx]; } /// <summary> /// 排版 /// </summary> /// <p<a href="/tag/ara/" target="_blank" class="keywords">ara</a>m name="ci"></p<a href="/tag/ara/" target="_blank" class="keywords">ara</a>m> /// <p<a href="/tag/ara/" target="_blank" class="keywords">ara</a>m name="fi"></p<a href="/tag/ara/" target="_blank" class="keywords">ara</a>m> void LayoutCellFaces(tagCellsInfo ci,tagFaceInfo fi) { Random r = new Random(DateTime.<a href="/tag/Now/" target="_blank" class="keywords">Now</a>.Millisecond); for (int i = 0; i < ci.iHeightNum; ++i)//row { for (int j = 0; j < ci.iWidthNum; ++j)//column { //这是 Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols的控件，具体<a href="/tag/yongfa/" target="_blank" class="keywords">用法</a>请参考它的官方主页 Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Controls.AnimatedImage ai = new Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Controls.AnimatedImage(); ai<a href="/tag/so/" target="_blank" class="keywords">.so</a>urce = GetImg(r.Next(fi.iMinIdx,fi.iMaxIdx)); layoutRoot.Children.Insert(0,ai); Grid.SetRow(ai,i); Grid.SetColumn(ai,j); } } } }

 

 

点击查看 下一章