SilverLight 游戏开发《连连看》： （一）图片布局

我最近在从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, (int
)point.Y, path));
            }

            if
 (count % 2 != 0)
            {
                point = _map[0];
                _map.RemoveAt(0);
                _grid.Children.Add(NewPng((int
)point.X, (int
)point.Y, path));
            }
        }

        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;
        }

(注意: 每次从地图中取到坐标并插入Image后, 把此坐标从地图中删除)

7>在MainPage构造中初始化所有图标. 代码如下:

Code
public
 MainPage()
		{
			// 为初始化变量所必需

			InitializeComponent();

            InitAllPng();
		}

8>按F5运行后, 效果如下:

 

ok, 这一节我们已经把连连看的地图制作出来了 , 下一节我将给大家介绍连连看的算法.