Win8 连连看 第二季(1)
上次的连连看只是初学习的版本,现在在慢慢的优化中……,本次几乎重构。
思路如下:暂定游戏中图标有100个(10行10列),对每个小图标用用户控件进行展示(好处很多方便绑定数据,链接事件,实现动画效果等)。
用户控件UI代码
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<UserControl.Resources> <local:BoolVisibilityValueConverter x:Key="boolConverter"></local:BoolVisibilityValueConverter> <local:PicTypeImgSrcValueConverter x:Key="picTypeImgSrcConverter"></local:PicTypeImgSrcValueConverter> <Storyboard x:Name="sbShan"> <DoubleAnimation Storyboard.TargetName="transformImg" Storyboard.TargetProperty="ScaleX" From="0.8" To="1.2" AutoReverse="True" Duration="00:00:00.200" RepeatBehavior="forever"> </DoubleAnimation> <DoubleAnimation Storyboard.TargetName="transformImg" Storyboard.TargetProperty="ScaleY" From="0.8" To="1.2" AutoReverse="True" Duration="00:00:00.200" RepeatBehavior="forever"> </DoubleAnimation> </Storyboard> </UserControl.Resources> <Grid> <Image Source="{Binding PicType, Converter={StaticResource picTypeImgSrcConverter }}" Visibility="{Binding IsAlive, Converter={StaticResource boolConverter}}"> <Image.RenderTransform> <ScaleTransform x:Name="transformImg"></ScaleTransform> </Image.RenderTransform> </Image> </Grid>
给图片绑定了两个属性一个PicType即图片路径,通过数据转换进行
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class PicTypeImgSrcValueConverter:IValueConverter { //Model到UI的转换 public object Convert(object value, Type targetType, object parameter, string language) { int picType = (int)value; string fileName = "ms-appx:///Images/" + picType + ".png"; return new BitmapImage(new Uri(fileName)); } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } }
绑定另外一个属性是图片的Visibility True和False
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
//Model到UI的转换 public object Convert(object value, Type targetType, object parameter, string language) { bool b = (bool)value; return b ? Visibility.Visible : Visibility.Collapsed; } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); }
每个图片绑定实体类为
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class LLKBlock:INotifyPropertyChanged { private void FirePropertyChanged(string PropertyName) { if (PropertyChanged != null) { PropertyChanged(this,new PropertyChangedEventArgs(PropertyName)); } } public event PropertyChangedEventHandler PropertyChanged; private int x; public int X { get { return x; } set { x = value; FirePropertyChanged("X"); } } private int y; public int Y { get { return y; } set { y=value; FirePropertyChanged("Y"); } } private bool isAlive; public bool IsAlive { get { return isAlive; } set { isAlive=value; FirePropertyChanged("IsAlive"); } } private int picType; public int PicType { get { return picType; } set { picType=value; FirePropertyChanged("PicType"); } } }
要继承INotifyPropertyChanged这个接口,实现接口,并定义一个方法向客户端发出某一属性值已更改的通知。
X,Y即绑定10行10列的列和行,相当于坐标化,IsAlive就是绑定到Image是否显示的Visibility,PicType就是将绑定图片路径它为Int类型,那么我们就需要将其进行转换成可以进行绑定的实际图片路径。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class PicTypeImgSrcValueConverter:IValueConverter { //Model到UI的转换 public object Convert(object value, Type targetType, object parameter, string language) { int picType = (int)value; string fileName = "ms-appx:///Images/" + picType + ".png"; return new BitmapImage(new Uri(fileName)); } public object ConvertBack(object value, Type targetType, object parameter, string language) { throw new NotImplementedException(); } }
并对图片的X,Y设置了动画效果。
上面主要是设置好了一个图片的效果。
接下来是进行对图片进行组合成连连看游戏图集。(画10行10列,将每个图片塞到每个表格中。)
for (int i = 0; i < 10; i++) { RowDefinition rowDef = new RowDefinition(); gridGameField.RowDefinitions.Add(rowDef); } for (int i = 0; i < 10; i++) { ColumnDefinition colDef = new ColumnDefinition(); gridGameField.ColumnDefinitions.Add(colDef); } for (int i = 0; i < 10; i++) { for (int j = 0; j < 10; j++) { LLKImage llkImg = new LLKImage(); llkImg.DataContext = map[i, j]; llkImg.Tapped+=llkImg_Tapped; gridGameField.Children.Add(llkImg); Grid.SetColumn(llkImg, i); Grid.SetRow(llkImg, j); } }
最重要的就是对点击图片是否匹配通过算法进行处理。这里主要是通过判断两个图块之间是否有阻隔物为依据,进行组合。
1.最简单的一次直线相连(一条直线相连):两个点的横坐标或者纵坐标相等(且不是一个坐标点),并且中间没有任何的阻隔物。
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public bool IsDirectConnect(LLKBlock b1, LLKBlock b2) { if (b1.X == b2.X) { ///不判断b1,b2本身,判断两个格子之间的 for (int i = Math.Min(b1.Y, b2.Y) + 1; i < Math.Max(b1.Y, b2.Y); i++) { if (data[b1.X, i].IsAlive) { return false; } } return true; } else if (b1.Y == b2.Y) { for (int i = Math.Min(b1.X, b2.X) + 1; i < Math.Max(b1.X, b2.X); i++) { if (data[i, b1.Y].IsAlive) { return false; } } return true; } else { return false; } }
每个If返回为True则代表两点之间没有没有阻隔物,或者说两点之间的图标Visibility都会False。
2.两个图案可以一次折线相连(两条直线相连):他们横坐标或者纵坐标都不相等。是通过两个图块点的横纵坐标现相连,形成的矩形,通过矩形的另外两点与这两个图块之间是否有阻隔物,(依据一次直线相连)来判断两个图块通过一次折线是否可以相连。
3.两个图案可以两次折线相连(三条直线相连):……可以参考上面1和2两点扩展一下。