转帖地址:http://www.cnblogs.com/cyq1162/archive/2010/07/12/1775715.html
加快手步,写多一篇,这节来创建游戏房间:
先上一张以前的房间图:
构成啊,就是上面文字,下面三个矩形框:
昨天调整了一下样式,看下新的房间图:
哪个好看点这个很难说的清了,不过新的图应用了新的brush画刷填充,当然了,你也可以用图片填充,后面可以教你怎么用图片,
当然了,为了好看,用图片也不为过的,去QQ游戏大厅截两张小图就搞定了,不过这步就留给大伙自己去截了。
现在开始代码了:
我们要创建游戏房间类了,不过这下我们不用新的类库,也不放在象棋库中,我们直接在Silverlight应用程序中,右键,添加文件夹,
起名:Code,在Code文件夹右键->添加类-》输入:GameRoom.cs [顺便把名称空间的XXX.Code下的.Code去掉]
/// 游戏房间 by 路过秋天
/// </summary>
public class GameRoom
{
}
RoomWidth:房间的宽
RoomHeight: 房间的高
InitPoint:房间的位置,会创建好多个的,像棋子一样,所以总有位置的。
RoomID:房间的ID
RedplayerInChair:红色座位上是不是有人
BlackPlayerInChair:黑色座位上是不是有人
Panel container;//最外层的窗口,所以的房间都被添加到这里
Canvas room;//房间,里成包括文字和三个矩形框。
Rectangle redChair;//红色座位
Rectangle blackChair;//黑色座位
Rectangle spectatorChair;//旁边观座位
public int gap = 8;//三个矩形框之间的间隔
Canvas room; // 房间
public int gap = 8 ; // 座位的间隔
Rectangle redChair; // 红色座位
Rectangle blackChair; // 黑色座位
Rectangle spectatorChair; // 旁观者座位
/// <summary>
/// 房间的位置,会创建好多个的,像棋子一样,所以总有位置的
/// </summary>
public Point InitPoint
{
get ;
set ;
}
/// <summary>
/// 房间的宽
/// </summary>
public int RoomWidth
{
get ;
set ;
}
/// <summary>
/// 房间的高
/// </summary>
public int RoomHeight
{
get ;
set ;
}
/// <summary>
/// 房间编号
/// </summary>
public int RoomID
{
get ;
set ;
}
/// <summary>
/// 红色座位有人
/// </summary>
public bool RedplayerInChair
{
get ;
set ;
}
/// <summary>
/// 黑色座位有人
/// </summary>
public bool BlackPlayerInChair
{
get ;
set ;
}
public GameRoom( int roomID,Point location, int width)
{
RoomWidth = width;
RoomHeight = RoomWidth * 2 / 3 ;
RoomID = roomID;
InitPoint = location;
}
public void DrawIn(Panel control)
{
container = control;
Draw();
}
private void Draw()
{
// 这里实现画房间了
}
在这里,我让房间的高=宽的三分之二。这样是因为下面刚好三个座位,而高又分成上面文字下面座位,所以取2/3方便计算。
除了构造函数,还是那个DrawIn和Draw,是不是很熟悉了,棋子库里都基本是这个定式的代码。
看看红色座位:
{
Width = RoomWidth / 3 - gap,
Height = RoomWidth / 3 - gap,
// 这个是直接填充色,就是上面那正规的红蓝黑图
// Fill = new SolidColorBrush(RedplayerInChair?Colors.Blue:Colors.Red),
// 这个是激变色,从红过度到透明,一个圆圈型的。
Fill = new RadialGradientBrush(RedplayerInChair ? Colors.Blue : Colors.Red, Colors.Transparent),
// 你还可以通过ImageBrush来填充图片,这里留给大伙去实现了。
// 下面是房间的位置的计算。
Margin = new Thickness(gap / 2 , + RoomHeight / 2 + gap / 2 , 0 , 0 )
};
接着是观众座位:
fillCollection.Add( new GradientStop(){ Color = Colors.Red, Offset = 0 });
fillCollection.Add( new GradientStop(){ Color = Colors.Black,Offset = 0.7 });
LinearGradientBrush brush = new LinearGradientBrush(fillCollection, 0 ); // 线条渐变色,从红到黑色。
spectatorChair = new Rectangle()
{
Width = RoomWidth / 3 ,
Height = RoomWidth / 3 ,
// 这个是直接填充色,就是上面那正规的红蓝黑图
// Fill = new SolidColorBrush(Color.Blue),
Fill = brush, // 线型的渐变色
Margin = new Thickness(RoomWidth / 3 , RoomHeight / 2 , 0 )
};
再来是黑色座位:
{
Width = redChair.Width,
Height = redChair.Height,
// 这个是直接填充色,就是上面那正规的红蓝黑图
// Fill = new SolidColorBrush(BlackPlayerInChair? Colors.Blue : Colors.Black),
// 这个是圆型的渐变色,从黑过度到透明。
Fill = new RadialGradientBrush(RedplayerInChair ? Colors.Blue : Colors.Black,
Margin = new Thickness(RoomWidth * 2 / 3 + gap / 2 , redChair.Margin.Top, 0 )
};
好了,座位都弄好了,最后剩下文字了:
好,文字和三个座位都有了,我们要创建房间,然后把文字和座位都Add进去。
{
Width = RoomWidth,
Height = RoomHeight,
Margin = new Thickness(InitPoint.X, InitPoint.Y, 0 ),
Background = new SolidColorBrush(Colors.LightGray),
Opacity = 0.8
};
room.Children.Add(redChair);
room.Children.Add(blackChair);
room.Children.Add(spectatorChair);
room.Children.Add(text);
container.Children.Add(room);
当然最后就是把房间放到大容器里了。
我们Silverlight应用程序->右键-》添加新建项->Silverlight用户控件->Room.xaml
接着我们修改登陆页的转向:
((App)(Application.Current)).RedirectTo( new MainPage());
改成为:
((App)(Application.Current)).RedirectTo( new Room()));
这样我们登陆就后转到游戏房间去。
{
public Room()
{
InitializeComponent();
GameRoom gameRoom = new GameRoom( 1 , new Point( 0 , 0 ), 120 );
gameRoom.DrawIn(LayoutRoot);
}
}
OK,按F5,运行,出现登陆框,随便输入昵称,点击登陆:
OK,效果出来了。