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

在上一章中，我们实现了下面中的第一点

 

  

 

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

 

 

OK，现在我们开始处理第二点功能。

 

要标识一个CELL里的表情，可以有几种方式：

a.在表情外面画个边框

b.在整个表情上加一个透明色

 

两种方式都应该可以，个人觉得b方式会更漂亮一些。所以，我们接下来按b的方式来处理。

 

思路如下：

鼠标点击后，得到当前点击的CELL，并计算出此CELL的位置、大小，然后据此填充一个矩形上去。

 

看slucFacesContainer.xaml中增加的代码

<Grid x:Name="layoutRoot" Background="White" MouseLeave="layoutRoot_MouseLeave"> <Grid.RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>ns> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> <RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Height="24" /> </Grid.RowDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>ns> <Grid.ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>ns> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> <ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>n Width="24" /> </Grid.ColumnDe<a href="/tag/Finitio/" target="_blank" class="keywords">Finitio</a>ns> <!--下面是<a href="/tag/zengjia/" target="_blank" class="keywords">增加</a>的<a href="/tag/daima/" target="_blank" class="keywords">代码</a> --> <Canvas x:Name="canvasBG" Grid.ColumnSpan="16" Grid.RowSpan="16"> <Path x:Name="pathBGHover" <a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>Thick<a href="/tag/nes/" target="_blank" class="keywords">nes</a>s="0" Fill="Red" OpacityMask="#70000000" MouseLeftButtonUp="pathBGHover_MouseLeftButtonUp"> <Path.Data> <!--鼠标悬停的CELL--> <RectangleGeometry x:Name="rctHover"/> </Path.Data> </Path> <!--第<a href="/tag/yige/" target="_blank" class="keywords">一个</a>选中的CELL--> <Rectangle x:Name="rctSel0" Visibility="Collapsed" <a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>Thick<a href="/tag/nes/" target="_blank" class="keywords">nes</a>s="2" Fill="Red" <a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>="Blue" OpacityMask="#70000000" MouseLeftButtonUp="rctSel_MouseLeftButtonUp" MouseEnter="rctSel_MouseEnter"/> <!--第二个选中的CELL--> <Rectangle x:Name="rctSel1" Visibility="Collapsed" <a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>Thick<a href="/tag/nes/" target="_blank" class="keywords">nes</a>s="2" Fill="Red" <a href="/tag/stroke/" target="_blank" class="keywords">stroke</a>="Blue" OpacityMask="#70000000" MouseLeftButtonUp="rctSel_MouseLeftButtonUp" MouseEnter="rctSel_MouseEnter"/> </Canvas> </Grid>

代码主要增加了一个Canvas 控件，我们会在需要的CELL画出一个矩形的填充块。

 

后台代码增加了下面一个变量，用于保存鼠标的位置

struct tagPosi { public int iRow; public int iCln; } ... /// <summary> /// 当前鼠标的CELL位置,如果其中的任一值是 -1，则表示无效 /// </summary> tagPosi m_curMousePosi;

 

在排版函数中增加进入表情CELL事件

/// <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(); //<a href="/tag/zengjia/" target="_blank" class="keywords">增加</a>下面一行 ai.MouseEnter += new MouseEventHandler(ai_MouseEnter); 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); } } }

上面增加了一行

ai.MouseEnter += new MouseEventHandler(ai_MouseEnter);

 

 其它增加的函数如下：

  void ai_MouseEnter(object sender,MouseEventArgs e) { Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Controls.AnimatedImage ai = sender as Imag<a href="/tag/eto/" target="_blank" class="keywords">eto</a>ols.Controls.AnimatedImage; //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>当前鼠标在哪个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的悬停<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a> rctHover.Rect = new Rect(m_faceInfo.iFaceSpan * iCln,iRow * m_faceInfo.iFaceSpan,m_faceInfo.iFaceSpan,m_faceInfo.iFaceSpan); Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Diagnostics.Debug.WriteLine(string.Format("Entered {0}:{1}",iRow,iCln)); } } private void layoutRoot_MouseLeave(object sender,MouseEventArgs e) { //鼠标已经不在容器内，悬停<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>取消 m_curMousePosi.iRow = -1; rctHover.Rect = new Rect(0,0); } private void pathBGHover_MouseLeftButtonUp(object sender,MouseButtonEventArgs e) { //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>当前鼠标所在CELL的位置 int iLeft = m_curMousePosi.iCln * m_faceInfo.iFaceSpan; int iTop = m_curMousePosi.iRow * m_faceInfo.iFaceSpan; if (rctSel0.Visibility == Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.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 = Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Visibility.Visible; } else { if (rctSel1.Visibility == Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Visibility.Visible) {//already selected two cell,remove the f<a href="/tag/irs/" target="_blank" class="keywords">irs</a>t one. Canvas.SetTop(rctSel0,Canvas.GetTop(rctSel1)); Canvas.SetLeft(rctSel0,Canvas.GetLeft(rctSel1)); } Canvas.SetTop(rctSel1,iTop); Canvas.SetLeft(rctSel1,iLeft); rctSel1.Width = m_faceInfo.iFaceSpan; rctSel1.Height = m_faceInfo.iFaceSpan; rctSel1.Visibility = Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Visibility.Visible; } } private void rctSel_MouseLeftButtonUp(object sender,MouseButtonEventArgs e) { //鼠标点击了已选中CELL,则取消选择状态 Rectangle rct = sender as Rectangle; if (rct.Equals(rctSel0)) { if (rctSel1.Visibility == Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Visibility.Visible) { //把第二个选中CELL的值给第<a href="/tag/yige/" target="_blank" class="keywords">一个</a>，然后把第二个清空 Canvas.SetTop(rctSel0,Canvas.GetLeft(rctSel1)); rctSel1.Visibility = Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Visibility.Collapsed; } else { rct.Visibility = Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Visibility.Collapsed; } } else { rct.Visibility = Sy<a href="/tag/stem/" target="_blank" class="keywords">stem</a>.Windows.Visibility.Collapsed; } } private void rctSel_MouseEnter(object sender,MouseEventArgs e) { //鼠标在已经选中的矩形上，所以，悬停<a href="/tag/xiaoguo/" target="_blank" class="keywords">效果</a>取消 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); }

 

 

最后的效果如下：

 

未完待续...