SilverLight 游戏开发《连连看》: (一)图片布局
2010-03-25 01:38
393 查看
我最近在从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 , 代码如下:
5>初始化地图, 代码如下:
6>随机从地图中取到一对坐标, 并将随机取到的Image插入到Grid的此行列中. 代码如下:
(注意: 每次从地图中取到坐标并插入Image后, 把此坐标从地图中删除)
7>在MainPage构造中初始化所有图标. 代码如下:
8>按F5运行后, 效果如下:
ok, 这一节我们已经把连连看的地图制作出来了 , 下一节我将给大家介绍连连看的算法.
本文出自 “木子纵横” 博客,请务必保留此出处http://muzizongheng.blog.51cto.com/856912/1333181
废话少说, 开始吧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, 这一节我们已经把连连看的地图制作出来了 , 下一节我将给大家介绍连连看的算法.
本文出自 “木子纵横” 博客,请务必保留此出处http://muzizongheng.blog.51cto.com/856912/1333181
相关文章推荐
- SilverLight 游戏开发《连连看》: (一)图片布局
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四十七)远距离单体攻击与单体魔法
- 开发手机rpg类型游戏用素材合集,人物行走图片
- Swift3游戏开发(spritekit)如何使用多个动作在一张的图片
- XNA Game 类方法执行顺序和移动的图片,Windows Phone 游戏开发
- 一起谈.NET技术,Silverlight 游戏开发小技巧:传说中的透视跑马灯
- 一起谈.NET技术,Silverlight 游戏开发小技巧:轨迹跟随效果
- 一起谈.NET技术,Silverlight 游戏开发小技巧:技能冷却效果2(Cooldown)2
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十七)战斗前夜之构建动态障碍物系统
- IOS 开发openGL游戏所需图片整合工具 TexturePacker
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十八) 经典式属性设计及完美的物理攻击系统
- win8 开发之旅(1) --连连看游戏开发 前奏
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十九) 人工智能(AI)之追踪者
- 游戏开发工具之纹理打包器-2.打开文件夹遍历指定格式的图片,以及显示到tree控件上
- Qt 游戏开发(08) - 为游戏设置图片
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(四十一)制作精美的Mini地图①
- Unity游戏开发图片纹理压缩方案
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十二)重构 – 让代码插上翅膀自由飞翔
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十三)自适应性窗口化与全屏化(WPF Only)
- Silverlight C# 游戏开发:Balder的3D世界