我最近在从wpf转到SL,因此做了一些demo. 现在呢,我通过这个游戏开发教程来和大家一起领略SilverLight的魅力.
废话少说,开始吧O(∩_∩)O~.
(一) 通过Blend快速制作连连看的图标布局
1> 打开Blend3, 点击新建项目,选择SilverLight应用程序,工程命名为LLKDemo,如图:
2>默认建立的Page的宽高为640, 480。我们现在插入一个行数12,列数13的Grid,每格为40*40大小. (ps.: 肯定有人问,为什么不是13*13的Grid呢,建议你算算连连看所有的图标是否能消完. O(∩_∩)O~). 如图:
3>用cs或者Expression Design设计5个不同的图标,依次命名为icon1, icon2......,添加到项目中.(下面是我自己随便做,如果不符合各位的品味,请见谅.)
4>动态向我们刚刚插入的grid中的指定行列插入Image,代码如下:
Code
private
Image NewPng(int
col,int
row,string
path)
{
Image img = new
Image();
img.Stretch = Stretch.Fill;
img.source = new
BitmapImage(new
Uri(path,UriKind.Relative));
img.SetValue(Grid.ColumnProperty,col);
img.SetValue(Grid.RowProperty,row);
img.Name = (new
Point(col,row)).ToString(); //
img.Tag = path;
return
img;
}
5>初始化地图,代码如下:
Code
private
PointCollection _map = new
PointCollection();
private
int
_colCount = 13;
private
int
_rowCount = 12;
private
void
InitMap()
{
_map.Clear();
for
(int
col = 0; col < _colCount; coL++)
{
for
(int
row = 0; row < _rowCount; row++)
{
_map.Add(new
Point(col,row));
}
}
}
6>随机从地图中取到一对坐标,并将随机取到的Image插入到Grid的此行列中. 代码如下:
Code
private
void
InitAllPng()
{
InitMap();
_grid.Children.Clear();
Random randpng = new
Random();
Random randPoint = new
Random();
Point point = new
Point(-1,-1);
string
path = "";
int
count = _map.Count;
int
index = -1;
for
(int
i = 0; i < count / 2; i++)
{
path = "icon
" + (randpng.Next(1,5)).ToString() + ".png
";
index = randPoint.Next(_map.Count);
point = _map[index];
_map.RemoveAt(index);
_grid.Children.Add(NewPng((int
)point.X,(int
)point.Y,path));
index = randPoint.Next(_map.Count);
point = _map[index];
_map.RemoveAt(index);
_grid.Children.Add(NewPng((int
)point.X,path));
}
if
(count % 2 != 0)
{
point = _map[0];
_map.RemoveAt(0);
_grid.Children.Add(NewPng((int
)point.X,path));
}
}
private
Image NewPng(int
col,row)).ToString(); //
img.Tag = path;
return
img;
}
(注意: 每次从地图中取到坐标并插入Image后,把此坐标从地图中删除)
7>在MainPage构造中初始化所有图标. 代码如下:
Code
public
MainPage()
{
// 为初始化变量所必需
InitializeComponent();
InitAllPng();
}
8>按F5运行后,效果如下:
ok,这一节我们已经把连连看的地图制作出来了,下一节我将给大家介绍连连看的算法.