Flex4实例--FXG and MXML graphics—building a game

组件:BoardDisplay.mxml
<?xml version="1.0" encoding="utf-8"?>
<Graphic xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/mx"
   viewWidth="601" viewHeight="701" click="clickHandler(event)">
<fx:Script>
<![CDATA[
import mx.controls.Alert;

import org.hamcrest.mxml.collection.InArray;
[Bindable]
public var playerOneColor:uint=0xFF0000;
[Bindable]
public var playerTwoColor:uint=0x000000;

private static const EMPTY_COLOR:uint=0xFFFFFF;
[Bindable]
private var _boardData:Array;

[Bindable]
public var playerOneTurn:Boolean=true;

private static const P1:int=1;
private static const P2:int=2;
private static const NONE:int=0;

public function newGame():void
{
playerOneTurn=true;
var boardData:Array=new Array();
for(var row:int=0;row<6;row++){
boardData[row]=[NONE,NONE,NONE,NONE,NONE,NONE];
}
_boardData=boardData;
}

private function getColor(row:int,col:int,board:Array):uint
{
switch(_boardData[row][col])
{
case P1:
return playerOneColor;
case P2:
return playerTwoColor;
default:
return EMPTY_COLOR;
}
}

private function clickHandler(event:MouseEvent):void
{
var column:int=(event.localX-5)/100;
var row:int=getDropRow(column);
if(row==-1){
Alert.show("The column is full.","Illegal Move");
}else{
_boardData[row][column]=playerOneTurn?P1:P2;
playerOneTurn=!playerOneTurn;
_boardData=_boardData.slice(0);
}
}

private function getDropRow(column:int):int
{
for(var i:int=5;i>=0;i--)
{
if(_boardData[i][column]==NONE)
{
return i;
}
}
return -1;
}
]]>
</fx:Script>
<Group>
<Rect x="0" y="0" width="700" height="600">
<fill>
<SolidColor color="#8E6B23"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Rect>
<Ellipse x="5" y="4" width="90" height="90">
<fill>
<SolidColor color="{getColor(0,0,_boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="5" y="4" width="90" height="90">
<fill>
<SolidColor color="{getColor(0, 0, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="5" y="104" width="90" height="90">
<fill>
<SolidColor color="{getColor(1, 0, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="5" y="204" width="90" height="90">
<fill>
<SolidColor color="{getColor(2, 0, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="5" y="304" width="90" height="90">
<fill>
<SolidColor color="{getColor(3, 0, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="5" y="404" width="90" height="90">
<fill>
<SolidColor color="{getColor(4, 0, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="5" y="504" width="90" height="90">
<fill>
<SolidColor color="{getColor(5, 0, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="105" y="4" width="90" height="90">
<fill>
<SolidColor color="{getColor(0, 1, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="105" y="104" width="90" height="90">
<fill>
<SolidColor color="{getColor(1, 1, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="105" y="204" width="90" height="90">
<fill>
<SolidColor color="{getColor(2, 1, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="105" y="304" width="90" height="90">
<fill>
<SolidColor color="{getColor(3, 1, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="105" y="404" width="90" height="90">
<fill>
<SolidColor color="{getColor(4, 1, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="105" y="504" width="90" height="90">
<fill>
<SolidColor color="{getColor(5, 1, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="205" y="4" width="90" height="90">
<fill>
<SolidColor color="{getColor(0, 2, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="205" y="104" width="90" height="90">
<fill>
<SolidColor color="{getColor(1, 2, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="205" y="204" width="90" height="90">
<fill>
<SolidColor color="{getColor(2, 2, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="205" y="304" width="90" height="90">
<fill>
<SolidColor color="{getColor(3, 2, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="205" y="404" width="90" height="90">
<fill>
<SolidColor color="{getColor(4, 2, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="205" y="504" width="90" height="90">
<fill>
<SolidColor color="{getColor(5, 2, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="305" y="5" width="90" height="90">
<fill>
<SolidColor color="{getColor(0, 3, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="305" y="105" width="90" height="90">
<fill>
<SolidColor color="{getColor(1, 3, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="305" y="205" width="90" height="90">
<fill>
<SolidColor color="{getColor(2, 3, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="305" y="305" width="90" height="90">
<fill>
<SolidColor color="{getColor(3, 3, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="305" y="405" width="90" height="90">
<fill>
<SolidColor color="{getColor(4, 3, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="305" y="505" width="90" height="90">
<fill>
<SolidColor color="{getColor(5, 3, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="405" y="5" width="90" height="90">
<fill>
<SolidColor color="{getColor(0, 4, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="405" y="105" width="90" height="90">
<fill>
<SolidColor color="{getColor(1, 4, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="405" y="205" width="90" height="90">
<fill>
<SolidColor color="{getColor(2, 4, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="405" y="305" width="90" height="90">
<fill>
<SolidColor color="{getColor(3, 4, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="405" y="405" width="90" height="90">
<fill>
<SolidColor color="{getColor(4, 4, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="405" y="505" width="90" height="90">
<fill>
<SolidColor color="{getColor(5, 4, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="505" y="5" width="90" height="90">
<fill>
<SolidColor color="{getColor(0, 5, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="505" y="105" width="90" height="90">
<fill>
<SolidColor color="{getColor(1, 5, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="505" y="205" width="90" height="90">
<fill>
<SolidColor color="{getColor(2, 5, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="505" y="305" width="90" height="90">
<fill>
<SolidColor color="{getColor(3, 5, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="505" y="405" width="90" height="90">
<fill>
<SolidColor color="{getColor(4, 5, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="505" y="505" width="90" height="90">
<fill>
<SolidColor color="{getColor(5, 5, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="605" y="5" width="90" height="90">
<fill>
<SolidColor color="{getColor(0, 6, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="605" y="105" width="90" height="90">
<fill>
<SolidColor color="{getColor(1, 6, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="605" y="205" width="90" height="90">
<fill>
<SolidColor color="{getColor(2, 6, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="605" y="305" width="90" height="90">
<fill>
<SolidColor color="{getColor(3, 6, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="605" y="405" width="90" height="90">
<fill>
<SolidColor color="{getColor(4, 6, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
<Ellipse x="605" y="505" width="90" height="90">
<fill>
<SolidColor color="{getColor(5, 6, _boardData)}"/>
</fill>
<stroke>
<SolidColorStroke caps="none" weight="1" joints="miter" miterLimit="4"/>
</stroke>
</Ellipse>
</Group>
</Graphic>

应用mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:comp="components.*"
width="100%" height="100%"
    initialize="board.newGame()">
<fx:Script>
<![CDATA[
import mx.graphics.SolidColor;
private function getColor(playerOneTurn:Boolean):SolidColor
{
return new SolidColor(playerOneTurn?board.playerOneColor:board.playerTwoColor);
}
]]>
</fx:Script>
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Panel title="Only connec!" x="10" y="10" width="100%" height="100%">
<s:layout>
<s:VerticalLayout paddingLeft="5" paddingTop="5"
  paddingBottom="5" paddingRight="5"/>
</s:layout>
<s:HGroup verticalAlign="middle">
<s:Button label="New Game" click="board.newGame()"/>
<s:Ellipse width="20" height="20" fill="{getColor(board.playerOneTurn)}"/>
<s:Label text="Player {board.playerOneTurn?'1':'2'} Turn"/>
</s:HGroup>
<comp:BoardDisplay id="board"/>
</s:Panel>
</s:Application>

评论

1 楼 荷尔萌 2013-10-14  

我的智商太低吗= =不知道这个游戏怎么玩