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

通过前面的练习：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; 
    }

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

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