flex 联机游戏开发 - 五子棋游戏:(二)人性化选择

来源：互联网发布：全球社科类期刊知乎编辑：程序博客网时间：2024/06/10 16:52

通过前面的练习：flex 联机游戏开发 - 五子棋游戏:(一)游戏核心我们已经将五子棋的核心功能做出来。现在，我们做一些逻辑性不重要但对软件开发至关重要的东西，用户体验。flex是flash的一种升华，也是面向编程人员的一种语言，他本身就提供了良好的用户体验，我这儿将更进一步，将这个游戏做的更能让用户有身临其境的感觉。我将结合游戏的实际情况对以下几个主题进行重点描述。

关于用户体验，各有各的解释，但我经常见到一些程序员因为自身美化能力的不足，将一些程序美化的不成样子，真的不如直接api提供的东西好看，失败的类子很多，这也正是程序人员要与美工人员进行沟通合作的原因。

1) 让用户有成就感

现在，我尝试着在程序中加入一些用户基本信息的功能，同时加入积分功能，让用户下完一盘后能够得到于些虚拟的奖赏。最后看起来应该是这个样子

在漫长而稍显枯燥的编程生涯中，我和团队经常会想出各种各样的法子来寻开心，比如说，在测试阶段我软件的用户基本就是美女团队，从早期的王祖贤，周慧敏到萧蔷，张柏枝，现在主要是林志玲了。男女搭配，干活不累，真的，测试工作轻松了许多。不信你试试。

好了，设计一个类。userVO.

[Bindable]
public class UserVO
{
  public var win:int;
  public var lost:int;
  public var score:int;
  public var points:int;

  public var uid:int=-1;
  public var picture:String;
  public var name:String;


}

这个类设计成绑定的，这是因为我们在下游戏的时候就不用费心去处理显示的内容了。添加两个用户

private function createUser():void {
    userArray=new ArrayCollection();
    var user:UserVO=new UserVO();
    user.name="张柏枝";
    user.picture="assets/icons/zbz.jpg";
    user.score=0;
    user.win=0;
    user.lost=0;
    user.points=250;
    userArray.addItem(user);
    var user2:UserVO=new UserVO();
    user2.name="阿娇";
    user2.picture="assets/icons/aj.jpg";
    user2.score=0;
    user2.win=0;
    user2.lost=0;
    user2.points=290;
    userArray.addItem(user2);

   }

将类绑定到list进行显示

<mx:List borderVisible="false" width="100%" height="100%" dataProvider="{userArray}">
    <mx:itemRenderer>
     <fx:Component>

      <mx:VBox width="100%" height="100%">
       <mx:Image source="{ data.image }" width="90" height="90"/>
       <s:HGroup width="100%">
        <s:Label text="姓名：" />
        <s:Label text="{data.name}" width="100%" />
       </s:HGroup>
       <s:HGroup width="100%">
        <s:Label text="金币：" />
        <s:Label text="￥{data.points} " width="100%" />
       </s:HGroup>

       <s:HGroup width="100%">
        <s:Label text="积分：{data.score" />
       </s:HGroup>

       <s:HGroup width="100%">
        <s:Label text="胜：{data.win} 负：{data.lost}" />
       </s:HGroup>
      </mx:VBox>
     </fx:Component>
    </mx:itemRenderer>
   </mx:List>

加入开始，投降这常规的逻辑处理。使棋能够下完一盘接一盘：），杀个你死我活为止。

<s:Button id="btnstart" label="开始" enabled="true" click="button1_clickHandler(event)"/>
<s:Button id="btnlose" label="投降" enabled="false" click="button2_clickHandler(event)"/>

2)加入计时器让用户之间能够更好的合作

计时器在玩家之间互相转移，当一个玩家完成下棋时交给另一个玩家，如果在指定的时间内没有完成下棋，则将视为自动放弃下子，系统将把当前的游戏控制权交给对方

默认为1分30秒

//时间限制的timer
            private var timer:Timer;

            private var h_num:int=0;
            private var m_num:int=1;
            private var s_num:int=30;

//计时器功能函数

private function onTimer(event:TimerEvent):void
            {
                 s_num = s_num - 1;

                 if ((s_num == -1) && (m_num > 0))
                 {
                         m_num = m_num - 1;
                         s_num = 59;
                 }
                 if ((m_num == 0) && (h_num > 0))
                {
                         h_num = h_num -1;
                        m_num = 59;
                    s_num = 59;
                }
                if (s_num < 0)
                 {
                         s_num = 0;
                         timer.stop();
                         Alert.show("计时完成!","信息");
                 }

                 var hh:String;
                 var mm:String;
                 var ss:String;
                 hh = (h_num < 10) ? "0" + h_num.toString() : h_num.toString();
                 mm = (m_num < 10) ? "0" + m_num.toString() : m_num.toString();
                 ss = (s_num < 10) ? "0" + s_num.toString() : s_num.toString();
                outtime.text = hh + ":" + mm + ":" + ss;
            }

在用户点击后与游戏开始后调用

if (timer.running)
                {
                    timer.stop();
                }
                resetTimer();
                timer.start();

现在，当用户下棋的时候，界面就是这样子的了。

3）让用户界面更有真实感

暂时我并不打算替换这个项目的主题让主界面变得更美观，因为在我的想象中这个游戏的后期制作的路还很长，你将在以后的章节中看到如何制作一款漂亮的主题。我现在只是想让棋盘，棋子这些东西更漂亮些。更具有真实感，先来看棋盘吧，我想背景用一个木纹似乎更有想象的余地。那就上google上先找一个木纹吧。

//棋盘背景
   [Embed("assets/icons/mw1.gif")]
   protected const BoardChess:Class;
   private var BOARD_IMG:BitmapFill = new BitmapFill();

//程序初始化事件中加上

    BOARD_IMG.source=BoardChess;
    BOARD_IMG.fillMode = BitmapFillMode.REPEAT;
    board.backgroundFill=BOARD_IMG;

同理，我们也可以让棋子更漂亮些，只是在用户点周的时候用颜色填充变成按图形填充。

if (turn==PLAYER_ONE_TURN)
    {
     clickQizhi.turn=PLAYER_ONE_TURN;
     //clickEllipse.fill=BLACK_COLOR;
     clickEllipse.fill=BLACK_IMG;
    }
    else
    {
     clickQizhi.turn=PLAYER_TWO_TURN;
     //clickEllipse.fill=WHITE_COLOR;
     clickEllipse.fill=WHITE_IMG;

    }

现在，一个可以拿来下棋的单机版五子棋游戏变完成了。下一节我将介绍如何把这个单机游戏变成一个联机游戏。

为了表示对您更跟踪到这儿的奖励，你可以点击这儿玩玩这个游戏，