Win8 连连看 第二季(1)
上次的连连看只是初学习的版本，现在在慢慢的优化中……，本次几乎重构。
思路如下：暂定游戏中图标有100个（10行10列），对每个小图标用用户控件进行展示（好处很多方便绑定数据，链接事件，实现动画效果等）。
用户控件UI代码
<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即图片路径，通过数据转换进行
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
//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();
}每个图片绑定实体类为
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类型，那么我们就需要将其进行转换成可以进行绑定的实际图片路径。
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.最简单的一次直线相连（一条直线相连）：两个点的横坐标或者纵坐标相等（且不是一个坐标点），并且中间没有任何的阻隔物。
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两点扩展一下。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2012-11-27 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
