Silverlight+WCF 新手实例 象棋 游戏房间(十二)

加快手步,写多一篇,这节来创建游戏房间:

先上一张以前的房间图:

构成啊,就是上面文字,下面三个矩形框:

昨天调整了一下样式,看下新的房间图:

哪个好看点这个很难说的清了,不过新的图应用了新的brush画刷填充,当然了,你也可以用图片填充,后面可以教你怎么用图片,

当然了,为了好看,用图片也不为过的,去QQ游戏大厅截两张小图就搞定了,不过这步就留给大伙自己去截了。

现在开始代码了:

我们要创建游戏房间类了,不过这下我们不用新的类库,也不放在象棋库中,我们直接在Silverlight应用程序中,右键,添加文件夹,

起名:Code,在Code文件夹右键->添加类-》输入:GameRoom.cs [顺便把名称空间的XXX.Code下的.Code去掉]

 /// <summary>
    /// 游戏房间 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;//三个矩形框之间的间隔

说过属性,看代码:


Panel container;//外层容器,包括很多房间
        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,是不是很熟悉了,棋子库里都基本是这个定式的代码。

接下来就是要实现画房间了。其实和画棋子一个样,还是赋属性:

看看红色座位:


redChair = new Rectangle()//红色座位
            {
                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)
            };

 

接着是观众座位:


GradientStopCollection fillCollection = new GradientStopCollection();
            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, 0)
            };

 

再来是黑色座位:


blackChair = new Rectangle()
            {
                Width = redChair.Width,
                Height = redChair.Height,
                //这个是直接填充色,就是上面那正规的红蓝黑图
                //Fill = new SolidColorBrush(BlackPlayerInChair? Colors.Blue : Colors.Black),
                //这个是圆型的渐变色,从黑过度到透明。
                Fill = new RadialGradientBrush(RedPlayerInChair ? Colors.Blue : Colors.Black, Colors.Transparent),
                Margin = new Thickness(RoomWidth * 2 / 3 + gap / 2, redChair.Margin.Top, 0, 0)
            };

 

好了,座位都弄好了,最后剩下文字了:


TextBlock text = new TextBlock()
            {
                Foreground = new SolidColorBrush(Colors.Brown),
                Text = "房间 " + RoomID,
                FontFamily = new FontFamily("宋体"),
                FontSize = RoomHeight / 3,
                FontWeight = FontWeights.Bold,
                Margin = new Thickness(RoomWidth / 6, 0, 0, 0)
            };

 

好,文字和三个座位都有了,我们要创建房间,然后把文字和座位都Add进去。


room = new Canvas()
            {
                Width = RoomWidth,
                Height = RoomHeight,
                Margin = new Thickness(InitPoint.X, InitPoint.Y, 0, 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()));

 

这样我们登陆就后转到游戏房间去。

接着我们要在Room里面生成了一个房间:


public partial class Room : UserControl
    {
        public Room()
        {
            InitializeComponent();
            GameRoom gameRoom = new GameRoom(1, new Point(0,0), 120);
            gameRoom.DrawIn(LayoutRoot);
        }
    }

 

OK,按F5,运行,出现登陆框,随便输入昵称,点击登陆:

OK,效果出来了。

下节我们再添加一个Game类,来生成一批房间。

版权声明:本文原创发表于博客园,作者为路过秋天,原文链接:

http://www.cnblogs.com/cyq1162/archive/2010/07/12/1775715.html

时间: 2024-07-29 01:56:40

Silverlight+WCF 新手实例 象棋 游戏房间(十二)的相关文章

Silverlight+WCF 新手实例 象棋 游戏房间列表(十三)

