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

概述  本节介绍这个游戏的核心，如何寻路！很有意思的一节！ 在SL上显示若干个小图标 可以点击小图标并标识选中的图标 两个相同图标间的连线（寻路功能、判断是否存在两图标是可连接的） 计时功能，游戏开始后，需要显示离游戏结束时的剩余时间。         我这样考虑寻路功能：   对于一个表情A，它怎么知道存在另一个表情B是与它相连的呢？！   最简单的方法，从表情A连一条线出去，在规则（连线可以弯二次

 

本节介绍这个游戏的核心，如何寻路！很有意思的一节！

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

 

 

 

 

我这样考虑寻路功能：

 

对于一个表情A，它怎么知道存在另一个表情B是与它相连的呢？！

 

最简单的方法，从表情A连一条线出去，在规则（连线可以弯二次）允许下一直延伸，直到触及一个表情为止。

这条线延伸时，会存在无数不同的形状。我们需要把所有形状都演绎一次，把所有可连接的表情找出来，并判断是否存在相同的表情。

 

 

方法确定后，我再做一些补充解释，以让大家更明白：

对于一个表情，旁边的CELL如果没有被另一表情占有，则是可连线的

如上图，上面的一个表情有四个相邻CELL为空，即：有四条线可以连接出去

或者说：查询这个表情的可连接表情时，需要查询四次，每相邻的未占用CELL都需要做一次查询。

 

我们现在从上面 CELL 1 处连接一条线，当这条线从表情连接到CELL 1 时，这条线接下来有三个可能的延伸方案，如下图所示：

 

相同的，每个方案再次延伸都会碰到多个方案（好多分支啊！）

不过，用递归很容易满足要求！

 

 

OK，开始贴代码之前，还有一个要处理：

在CELL容器放置表情时，一定要成对成对的放置。（要不然，会有表情消除不掉）

并且，放置时，一定需要随机放置

 

 

 

看代码吧，相比上一部分，改动有点大

 

主要的初始化工作流程如下：

 

在程序运行过程中，每次点击都会判断是否有需要消除的表情。

当鼠标点击一个表情后，流程如下：

 

 

代码如下，这里是整个文件的代码：

欢迎各位问题

