用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.RowDefinitions> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> <RowDefinition Height="24" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> <ColumnDefinition Width="24" /> </Grid.ColumnDefinitions> <!--下面是增加的代码 --> <Canvas x:Name="canvasBG" Grid.ColumnSpan="16" Grid.RowSpan="16"> <Path x:Name="pathBGHover" StrokeThickness="0" Fill="Red" OpacityMask="#70000000" MouseLeftButtonUp="pathBGHover_MouseLeftButtonUp"> <Path.Data> <!--鼠标悬停的CELL--> <RectangleGeometry x:Name="rctHover"/> </Path.Data> </Path> <!--第一个选中的CELL--> <Rectangle x:Name="rctSel0" Visibility="Collapsed" StrokeThickness="2" Fill="Red" Stroke="Blue" OpacityMask="#70000000" MouseLeftButtonUp="rctSel_MouseLeftButtonUp" MouseEnter="rctSel_MouseEnter"/> <!--第二个选中的CELL--> <Rectangle x:Name="rctSel1" Visibility="Collapsed" StrokeThickness="2" Fill="Red" Stroke="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> /// <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.MouseEnter += new MouseEventHandler(ai_MouseEnter); ai.Source = 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) { 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 { if (rctSel1.Visibility == System.Windows.Visibility.Visible) {//already selected two cell, remove the first 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 = System.Windows.Visibility.Visible; } } private void rctSel_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) { //鼠标点击了已选中CELL,则取消选择状态 Rectangle rct = sender as Rectangle; if (rct.Equals(rctSel0)) { if (rctSel1.Visibility == System.Windows.Visibility.Visible) { //把第二个选中CELL的值给第一个，然后把第二个清空 Canvas.SetTop(rctSel0, Canvas.GetTop(rctSel1)); Canvas.SetLeft(rctSel0, Canvas.GetLeft(rctSel1)); rctSel1.Visibility = System.Windows.Visibility.Collapsed; } else { rct.Visibility = System.Windows.Visibility.Collapsed; } } else { 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); }

 

 

最后的效果如下：

 

未完待续...