通過前面的練習：flex 聯(lián)機游戲開發(fā) - 五子棋游戲:(一)游戲核心 我們已經(jīng)將五子棋的核心功能做出來?，F(xiàn)在，我們做一些邏輯性不重要但對軟件開發(fā)至關重要的東西，用戶體驗。flex是flash的一種升華，也是面向編程人員的一種語言，他本身就提供了良好的用戶體驗，我這兒將更進一步，將這個游戲做的更能讓用戶有身臨其境的感覺。我將結合游戲的實際情況對以下幾個主題進行重點描述。

關于用戶體驗，各有各的解釋，但我經(jīng)常見到一些程序員因為自身美化能力的不足，將一些程序美化的不成樣子，真的不如直接api提供的東西好看，失敗的類子很多，這也正是程序人員要與美工人員進行溝通合作的原因。

1) 讓用戶有成就感

現(xiàn)在，我嘗試著在程序中加入一些用戶基本信息的功能，同時加入積分功能，讓用戶下完一盤后能夠得到于些虛擬的獎賞。最后看起來應該是這個樣子

在漫長而稍顯枯燥的編程生涯中，我和團隊經(jīng)常會想出各種各樣的法子來尋開心，比如說，在測試階段我軟件的用戶基本就是美女團隊，從早期的王祖賢，周慧敏到蕭薔，張柏枝，現(xiàn)在主要是林志玲了。男女搭配，干活不累，真的，測試工作輕松了許多。不信你試試。

好了，設計一個類。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>

加入開始，投降這常規(guī)的邏輯處理。使棋能夠下完一盤接一盤：），殺個你死我活為止。

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

2)加入計時器讓用戶之間能夠更好的合作

計時器在玩家之間互相轉移，當一個玩家完成下棋時交給另一個玩家，如果在指定的時間內沒有完成下棋，則將視為自動放棄下子，系統(tǒng)將把當前的游戲控制權交給對方

默認為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;

//計時器功能函數(shù)

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();

現(xiàn)在，當用戶下棋的時候，界面就是這樣子的了。

3）讓用戶界面更有真實感

暫時我并不打算替換這個項目的主題讓主界面變得更美觀，因為在我的想象中這個游戲的后期制作的路還很長，你將在以后的章節(jié)中看到如何制作一款漂亮的主題。我現(xiàn)在只是想讓棋盤，棋子這些東西更漂亮些。更具有真實感，先來看棋盤吧，我想背景用一個木紋似乎更有想象的余地。那就上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; 
    }

現(xiàn)在，一個可以拿來下棋的單機版五子棋游戲變完成了。下一節(jié)我將介紹如何把這個單機游戲變成一個聯(lián)機游戲。

為了表示對您更跟蹤到這兒的獎勵，你可以 點擊這兒 玩玩這個游戲，