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

flex 联机游戏开发 - 五子棋游戏:(一)游戏核心
2010年12月20日
　　刚看到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; //默认的颜色，与背景色同， privateconst DEFAULT_COLOR:SolidColor=new SolidColor(0xeeeeee,0); //黑棋 privateconst BLACK_COLOR:SolidColor=new SolidColor(0x000000,1); //白棋 privateconst WHITE_COLOR:SolidColor=new SolidColor(0xffffff,1); //玩家一 privateconst PLAYER_RONE_TURN:int=0; //玩家二 privateconst PLAYER_TWO_TURN:int=1; //当前玩家 private var turn:int; //y 轴的线条 for (var i:int=0;i
　　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=ellipse.x && posx=ellipse.y &&posy
　　3）五子棋胜负判断
　　现在，你如果跟你朋友下这个棋盘的话，把子填满也是分出胜负的，我们得加上一些判断胜负的条件，对于一个联机游戏，不涉及人工智能是比较简单的，当用户投子后我们只要判断用户的横，竖，斜4个方向是否有五个子连成一条线，有的话就表示用户胜利了。
　　在click事件的后部加上 然后专心做isWinner()函数。我们可以通过暴力的方式获得当前ellipse的坐标值，但显然，代码就不容易让人理解，为了把视图与逻辑进行分离，我们需要引入另一个数组来定位用户下的棋的一个点，这个点包括四个值，x丝标，y坐标，棋子所属的玩家，还有一个圆。就命名为Qizhi吧。 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=ellipse.x && posx=ellipse.y &&posy0) { for each(var item:Qizhi in winArray) { item.ellipse.fill=RED_COLOR; } } board.removeEventListener(MouseEvent.CLICK,boardCl ick); 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)) returntrue; //判断横向 if (yWinner(clickQizhi)) returntrue; //判断斜向 if (xy13Winner(clickQizhi)) returntrue; if (xy24Winner(clickQizhi)) returntrue; returnfalse; } private function xWinner(clickQizhi:Qizhi):Boolean{ winArray=new ArrayCollection(); for (var xRight:int=clickQizhi.x+1;(xRight=0&&xLeft>clickQizhi.x-5);xLe ft--) { 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); returntrue; } returnfalse; } private function yWinner(clickQizhi:Qizhi):Boolean{ winArray=new ArrayCollection(); var length:int=1; for (var yRight:int=clickQizhi.y+1;(yRight=0&&yLeft>clickQizhi.y-5);yLe ft--) { 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); returntrue; } returnfalse; } private function xy24Winner(clickQizhi:Qizhi):Boolean{ winArray=new ArrayCollection(); //第四象限 for (var yRight:int=clickQizhi.y+1;(yRight=0&&yLeft>clickQizhi.y-5);yLe ft--) { if (clickQizhi.x-yLeft>=0) { var qizhiLeft:Qizhi=boardArray[clickQizhi.x-(clickQizh i.x-yLeft)][yLeft] as Qizhi; if (qizhiLeft.turn==clickQizhi.turn) { winArray.addItem(qizhiLeft); } else { break; } } else { break; } } if (winArray.length>=4) { winArray.addItem(clickQizhi); returntrue; } returnfalse; } private function xy13Winner(clickQizhi:Qizhi):Boolean{ winArray=new ArrayCollection(); //第三象限 for (var yRight:int=clickQizhi.y+1;(yRight=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);yLe ft--) { if (clickQizhi.x+(clickQizhi.y-yLeft)=4) { winArray.addItem(clickQizhi); returntrue; } returnfalse