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

 

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

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

 

 

 

 

我这样考虑寻路功能：

 

对于一个表情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_cellsInfo, m_faceInfo); //放好后，需要生成表情之间的关联图！ while (FacesRelaBuild(m_cellsInfo) == 0) { RelayoutCellFaces(m_lstActiveImgsIdx, m_cellsInfo, 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,tagCellsInfo ci, 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, lstNeedFillCellIdx, m_aryImgInfoPlacedInCell, lstAIsCanReuse, ci, fi); PutImg2CellContainer(lstImgsIdx[iImgAryIdx], r, lstNeedFillCellIdx, m_aryImgInfoPlacedInCell, lstAIsCanReuse, ci, 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,tagCellsInfo ci,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, lstNeedFillCellIdx, ci, 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, tagCellsInfo ci, 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, 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, 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_cellsInfo, 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, 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,m_aryImgInfoPlacedInCell,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, tagFaceInfoInCell[,] 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, iRow, iColumn - 1, aryiImgIdxPlacedInCell, ci); //up if(iRow>0) iLinkedLineNum += Step(enmStepWay.wayUp, aryiImgIdxPlacedInCell[iRow, iColumn].iImgIdx, 2, lstPath, iRow - 1, iColumn, aryiImgIdxPlacedInCell, ci); //right if (iColumn + 1 < ci.iWidthNum) iLinkedLineNum += Step(enmStepWay.wayRight, aryiImgIdxPlacedInCell[iRow, iColumn].iImgIdx,2, lstPath, iRow, iColumn + 1, aryiImgIdxPlacedInCell, ci); //down if (iRow + 1 < ci.iHeightNum) iLinkedLineNum += Step(enmStepWay.wayDown, aryiImgIdxPlacedInCell[iRow, iColumn].iImgIdx,2, lstPath, iRow + 1, iColumn, aryiImgIdxPlacedInCell, ci); return iLinkedLineNum; } int Step(enmStepWay stepWay, int iSrcImgIdx,int iChangedTimesAllowed, List<tagPosi> lstPathTrack, int iRow, int iColumn, tagFaceInfoInCell[,] aryiImgIdxPlacedInCell, 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, iRow, iColumn - 1, aryiImgIdxPlacedInCell, ci); //up if (stepWay != enmStepWay.wayDown && iRow > 0) iLinkedLineNum += Step(enmStepWay.wayUp,iSrcImgIdx, iChangedTimesAllowed + (stepWay == enmStepWay.wayUp ? 0 : -1), lstPathTrack, iRow - 1, iColumn, aryiImgIdxPlacedInCell, ci); //right if (stepWay != enmStepWay.wayLeft && iColumn + 1 < ci.iWidthNum) iLinkedLineNum += Step(enmStepWay.wayRight,iSrcImgIdx, iChangedTimesAllowed + (stepWay == enmStepWay.wayRight ? 0 : -1), lstPathTrack, iRow, iColumn + 1, aryiImgIdxPlacedInCell, ci); //down if (stepWay != enmStepWay.wayUp && iRow + 1 < ci.iHeightNum) iLinkedLineNum += Step( enmStepWay.wayDown, iSrcImgIdx, iChangedTimesAllowed + (stepWay == enmStepWay.wayDown ? 0 : -1), lstPathTrack, iRow + 1, iColumn, aryiImgIdxPlacedInCell, ci); lstPathTrack.RemoveAt(lstPathTrack.Count - 1); return iLinkedLineNum; } } }

 

希望大家看明白了 :)

 

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