flex 联机游戏开发 - 四国军棋游戏:(二)棋盘棋子

玩了太多年的四国游戏，现在，我打算做个四国游戏的flex版，下面的文章与代码是边做边写的，所以，当我贴出来的时候，说不定我已经将代码进行重构了，但是，如果你也是一名开发者，我想，设计思路总是对你有好处费参考意义的。

想知道我爱四国的多深，看看引子里的那个文章就知道了。你也可以点击这儿查看这些文章的全部。中途岛之战

深圳mm.活着viva&&冷血雅雅 。
老规矩，先画棋盘，一般的军棋游戏棋盘都利用的图片做背景，然后判断鼠标的点击来定位棋子，现在，我决定不用图片，直接用flex绘制棋盘，源于两个方面的原因，一是adobe是做美术出身的，所以，用flex绘制的棋盘基本上在ui上比java,c#绘制的要好看得多，同时，你可以很方便地对棋盘，棋子使用各种滤镜效果。二是绘制出来的棋盘，本身会减小相当多的开发工作，因为你点击的如果是棋子，他本身就可以实现事件触发。将细节处理放到了元部件中。



一，单人棋盘 Layout

public function createBoard():void
   {
   
    for (var row:int = 0; row <=xsize; row++) {
     var tempArray:Array=new Array(ysize);
     gameControl.boardArray[row] =tempArray;
    }
    //y 轴的线条
    for (var i:int=0;i<=ysize;i++)
    {
     var line:Line=new Line();
     line.xFrom=0+padding;
     line.xTo=board.width-padding;
     line.y=i*(board.height-2*padding)/ysize+padding;
     line.stroke=DEFAULT_STROKE;
     board.addElement(line);
    }
    //x 轴的线条
    for (var j:int=0;j<=xsize;j++)
    {
     var line2:Line=new Line();
     line2.yFrom=0+padding;
     line2.yTo=board.height-padding;
     line2.x=j*(board.width-2*padding)/xsize+padding;
     line2.stroke=DEFAULT_STROKE;
     board.addElement(line2);
    }
    //营里的线条
    for (var x1:int=0;x1<=xsize;x1++)
    {
     for (var y1:int=0;y1<=ysize;y1++)
     {
      if ((x1==1&&y1==1)||(x1==3&&y1==3)||(x1==2&&y1==2)||(x1==1&&y1==3)||(x1==3&&y1==1))
      {
       //画四个方向的线
       board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1+1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1+1)*(board.height-2*padding)/ysize+padding));
       board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1+1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1-1)*(board.height-2*padding)/ysize+padding));
       board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1-1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1+1)*(board.height-2*padding)/ysize+padding));
       board.addElement(drawLine(x1*(board.width-2*padding)/xsize+padding,(x1-1)*(board.width-2*padding)/xsize+padding,y1*(board.height-2*padding)/ysize+padding,(y1-1)*(board.height-2*padding)/ysize+padding));
      }
     }
    }
    //默认的棋盘填充，
    for (var x:int=0;x<=xsize;x++)
    {
     for (var y:int=0;y<=ysize;y++)
     {
      if ((x==1&&y==5)||(x==3&&y==5))
       //画大本营
       board.addElement(drawDaBenYing(x,y));
      else if ((x==1&&y==1)||(x==3&&y==3)||(x==2&&y==2)||(x==1&&y==3)||(x==3&&y==1))
       //画营
       board.addElement(drawYing(x,y));
      else
       //其它
       board.addElement(drawQizhi(x,y));
     }
    }
   
   }



现在我对决定在每个地方加一个默认的棋子，默认是不可见的，但在棋盘的实际情况应该是这样的。在测试的时候加入一种颜色，实际情况中应该是选择alpha为0，这样，棋子是不可见的，同样，这个函数也需要传入用户的位置，这样，每个玩家就可以选择不同颜色的棋子。





//默认的棋盘填充，
    for (var x:int=0;x<=xsize;x++)
    {
     for (var y:int=0;y<=ysize;y++)
     {
      if ((x==1&&y==5)||(x==3&&y==5))
       //画大本营
       board.addElement(drawDaBenYing(x,y));
      else if ((x==1&&y==1)||(x==3&&y==3)||(x==2&&y==2)||(x==1&&y==3)||(x==3&&y==1))
       //画营
       board.addElement(drawYing(x,y));
      else
       //其它
       board.addElement(drawRect(x,y));
     
      //放一个默认的棋子
      board.addElement(drawQizhi(x,y));
     }
    }

//默认的棋盘填充，
    for (var x:int=0;x<=xsize;x++)
    {
     for (var y:int=0;y<=ysize;y++)
     {
      if ((x==1&&y==5)||(x==3&&y==5))
       //画大本营
       board.addElement(drawDaBenYing(x,y));
      else if ((x==1&&y==1)||(x==3&&y==3)||(x==2&&y==2)||(x==1&&y==3)||(x==3&&y==1))
       //画营
       board.addElement(drawYing(x,y));
      else
       //其它
       board.addElement(drawRect(x,y));
     
      //放一个默认的棋子
      board.addElement(drawQizhi(x,y));
     }
    }

