flex 联机游戏开发 - 五子棋游戏:(一)游戏核心

刚看到flex做的东西的时候，一下子很怀念当年用applet编程的日子，applet真的算是互联网的美好时光之一，可惜在主流浏览器的绞杀下最终烟消云散，过了10年，adobe又把这东西拾起来做成了flex,而我，在羡慕adobe flash 98%的用户装机量的同时，也不得不选择了用flex来开发一些自己的应用，能信任silverlight吗，连微软都要风传收购adobe的时候?你能信任javafx吗，他自己历时10年都掌握不了主流的互联网浏览器，很意外oracle为什么不把firefox一起收购了。这样，。。这样。

Hello,wolrd是所有程序员的开始，五子棋游戏应该也算是所有联机游戏开发的开始吧，我今天用这个游戏来练练手，了解一下flex的主要功能，换肤技术等，力求用最真实的开发过程来展示开发中的问题与思考。

1) 巧妇难为无米之炊，先画一个棋盘吧，，我斩时希望这个棋盘基本素质是，横，竖 一些线条，另外，在每个线杀的交叉点上有一个默认的棋子。额外的素质是，1，棋盘的线条多少是可变的，2）棋子的点击半径是可变的。棋子的颜色是可变的。

好了。画棋盘。。

1) 五子棋棋盘

//棋子直径 
   private var radios:int=22; 
   //边间隔 
   private var padding:int=20; 
   //线条的多少，代表了五子棋的难度 
   private var totalsize:int=15; 
   //棋子的数组 
   private var boardArray:Array; 
   //默认的颜色，与背景色同， 
   private const DEFAULT_COLOR:SolidColor=new SolidColor(0xeeeeee,0); 
   //黑棋 
   private const BLACK_COLOR:SolidColor=new SolidColor(0x000000,1); 
   //白棋 
   private const WHITE_COLOR:SolidColor=new SolidColor(0xffffff,1); 
   //玩家一 
   private const PLAYER_RONE_TURN:int=0; 
   //玩家二 
   private const PLAYER_TWO_TURN:int=1; 
   //当前玩家 
   private var turn:int;

//y 轴的线条 
    for (var i:int=0;i<=totalsize;i++) 
    { 
     var line:Line=new Line(); 
     line.xFrom=0+padding; 
     line.xTo=board.width-padding; 
     line.y=i*(board.height-2*padding)/totalsize+padding; 
     line.stroke=new SolidColorStroke(0x000000,1,1,false); 
     board.addElement(line); 
    } 
    //x 轴的线条 
    for (var j:int=0;j<=totalsize;j++) 
    { 
     var line2:Line=new Line(); 
     line2.yFrom=0+padding; 
     line2.yTo=board.height-padding; 
     line2.x=j*(board.width-2*padding)/totalsize+padding; 
     line2.stroke=new SolidColorStroke(0x000000,1,1,false); 
     board.addElement(line2); 
    } 
    //默认的棋子， 
    for (var x:int=0;x<=totalsize;x++) 
    { 
     for (var y:int=0;y<=totalsize;y++) 
     { 
      var ellipse:Ellipse=new Ellipse(); 
      ellipse.width=radios; 
      ellipse.height=radios; 
      ellipse.x=x*(board.width-2*padding)/totalsize-radios/2+padding; 
      ellipse.y=y*(board.height-2*padding)/totalsize-radios/2+padding; 
      ellipse.fill=DEFAULT_COLOR; 
      board.addElement(ellipse); 
      boardArray[x][y]=ellipse; 
     } 
    }

棋盘的mxml文件中

<s:BorderContainer backgroundColor="#eeeeee" id="board" borderVisible="false"  verticalCenter="0" horizontalCenter="0" click="boardClick(event)" width="400" height="400"> 
</s:BorderContainer>

画出来的效果如图

2 五子棋事件

现在已经有锅了，开始上米，给棋盘添加点击事件，逻辑就是当用户点中上面的黑色的圆框时，我们就让这个圆框根据用户的角色变颜色。形成自己的棋子。点击后就将游戏当前玩家交给另一方。将上面那个棋盘的测试黑棋换成背景色就可以开始了。

protected function boardClick(event:MouseEvent):void{ 
    var posx:int=event.localX; 
    var posy:int=event.localY; 
    var clickEllipse:Ellipse; 
    for (var x:int=0;x<=totalsize;x++) 
    { 
     for (var y:int=0;y<=totalsize;y++) 
     { 
      var ellipse:Ellipse=boardArray[x][y] as Ellipse; 
      if (posx>=ellipse.x && posx<=(ellipse.x+radios)&&posy>=ellipse.y &&posy<=(ellipse.y+radios)) 
       { 
        clickEllipse=ellipse; 
        break; 
       } 
     } 
    } 
    if (clickEllipse==null) return; 
    if (clickEllipse.fill!=DEFAULT_COLOR) return; 
    if (turn==PLAYER_RONE_TURN) 
    { 
     clickEllipse.fill=BLACK_COLOR; 
     turn=PLAYER_TWO_TURN; 
    } 
    else 
    { 
     clickEllipse.fill=WHITE_COLOR; 
     turn=PLAYER_RONE_TURN; 
    } 
   }