热到飚血了... 上次创建了一房间了,现在要创建多个房间了. 我们像添加一个Chess类来创建很多棋子一样,现在创建一个Game类来创建很多房间: Code文件夹右键,添加新建项->类->Game.cs,同样的,名称空间去掉[.Code]   namespace NewChessProject {     /// <summary>     /// 游戏 by 路过秋天     /// </summary>    public class Game     {     

Silverlight+WCF 新手实例 象棋 获取房间状态列表更新(二十一)

在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示   上节是当有用户进入某个房间时,我的某个房间状态被通知,并被通知更新. 这节说说首次进入房间大厅时,我们自己创建了N个房间,默认都是初始状态的,这时我们需要获取服务端的所有已更新的房间状态, 下到本地之后,进行批量更新状态.   于是开始了,首先从服务端开始,我们要获取所有已更新的房间,于是到WCF服务端添加一个方法: 到IService.cs添加方法接口 [OperationContract] Dictionary<in

Silverlight+WCF 新手实例 象棋 主界面-事件区-游戏开始(二十七)

本专题出产简单原由: 一开始的初衷,只是想写个简单的单机BS人机对战版的,开始还下了点AI算法看看的: 但是写到最后,都写成了通讯版本的对战了,只因中间不小心看到了WCF的相关内容,顺便加了进来; 最后就定局了,反正新手实例,能加多点内容就加多点了. 关于原始初衷,后期再补上了.       好了,先上几个附加索引: 1:Silverlight+WCF 新手实例 象棋 在线演示 2:Silverlight+WCF 简单部署问题集 3:Silverlight4 ListBox bug 4:Silv

赶紧接着上一节:Silverlight+WCF 新手实例 象棋 主界面-实时聊天区(二十五) 这节我们实现上节没实现的纠结的进出房间的消息提示 我们清楚的知道,我们每个区都是一个用户控件,我们的在线用户进出时,得到聊天区域显示信息,这就涉及到用户控件之间的消息传递了。 在线用户区说:反正我是

赶紧接着上一节:Silverlight+WCF 新手实例 象棋 主界面-实时聊天区(二十五)  这节我们实现上节没实现的纠结的进出房间的消息提示 我们清楚的知道,我们每个区都是一个用户控件,我们的在线用户进出时,得到聊天区域显示信息,这就涉及到用户控件之间的消息传递了. 在线用户区说:反正我是没权直接去实时聊天区写东西,没办法,找中介委托设置一下了. 那谁是中介呢?委托谁呢?当然是衣食父母Index.xaml了,是它撑着整个家庭的. 好了,知道中介了,那我就签个委托书了: 回到OnlineUse

Silverlight+WCF 新手实例 象棋 房间状态更新(二十)

在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示   这节开始,标题里就去掉"回归WCF通讯应用"几字了.   上节我们成功实现了进入房间,服务端也收到用户进入房间的请求了,这节,我们服务端收到进入房间请求后,通知在房间大门外的人更新房间状态. 我们要增加一个回调方法,ICallBack接口那,忘记的人回去看看WCF通讯那几篇(十四到十七节). 方法如下,以前说过了,回调的方法是给客户端实现的,服务端只管调就行了: using System.ServiceMode

Silverlight+WCF 新手实例 象棋 回归WCF通讯应用-登陆(十八)

前四节,我们讲了通讯基础,从这节起,我们回归到项目中来,要将前面的WCF通讯知识应用进来. 之前的项目大伙没丢把,重新发下载地址:之前第3阶段代码:点此下载   我们为Chess项目的解决方案里,再添加WCF应用服务程序 由于Silverlight+WCF 新手实例 象棋 WCF通讯跨域(十五)已截图,所以这里不截图了. 步骤: 1.对着解决方案->右键->添加新建项目->选择WCF应用服务程序->输入:GameService 2.删除默认的IService1.cs和IServic

Silverlight+WCF 新手实例 象棋 该谁下棋-B下A停(三十)

在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示   上上一节,就是二十八节:Silverlight+WCF 新手实例 象棋 该谁下棋-A下B停(二十八)   我们实现了"开始"游戏后,对棋子的限制,A下B停 这节,我们要实现:B下A停,[同时,传递棋步,对方收到棋步,要反转棋步坐标,自动移动棋子] 所以呢,这节我们要实现的东西是比上上一节相对多一点.   少废话,开始了: 按流程来了,A移动棋子之后,要干点什么事呢? //-------这是一个AB同样的循环流程

Silverlight+WCF 新手实例 象棋 主界面-实时聊天区(二十五)

在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示 演示已更新到此节介绍:Silverlight+WCF 新手实例 象棋 介绍III(二十三)   本节连着Silverlight+WCF 新手实例 象棋 主界面-在线用户区(二十四) 发,主界面就不截图了,这节我们实现"实时聊天区": 这节内容几乎和上节一个样的逻辑 1:新建一个用户控件:就叫:Chat.xaml,用来在线聊天 2: 界面拖一个Border到Index.xaml,现在界面上有三个Border了,第三个

Silverlight+WCF 新手实例 象棋 主界面-棋谱-获取列表(三十八)

在线演示地址:Silverlight+WCF 新手实例 象棋 在线演示   在Silverlight+WCF 新手实例 象棋 主界面-棋谱-布局写谱(三十六)中,我们完成下棋双方的棋谱显示,这节,我们为观众增加棋子列表: 观众进入房间后,第一时间当然也要获取棋步列表了,不然进来干麻呢?你当这是聊天室啊,光聊天不看棋.   首先,当然是要在服务端添加一个获取棋步列表的接口方法了: WCF服务端,IService.cs:  /// <summary>     /// 服务端方法接口 by 路过秋天