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文件中

  
 

 

画出来的效果如图

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     {
     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     {
     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     {
     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     {
     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;
   }