效果如图。

3）五子棋胜负判断

现在，你如果跟你朋友下这个棋盘的话，把子填满也是分出胜负的，我们得加上一些判断胜负的条件，对于一个联机游戏，不涉及人工智能是比较简单的，当用户投子后我们只要判断用户的横，竖，斜4个方向是否有五个子连成一条线，有的话就表示用户胜利了。

在click事件的后部加上

if (isWinner()) 
    { 
     mx.controls.Alert.show("玩家"+turn+"记得比赛"); 
     initBoard(); 
    }

然后专心做isWinner()函数。我们可以通过暴力的方式获得当前ellipse的坐标值，但显然，代码就不容易让人理解，为了把视图与逻辑进行分离，我们需要引入另一个数组来定位用户下的棋的一个点，这个点包括四个值，x丝标，y坐标，棋子所属的玩家，还有一个圆。就命名为Qizhi吧。

public class Qizhi 
{ 
  public var x:int; 
  public var y:int; 
  public var turn:int; 
  public var ellipse:Ellipse; 
  public function Qizhi(x:int,y:int,turn:int,ellipse:Ellipse) 
  { 
   this.x=x; 
   this.y=y; 
   this.turn=turn; 
   this.ellipse=ellipse; 
  } 
}

click后的函数的第一次重构

protected function boardClick(event:MouseEvent):void{ 
    var posx:int=event.localX; 
    var posy:int=event.localY; 
    var clickQizhi:Qizhi; 
    for (var x:int=0;x<=totalsize;x++) 
    { 
     for (var y:int=0;y<=totalsize;y++) 
     { 
      var qizhi:Qizhi=boardArray[x][y] as Qizhi; 
      var ellipse:Ellipse=qizhi.ellipse as Ellipse; 
      if (posx>=ellipse.x && posx<=(ellipse.x+radios)&&posy>=ellipse.y &&posy<=(ellipse.y+radios)) 
       { 
        clickQizhi=qizhi; 
        break; 
       } 
     } 
    } 
    if (clickQizhi==null) return; 
    var clickEllipse:Ellipse=clickQizhi.ellipse as Ellipse; 
    if (clickQizhi.turn!=PLAYER_NONE) return; 
    if (turn==PLAYER_ONE_TURN) 
    { 
     clickQizhi.turn=PLAYER_ONE_TURN; 
     clickEllipse.fill=BLACK_COLOR; 
    } 
    else 
    { 
     clickQizhi.turn=PLAYER_TWO_TURN; 
     clickEllipse.fill=WHITE_COLOR; 
    } 
    if (isWinner(clickQizhi)) 
    { 
     mx.controls.Alert.show("玩家 "+turn+" 赢得比赛","恭喜你！"); 
     if (winArray.length>0) 
     { 
      for each(var item:Qizhi in winArray) 
      { 
       item.ellipse.fill=RED_COLOR; 
      } 
     } 
     board.removeEventListener(MouseEvent.CLICK,boardClick); 
     btnstart.enabled=true; 
     btnlose.enabled=false; 
     return; 
    } 
    if (turn==PLAYER_ONE_TURN) 
    { 
     turn=PLAYER_TWO_TURN; 
    } 
    else 
    { 
     turn=PLAYER_ONE_TURN; 
    } 
   }

判断胜负的寒素