对不同颜色的棋子，我们再加入一个默认的数组来填充不同用户的颜色，同样，我们可以设置这个数组是可变的，当你的上家说，要吃红子时，实际上红子对不同位置的玩家是完全不一样的，有一定的迷惑作用，当然，他可以说，人吃上家或下家，总归是道高一，魔高一章啊。

   //玩家填充
   private const TURNARRAY:Array=[new SolidColor(0xff0000,1),new SolidColor(0x00ff00,1),new SolidColor(0x0000ff,1),new SolidColor(0xffcc00,1),new SolidColor(0xffffff,0)];



哦，差点忘了，在游戏中还有另外一种状态，那就是棋子是覆盖着的，不可见的。我们也得把这个加上。



二 四人棋盘 Board

现在，每个人的棋盘已经画好，我们现在需要四个棋盘+一个中间部分来完成整个棋盘的初始化工作，flex对效果的支持现在开始发威，我们只要把这个棋盘放上四份，一份为原始，一份旋转90，一份旋转-90,一份旋转180度，就可以完成4个棋盘的工作，

<s:Group width="660" height="660" left="20" top="20">
  <ns1:Layout x="425" y="220" rotation="180">
  </ns1:Layout>
  <ns1:Layout x="220" y="235" rotation="90">
  </ns1:Layout>
  <ns1:Layout x="235" y="440">
  </ns1:Layout>
  <ns1:Layout x="440" y="425" rotation="-90">
  </ns1:Layout>
  <ns1:CenterGroup x="220" y="220">
  </ns1:CenterGroup>
</s:Group>

下面的工作就是画中间那个部分了。

protected function init(event:FlexEvent):void
   {
    // TODO Auto-generated method stub
     // TODO Auto-generated method stub
    //y 轴的线条
   
    BOARD_IMG.source=BoardChess;
    BOARD_IMG.fillMode =  BitmapFillMode.REPEAT;

    for (var i:int=0;i<=2;i++)
    {
     var line:Line=new Line();
     line.xFrom=0;
     line.xTo=center.width;
     line.y=i*(center.height-2*padding)/2+padding;
     line.stroke=DEFAULT_TEDAO_STROKE;
     center.addElement(line);
    }
    //x 轴的线条
    for (var j:int=0;j<=2;j++)
    {
     var line2:Line=new Line();
     line2.yFrom=0;
     line2.yTo=center.height;
     line2.x=j*(center.width-2*padding)/2+padding;
     line2.stroke=DEFAULT_TEDAO_STROKE;
     center.addElement(line2);
    
    }
  
    //边角的弧
    center.addElement(drawArc(-padding,-padding));
    center.addElement(drawArc(-padding,2*(center.height-2*padding)/2+padding));
    center.addElement(drawArc(2*(center.height-2*padding)/2+padding,-padding));
    center.addElement(drawArc(2*(center.height-2*padding)/2+padding,2*(center.height-2*padding)/2+padding));
   
    //填充，
    for (var x:int=0;x<=2;x++)
    {
     for (var y:int=0;y<=2;y++)
     {
      
      var rect:Rect=new Rect();
      rect.width=15;
      rect.height=15;
      rect.x=x*(center.width-2*padding)/2-15/2+padding;
      rect.y=y*(center.height-2*padding)/2-15/2+padding;
      rect.radiusX=3;
      rect.radiusY=3;
      rect.stroke=DEFAULT_STROKE;
      rect.fill=BOARD_IMG;
      center.addElement(rect);
     }
    }
   }

这样，所有的部分已经完成，我们现在稍微改变一下逻辑，将底纹填充放到主类，在layout类不进行填充。生成的棋局应该就是这样子的。

[img] http://www.rainfu.net/sites/files/net_rainfu/sg3_0.jpg[/img]

三，最终布局

最后，我们将用户的信息传入棋盘，并加入一些控制键，最终形成的棋盘应该如下

<s:BorderContainer id="board" width="880" height="670"  top="20" left="150" horizontalCenter="0">
  <ns1:CenterGroup x="320" y="198">
  </ns1:CenterGroup>
  <ns1:Layout x="530" y="219" rotation="180">
  </ns1:Layout>
  <ns1:Layout x="341" y="218" rotation="90">
  </ns1:Layout>
  <ns1:Layout x="340" y="407">
  </ns1:Layout>
  <ns1:Layout x="529" y="408" rotation="-90">
  </ns1:Layout>
  <ns1:UserInfo x="221" y="17">
  </ns1:UserInfo>
  <ns1:UserInfo x="550" y="433">
  </ns1:UserInfo>
  <ns1:UserInfo x="10" y="228">
  </ns1:UserInfo>
  <mx:Button id="btnlose" label="投降" enabled="false"   x="669" y="465" width="70" height="21"/>
  <mx:Button id="btnstart" label="开始" enabled="true"   x="669" y="435" width="70" height="21"/>
  <mx:Button id="btnsave" label="调入布局" enabled="true"   x="669" y="525" width="70" height="21"/>
  <mx:Button id="btnopen" label="保存布局" enabled="true"   x="669" y="495" width="70" height="21"/>
  <ns1:UserInfo x="763" y="228">
  </ns1:UserInfo>
 
</s:BorderContainer>