using System;using System.Collections.Generic;using System.linq;using System.Net;using System.windows;using System.windows.Controls;using System.windows.documents;using System.windows.input;using System.windows.Media;using System.windows.Media.Animation;using System.windows.Shapes;using System.windows.Resources;namespace linker{ 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; } struct tagPosi { public int iRow; public int iCln; public static bool operator ==(tagPosi posi0,tagPosi posi1) { return posi1.iRow == posi0.iRow && posi1.iCln == posi0.iCln; } public static bool operator !=(tagPosi posi0,tagPosi posi1) { return posi1.iRow != posi0.iRow || posi1.iCln != posi0.iCln; } public overrIDe int GetHashCode() { return base.GetHashCode() + iRow.GetHashCode() + iCln.GetHashCode(); } } enum enmStepWay { wayleft,wayUp,wayRight,wayDown,} /// <summary> /// 放置在CELL内的表情信息 /// </summary> struct tagFaceInfoInCell { /// <summary> /// 表情索引 -1时表示为空 /// </summary> public int iimgIDx; public Imagetools.Controls.AnimatedImage ai; /// <summary> /// 这个表情与其它表情可连接的路径。一个表情可同时与多个其它表情相连 /// </summary> public List<List<tagPosi>> lstlstlinked; /// <summary> /// 保存一条路径。路径包括头尾表情 /// </summary> /// <param name="lstPath"></param> public voID PushOnePath(List<tagPosi> lstPathNew ) { //判断是否已经有相同表情的连线存在？ foreach (List<tagPosi> lstI in lstlstlinked) { if (lstI[0] == lstPathNew[0]) {//已经有连接相同的表情路径存在了，判断当前路径是否更优 if (lstI.Count > lstPathNew.Count) { lstI.Clear(); foreach (tagPosi posiI in lstPathNew) lstI.Add(posiI); } return; } } //如果不存在，则添加 lstlstlinked.Add(new List<tagPosi>(lstPathNew)); } /// <summary> /// 判断当前表情是否有连接到 posi 位置CELL的线 /// </summary> /// <param name="posi"></param> /// <returns>返回-1没有</returns> public int IfConnectedTo( tagPosi posi ) { for ( int i=0;i<lstlstlinked.Count;++i) { if( posi == lstlstlinked[i][0] ) return i; } return -1; } public voID Clear( GrID layoutRoot ) { iimgIDx = -1; layoutRoot.Children.Remove(ai); ai = null; } } /// <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>(); /// <summary> /// 当前鼠标的CELL位置,如果其中的任一值是 -1，则表示无效 /// </summary> tagPosi m_curMousePosi; /// <summary> /// 容器中每个CELL里放置的图片信息 /// </summary> tagFaceInfoInCell[,] m_aryimgInfoPlacedInCell = null; /// <summary> /// 目前放置在容器中的图片索引,索引指向 m_lstimgsLoaded ，索引可能会重复 /// </summary> List<int> m_lstActiveimgsIDx = new List<int>(); public slucFacesContainer() { InitializeComponent(); m_curMousePosi.iRow = -1; 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 Drawpolyline(List<tagPosi> lstPath) { linkline.Points.Clear(); foreach (tagPosi posiI in lstPath) { linkline.Points.Add(new Point((posiI.iCln + 0.5) * m_faceInfo.iFaceSpan,(posiI.iRow + 0.5) * m_faceInfo.iFaceSpan)); } linkline.Visibility = System.windows.Visibility.Visible; } voID slucFacesContainer_Loaded(object sender,RoutedEventArgs e) { //得到Cell信息 m_cellsInfo = GetCellsInfo(); //得到表情信息 m_faceInfo = GetFacesInfo(); //初始化 m_aryimgInfoPlacedInCell = new tagFaceInfoInCell[m_cellsInfo.iHeightNum,m_cellsInfo.iWIDthNum]; for (int i = 0; i < m_cellsInfo.iHeightNum; ++i) { for (int j = 0; j < m_cellsInfo.iWIDthNum; ++j) m_aryimgInfoPlacedInCell[i,j] = new tagFaceInfoInCell() { iimgIDx = -1,lstlstlinked = new List<List<tagPosi>>() }; } //得到需要的图片索引，先取8个表情，表情越多，则对玩家来说难度越大！ GetRandomimgs(m_lstActiveimgsIDx,m_cellsInfo,m_faceInfo,8); //把CELL全部转换成索引保存，以利于随机获取空白CELL List<int> lstNeedFillCellIDx = new List<int>(m_cellsInfo.iWIDthNum * m_cellsInfo.iHeightNum); for (int i = 1; i < m_cellsInfo.iHeightNum - 1; ++i) { for (int j = 1; j < m_cellsInfo.iWIDthNum - 1; ++j) { lstNeedFillCellIDx.Add(i * m_cellsInfo.iWIDthNum + j); } } //把表情读取到内存中，并显示出来！(放到16 X 16的CELL表格中) LayoutCellFaces(m_lstActiveimgsIDx,lstNeedFillCellIDx,m_faceInfo); //放好后，需要生成表情之间的关联图！ while (FacesRelaBuild(m_cellsInfo) == 0) { RelayoutCellFaces(m_lstActiveimgsIDx,m_faceInfo); } } /// <summary> /// 随机获取一组图片 /// </summary> /// <param name="lstimgsIDx"></param> voID GetRandomimgs(List<int> lstimgsIDx,tagCellsInfo ci,tagFaceInfo fi,int iimgCountNeed) { List<int> lstSrc = new List<int>(fi.iCount); Random r = new Random(DateTime.Now.Millisecond); for (int i = 0; i < iimgCountNeed; ++i) { if (lstSrc.Count == 0) { for (int k = fi.iMinIDx; k < fi.iMaxIDx; ++k) lstSrc.Add(k); } int iV = r.Next(0,lstSrc.Count); lstimgsIDx.Add(lstSrc[iV]); lstSrc.RemoveAt(iV); } } /// <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("linker;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> /// 将 lstimgsIDx 中的图片全部放置到CELL容器中排版. /// lstimgsIDx中的图片可能只有几个。 /// </summary> /// <param name="ci"></param> /// <param name="fi"></param> voID LayoutCellFaces(List<int> lstimgsIDx,List<int> lstNeedFillCellIDx,tagFaceInfo fi) { //把CELL全部转换成索引保存，以利于随机获取空白CELL for (int i = 1; i < ci.iHeightNum-1; ++i) { for (int j = 1; j < ci.iWIDthNum-1; ++j) { m_aryimgInfoPlacedInCell[i,j].iimgIDx = -1;//同时把每个CELL上放置的表情清空 m_aryimgInfoPlacedInCell[i,j].lstlstlinked.Clear(); m_aryimgInfoPlacedInCell[i,j].ai = null; } } List<Imagetools.Controls.AnimatedImage> lstAIsCanReuse = new List<Imagetools.Controls.AnimatedImage>(); //界面上的控件移除,为演示方便，这里hard-code //-1 是排除 canvas 控件 while (layoutRoot.Children.Count > 1) { System.Diagnostics.DeBUG.Assert(layoutRoot.Children[0] is Imagetools.Controls.AnimatedImage); lstAIsCanReuse.Add(layoutRoot.Children[0] as Imagetools.Controls.AnimatedImage);//保存起来，在下面用到时，不需要去新创建一个对象 layoutRoot.Children.RemoveAt(0); } //把表情全部随机放置到CELL容器中 //Random r = new Random(1); Random r = new Random(DateTime.Now.Millisecond); int iimgAryIDx = 0; while( true ) { //表情成对出现，所以，需要放置两次相同的表情 Putimg2CellContainer(lstimgsIDx[iimgAryIDx],r,m_aryimgInfoPlacedInCell,lstAIsCanReuse,ci,fi); Putimg2CellContainer(lstimgsIDx[iimgAryIDx],fi); if (lstNeedFillCellIDx.Count == 0) {//已经没有CELL可以放置了，则退出 break; } ++iimgAryIDx; if (iimgAryIDx >= lstimgsIDx.Count) iimgAryIDx = 0; } } /// <summary> /// 表情重新排版 /// </summary> /// <param name="lstimgsIDx"></param> /// <param name="ci"></param> /// <param name="fi"></param> voID RelayoutCellFaces(List<int> lstimgsIDx,tagFaceInfo fi) { //收集现在界面上的表情CELL位置 List<int> lstNeedFillCellIDx = new List<int>(); for (int i=0;i<ci.iHeightNum;++i) { for (int j = 0; j < ci.iWIDthNum; ++j) { if (m_aryimgInfoPlacedInCell[i,j].iimgIDx != -1) {//这个CELL有表情在 lstNeedFillCellIDx.Add(i * ci.iWIDthNum + j); } } } LayoutCellFaces(lstimgsIDx,fi); } /// <summary> /// 把参数 ai 对应的控件随机放置到CELL容器中。 /// </summary> /// <param name="ai"></param> /// <param name="r"></param> /// <param name="iimgIDx"></param> /// <param name="lstleftEmptyCellsIDx"></param> /// <param name="ci"></param> /// <param name="fi"></param> voID Putimg2CellContainer(int iimgIDx,Random r,List<int> lstleftEmptyCellsIDx,tagFaceInfoInCell[,] aryiimgIDxInCell,List<Imagetools.Controls.AnimatedImage> lstAIsCanReused,tagFaceInfo fi) { Imagetools.Controls.AnimatedImage ai = null; if (lstAIsCanReused.Count == 0) { ai = new Imagetools.Controls.AnimatedImage(); ai.MouseEnter += new MouseEventHandler(ai_MouseEnter); } else { ai = lstAIsCanReused[0]; lstAIsCanReused.RemoveAt(0); } ai.source = Getimg(iimgIDx); //put the face to cell container. //1.get position randomly. int iSrcPosi = r.Next(0,lstleftEmptyCellsIDx.Count); int iCellPosi = lstleftEmptyCellsIDx[iSrcPosi]; lstleftEmptyCellsIDx.RemoveAt(iSrcPosi); //2.convert it to 2D array index. tagPosi posi; posi.iRow = Convert.ToInt32(iCellPosi / ci.iWIDthNum); posi.iCln = Convert.ToInt32(iCellPosi % ci.iWIDthNum); aryiimgIDxInCell[posi.iRow,posi.iCln].iimgIDx = iimgIDx; aryiimgIDxInCell[posi.iRow,posi.iCln].ai = ai; layoutRoot.Children.Insert(0,ai); GrID.SetRow(ai,posi.iRow); GrID.SetColumn(ai,posi.iCln); } voID ai_MouseEnter(object sender,MouseEventArgs e) { Imagetools.Controls.AnimatedImage ai = sender as Imagetools.Controls.AnimatedImage; //获取当前鼠标在哪个CELL内 int iRow = GrID.GetRow(ai); int iCln = GrID.GetColumn(ai); if (m_curMousePosi.iRow != iRow || m_curMousePosi.iCln != iCln) { m_curMousePosi.iRow = iRow; m_curMousePosi.iCln = iCln; //设置此CELL的悬停效果 rctHover.Rect = new Rect(m_faceInfo.iFaceSpan * iCln,iRow * m_faceInfo.iFaceSpan,m_faceInfo.iFaceSpan,m_faceInfo.iFaceSpan); System.Diagnostics.DeBUG.Writeline(string.Format("Entered {0}:{1}",iRow,iCln)); } } private voID layoutRoot_MouseLeave(object sender,MouseEventArgs e) { //鼠标已经不在容器内，悬停效果取消 m_curMousePosi.iRow = -1; rctHover.Rect = new Rect(0,0); } private voID pathBGHover_MouseleftbuttonUp(object sender,MousebuttonEventArgs e) { //获取当前鼠标所在CELL的位置 int ileft = m_curMousePosi.iCln * m_faceInfo.iFaceSpan; int itop = m_curMousePosi.iRow * m_faceInfo.iFaceSpan; if (rctSel0.Visibility == System.windows.Visibility.Collapsed) {//have not been selected,select it! Canvas.Settop(rctSel0,itop); Canvas.Setleft(rctSel0,ileft); rctSel0.WIDth = m_faceInfo.iFaceSpan; rctSel0.Height = m_faceInfo.iFaceSpan; rctSel0.Visibility = System.windows.Visibility.Visible; } else { tagPosi posiSel0 = new tagPosi() { iRow = Convert.ToInt32(Canvas.Gettop(rctSel0) / m_faceInfo.iFaceSpan),iCln = Convert.ToInt32(Canvas.Getleft(rctSel0) / m_faceInfo.iFaceSpan) }; //已经选中了两个，需要判断，这两个之间是否可连接 int ilinklineIDx = m_aryimgInfoPlacedInCell[m_curMousePosi.iRow,m_curMousePosi.iCln].IfConnectedTo(posiSel0); if (ilinklineIDx == -1) {//不连接 Canvas.Settop(rctSel0,itop); Canvas.Setleft(rctSel0,ileft); } else {//可连接，画连接线，然后暂停200ms并删除此两个表情 rctSel0.Visibility = System.windows.Visibility.Collapsed; rctHover.Rect = new Rect(0,0); tagPosi posiSel1 = new tagPosi() { iRow = m_curMousePosi.iRow,iCln = m_curMousePosi.iCln }; //draw line Drawpolyline(m_aryimgInfoPlacedInCell[m_curMousePosi.iRow,m_curMousePosi.iCln].lstlstlinked[ilinklineIDx]); System.Threading.Timer timer = null; timer = new System.Threading.Timer( new System.Threading.TimerCallback((object obj)=> { //取消定时器 timer.Change(System.Threading.Timeout.Infinite,System.Threading.Timeout.Infinite); layoutRoot.dispatcher.BeginInvoke(new Action(()=> { //earse line linkline.Visibility = System.windows.Visibility.Collapsed; //Remove the faces selected. m_aryimgInfoPlacedInCell[posiSel1.iRow,posiSel1.iCln].Clear(layoutRoot); m_aryimgInfoPlacedInCell[posiSel0.iRow,posiSel0.iCln].Clear(layoutRoot); //Rebuild the relation. while (FacesRelaBuild(m_cellsInfo) == 0) {//如果现在界面上已经没有可连接的表情了，则重排列 RelayoutCellFaces(m_lstActiveimgsIDx,m_faceInfo); } })); }) ); timer.Change(200,200); } } } private voID rctSel_MouseleftbuttonUp(object sender,MousebuttonEventArgs e) { //鼠标点击了已选中CELL,则取消选择状态 Rectangle rct = sender as Rectangle; rct.Visibility = System.windows.Visibility.Collapsed; } private voID rctSel_MouseEnter(object sender,MouseEventArgs e) { //鼠标在已经选中的矩形上，所以，悬停效果取消 rctHover.Rect = new Rect(0,0); //得到当前矩形的位置，以计算CELL位置 m_curMousePosi.iRow = Convert.ToInt32( Canvas.Gettop(sender as Rectangle) / m_faceInfo.iFaceSpan); m_curMousePosi.iCln = Convert.ToInt32( Canvas.Getleft(sender as Rectangle) / m_faceInfo.iFaceSpan); } /// <summary> /// 建立表情关系，核心函数！ /// 每一个表情都需要判断一下是否有连接存在 /// </summary> /// <returns>返回存在的可连接数</returns> int FacesRelaBuild(tagCellsInfo ci) { int ilinkedlineNum = 0; for (int i = 0; i < ci.iHeightNum; ++i) { for (int j = 0; j < ci.iWIDthNum; ++j) { ilinkedlineNum += CelllinkInfoAnalysis(i,j,ci); } } return ilinkedlineNum; } /// <summary> /// 分析一个表情的连接关系 /// </summary> /// <param name="iRow"></param> /// <param name="iColumn"></param> /// <param name="aryiimgIDxPlacedInCell"></param> /// <param name="ci"></param> /// <returns>返回存在的连接数</returns> int CelllinkInfoAnalysis(int iRow,int iColumn,] aryiimgIDxPlacedInCell,tagCellsInfo ci) { if (aryiimgIDxPlacedInCell[iRow,iColumn].iimgIDx == -1) return 0;//当前CELL为空，没有表情 List<tagPosi> lstPath = new List<tagPosi>(); lstPath.Add(new tagPosi() { iRow = iRow,iCln = iColumn }); //一个CELL有4个方向可以连线 int ilinkedlineNum = 0; //left if (iColumn > 0) ilinkedlineNum += Step( enmStepWay.wayleft,aryiimgIDxPlacedInCell[iRow,iColumn].iimgIDx,2,lstPath,iColumn - 1,aryiimgIDxPlacedInCell,ci); //up if(iRow>0) ilinkedlineNum += Step(enmStepWay.wayUp,iRow - 1,iColumn,ci); //right if (iColumn + 1 < ci.iWIDthNum) ilinkedlineNum += Step(enmStepWay.wayRight,iColumn + 1,ci); //down if (iRow + 1 < ci.iHeightNum) ilinkedlineNum += Step(enmStepWay.wayDown,iRow + 1,ci); return ilinkedlineNum; } int Step(enmStepWay stepWay,int iSrcimgIDx,int iChangedTimesAllowed,List<tagPosi> lstPathTrack,int iRow,tagCellsInfo ci) { if (iChangedTimesAllowed < 0) return 0; lstPathTrack.Add(new tagPosi() { iRow = iRow,iCln = iColumn }); //有没有碰到其它表情？ if (aryiimgIDxPlacedInCell[iRow,iColumn].iimgIDx != -1) {//碰到了 if (aryiimgIDxPlacedInCell[iRow,iColumn].iimgIDx == iSrcimgIDx) {//表情相同，则保存路径 aryiimgIDxPlacedInCell[iRow,iColumn].PushOnePath(lstPathTrack); lstPathTrack.RemoveAt(lstPathTrack.Count - 1); return 1; } lstPathTrack.RemoveAt(lstPathTrack.Count - 1); return 0; } //没有碰到其它表情，则继续延伸 int ilinkedlineNum = 0; //left if ( stepWay != enmStepWay.wayRight && iColumn > 0) ilinkedlineNum += Step( enmStepWay.wayleft,iSrcimgIDx,iChangedTimesAllowed + (stepWay == enmStepWay.wayleft ? 0 : -1),lstPathTrack,ci); //up if (stepWay != enmStepWay.wayDown && iRow > 0) ilinkedlineNum += Step(enmStepWay.wayUp,iChangedTimesAllowed + (stepWay == enmStepWay.wayUp ? 0 : -1),ci); //right if (stepWay != enmStepWay.wayleft && iColumn + 1 < ci.iWIDthNum) ilinkedlineNum += Step(enmStepWay.wayRight,iChangedTimesAllowed + (stepWay == enmStepWay.wayRight ? 0 : -1),ci); //down if (stepWay != enmStepWay.wayUp && iRow + 1 < ci.iHeightNum) ilinkedlineNum += Step( enmStepWay.wayDown,iChangedTimesAllowed + (stepWay == enmStepWay.wayDown ? 0 : -1),ci); lstPathTrack.RemoveAt(lstPathTrack.Count - 1); return ilinkedlineNum; } }}

 

希望大家看明白了 :)

 

至此为止，已经主要功能完成了！剩下的都是一些完善的功能，如：计时功能、计分功能...

总结

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

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