private function isWinner(clickQizhi:Qizhi):Boolean { 
    //判断横向 
    if (xWinner(clickQizhi)) return true; 
    //判断横向 
    if (yWinner(clickQizhi)) return true; 
    //判断斜向 
    if (xy13Winner(clickQizhi)) return true; 
    if (xy24Winner(clickQizhi)) return true; 
    return false; 
   } 
   private function xWinner(clickQizhi:Qizhi):Boolean{ 
    winArray=new ArrayCollection(); 
    for (var xRight:int=clickQizhi.x+1;(xRight<=totalsize&&xRight<clickQizhi.x+5);xRight++) 
    { 
     var qizhiRight:Qizhi=boardArray[xRight][clickQizhi.y] as Qizhi; 
     if (qizhiRight.turn==clickQizhi.turn) 
     { 
      winArray.addItem(qizhiRight); 
     } 
     else 
     { 
      break; 
     } 
    } 
    for (var xLeft:int=clickQizhi.x-1;(xLeft>=0&&xLeft>clickQizhi.x-5);xLeft--) 
    { 
     var qizhiLeft:Qizhi=boardArray[xLeft][clickQizhi.y] as Qizhi; 
     if (qizhiLeft.turn==clickQizhi.turn) 
     { 
      winArray.addItem(qizhiLeft); 
     } 
     else 
     { 
      break; 
     } 
    } 
    if (winArray.length>=4) 
    { 
     winArray.addItem(clickQizhi); 
     return true; 
    } 
    return false; 
   } 
   private function yWinner(clickQizhi:Qizhi):Boolean{ 
    winArray=new ArrayCollection(); 
    var length:int=1; 
    for (var yRight:int=clickQizhi.y+1;(yRight<=totalsize&&yRight<clickQizhi.y+5);yRight++) 
    { 
     var qizhiBottom:Qizhi=boardArray[clickQizhi.x][yRight] as Qizhi; 
     if (qizhiBottom.turn==clickQizhi.turn) 
     { 
      winArray.addItem(qizhiBottom); 
     } 
     else 
     { 
      break; 
     } 
    } 
    for (var yLeft:int=clickQizhi.y-1;(yLeft>=0&&yLeft>clickQizhi.y-5);yLeft--) 
    { 
     var qizhiTop:Qizhi=boardArray[clickQizhi.x][yLeft] as Qizhi; 
     if (qizhiTop.turn==clickQizhi.turn) 
     { 
      winArray.addItem(qizhiTop); 
     } 
     else 
     { 
      break; 
     } 
    } 
    if (winArray.length>=4) 
    { 
     winArray.addItem(clickQizhi); 
     return true; 
    } 
    return false; 
   } 
   private function xy24Winner(clickQizhi:Qizhi):Boolean{ 
    winArray=new ArrayCollection(); 
    //第四象限 
    for (var yRight:int=clickQizhi.y+1;(yRight<=totalsize&&yRight<clickQizhi.y+5);yRight++) 
    { 
     if (clickQizhi.x+(yRight-clickQizhi.y)<=totalsize) 
     { 
      var qizhiRight:Qizhi=boardArray[clickQizhi.x+(yRight-clickQizhi.y)][yRight] as Qizhi; 
      if (qizhiRight.turn==clickQizhi.turn) 
      { 
       winArray.addItem(qizhiRight); 
      } 
      else 
      { 
       break; 
      } 
     } 
     else 
     { 
      break; 
     } 
    } 
    //第二象限 
    for (var yLeft:int=clickQizhi.y-1;(yLeft>=0&&yLeft>clickQizhi.y-5);yLeft--) 
    { 
     if (clickQizhi.x-yLeft>=0) 
     { 
      var qizhiLeft:Qizhi=boardArray[clickQizhi.x-(clickQizhi.x-yLeft)][yLeft] as Qizhi; 
      if (qizhiLeft.turn==clickQizhi.turn) 
      { 
       winArray.addItem(qizhiLeft); 
      } 
      else 
      { 
       break; 
      } 
     } 
     else 
     { 
      break; 
     } 
    } 
    if (winArray.length>=4) 
    { 
     winArray.addItem(clickQizhi); 
     return true; 
    } 
    return false; 
   } 
   private function xy13Winner(clickQizhi:Qizhi):Boolean{ 
    winArray=new ArrayCollection(); 
    //第三象限 
    for (var yRight:int=clickQizhi.y+1;(yRight<=totalsize&&yRight<clickQizhi.y+5);yRight++) 
    { 
     if (clickQizhi.x-(yRight-clickQizhi.y)>=0) 
     { 
      var qizhiBottom:Qizhi=boardArray[clickQizhi.x-(yRight-clickQizhi.y)][yRight] as Qizhi; 
      if (qizhiBottom.turn==clickQizhi.turn) 
      { 
       winArray.addItem(qizhiBottom); 
      } 
      else 
      { 
       break; 
      } 
     } 
     else 
     { 
      break; 
     } 
    } 
    //第一象限 
    for (var yLeft:int=clickQizhi.y-1;(yLeft>=0&&yLeft>clickQizhi.y-5);yLeft--) 
    { 
     if (clickQizhi.x+(clickQizhi.y-yLeft)<=totalsize) 
     { 
      var qizhiTop:Qizhi=boardArray[clickQizhi.x+(clickQizhi.y-yLeft)][yLeft] as Qizhi; 
      if (qizhiTop.turn==clickQizhi.turn) 
      { 
       winArray.addItem(qizhiTop); 
      } 
      else 
      { 
       break; 
      } 
     } 
     else 
     { 
      break; 
     } 
    } 
    if (winArray.length>=4) 
    { 
     winArray.addItem(clickQizhi); 
     return true; 
    } 
    return false; 
   }