Tic Tac Toe Game in Flex

0
votes

I am newer in FLEX and currently i am using FLEX 3.0 I want to develop a Tic Tac Toe game in FLEX. At first i think this one is the easiest for me but now its going to be very tough for me. I have searched on Internet but not a single link helps me that much so please give me proper Idea with proper code. Here i am giving you the sample code. its a bit of complex so sorry for that.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" backgroundColor="#000000" 
horizontalAlign="center" verticalAlign="middle" height="100%" width="100%" verticalGap="0" horizontalGap="0">

<mx:Script>
    <![CDATA[
        import mx.controls.Alert;
        import mx.controls.Image;

        private var blnFirst:Boolean = true;
        private var arr0:Array = new Array();
        private var arr1:Array = new Array();
        private var arr2:Array = new Array();
        private var count:int = 0;
        private var arr:Array = new Array();
        private var pl1Won:Boolean = false;
        private var pl2Won:Boolean = false;

        public function img_click(event:Event):void
        {
            if(event.currentTarget.enabled)
            {
                count++;
                if(blnFirst)
                {
                    blnFirst = false;
                    var itemp:Image = new Image();
                    itemp.percentHeight = 100;
                    itemp.percentWidth = 100;
                    itemp.source = "Images/Circle.png";
                    event.currentTarget.addChild(itemp);
                    event.currentTarget.enabled = false;
                    arrayInsert(event.currentTarget.id,true);
                }
                else
                {
                    blnFirst = true;
                    var itemp:Image = new Image();
                    itemp.percentHeight = 100;
                    itemp.percentWidth = 100;
                    itemp.source = "Images/Cross.png";
                    event.currentTarget.addChild(itemp);
                    event.currentTarget.enabled = false;
                    arrayInsert(event.currentTarget.id,false);
                }
            }

            if(count == 9)
            {
                arr = [arr0, arr1, arr2];
            }
        }

        private function arrayInsert(id:String,value:Boolean):void
        {
            if(id == "box00")
                arr0[0] = value;    
            if(id == "box01")
                arr0[1] = value;
            if(id == "box02")
                arr0[2] = value;
            if(id == "box10")
                arr1[0] = value;
            if(id == "box11")
                arr1[1] = value;    
            if(id == "box12")
                arr1[2] = value;
            if(id == "box20")
                arr2[0] = value;    
            if(id == "box21")
                arr2[1] = value;    
            if(id == "box22")
                arr2[2] = value;
        }

        private function btn_click():void
        {
                        for(var i:int=0;i<3;i++)
            {
                for(var j:int=0;j<3;j++)
                {
                    //very confused in this part
                }
            }
                            }

    ]]>
</mx:Script>
<mx:VBox height="500" width="500" borderStyle="solid" borderThickness="3" borderColor="#000000"
    backgroundColor="#ffffff" verticalGap="0" horizontalGap="0">

    <mx:HBox width="100%" height="33.3%" horizontalGap="0" verticalGap="0">

        <mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box00" >
        </mx:Box>
        <mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box01">
        </mx:Box>
        <mx:Box height="100%" width="33.4%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box02">
        </mx:Box>

    </mx:HBox>
    <mx:HBox width="100%" height="33.3%" horizontalGap="0" verticalGap="0">

        <mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box10">
        </mx:Box>
        <mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box11">
        </mx:Box>
        <mx:Box height="100%" width="33.4%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box12">
        </mx:Box>

    </mx:HBox>
    <mx:HBox width="100%" height="33.4%" horizontalGap="0" verticalGap="0">

        <mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box20">
        </mx:Box>
        <mx:Box height="100%" width="33.3%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box21">
        </mx:Box>
        <mx:Box height="100%" width="33.4%" borderStyle="solid" borderThickness="3" borderColor="#000000" backgroundColor="#ffffff"
            click="{img_click(event);}" id="box22">
        </mx:Box>

    </mx:HBox>

</mx:VBox>

<mx:Button click="{btn_click();}" />

</mx:Application>

I have check the winning condition on btn_click() function but you can give me the idea to change it when the one row is completed.

I want to know how to handle the array of TicTacToe Game.

4
actionscript-3apache-flexactionscriptflex3
Try to be more to the point of what you wnat to achieve. It seems as if you want us to complete the game for you. - Rick van Mook
I want the winning condition logic based on my implementation as well as at some point of time if some one wins than how to check that here when all the box is filled at that time it checks for winning conditions. so that i have given my code. please Help me. - Sagar Rawal
I think you should try to break down this large question in a couple of smaller ones. This is a bit to broad to answer quick and swiftly. - Rick van Mook

4 Answers

2
votes

Assuming that you are creating a tic tac toe of 3x3 grid. Create a two dimensional array for better visualization. Initialize them to 0.

Each time a 0 is entered at a[i,j] assign -1 to a[i,j] if empty Check the ith row and jth column for sum -3, also if i=j or i+j=2 check for diagonals to have sum -3, you have a winner.

Each time a X is entered at a[i,j] assign 1 to a[i,j] if empty Check the ith row and jth column for sum 3, also if i=j or i+j=2 check for diagonals to have sum 3, you have a winner

1
votes

This game can develop using different Logic.
Refer 1 and 2 Which source enabled. and try to accomplish your game.

1
votes

The below was written as an assignment for students (total beginners) The classwork: http://code.google.com/p/as3-workshop/source/browse/#svn%2Ftrunk%2Fsrc%2Ftld%2Fcourse%2Flesson1 (the game played by the player herself consequently taking sides of "O" and "X".

The homework: http://code.google.com/p/as3-workshop/source/browse/#svn%2Ftrunk%2Fsrc%2Ftld%2Fcourse%2Fhomework1 (the computer plays against the human).

The examples aren't very well documented (we did commenting and explanation in class, which I didn't record), but considering there's not much code, you should get through it.

1
votes
package  
{
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.Graphics;
    import flash.text.TextField;
    import flash.text.TextFormat;
    /**
     * ...
     * @author Jeet Chauhan
     */
    public class TicTacToe extends Sprite 
    {
        private var crossTurn:Boolean = true;
        private var rects:Vector.<Rect>;
        var currentMove:Number = 0;
        public function TicTacToe() 
        {
            createBoard();
        }


        private function createBoard():void 
        {
            var g:flash.display.Graphics = this.graphics;
            g.lineStyle(2, 0x000000);
            g.beginFill(0xffff00);
            g.drawRect(10, 10, 190, 190);
            rects = new Vector.<Rect>();
            var r:Rect
            for (var i:int = 0; i < 9; i++) 
            {
                r = new Rect();
                this.addChild(r);
                r.id = i;
                r.y = 20 + Math.floor(i % 3) * 60;
                r.x = 20 + Math.floor(i / 3) * 60;
                r.addEventListener(MouseEvent.CLICK, moveNextTurn);
                rects.push(r);
            }
        }

        private function moveNextTurn(e:MouseEvent):void 
        {
            var target:Rect = e.target as Rect
            target.removeEventListener(MouseEvent.CLICK, moveNextTurn);
            var turn:Sprite;
            if (crossTurn) {
                turn = target.addChild(new Cross) as Sprite;
                target.occupied = "X";
            } else {
                turn = target.addChild(new Circle) as Sprite;
                target.occupied = "O";
            }
            turn.x = 15;
            turn.y = 15;
            currentMove++;
            if (currentMove > 4) checkAnswer();
            crossTurn = !crossTurn;
        }

        private function checkAnswer():void 
        {
            var winner:String = "_";
            for (var i:int = 0, j = 0; i < 9; i += 3, j++)
            {
                if ((rects[i].occupied != "_") && (rects[i].occupied == rects[i+1].occupied) && (rects[i+1].occupied == rects[i+2].occupied))
                {
                    winner = rects[i].occupied;
                }

                if ((rects[j].occupied != "_") && (rects[j].occupied == rects[j+3].occupied) && (rects[j+6].occupied == rects[j+3].occupied))
                {
                    winner = rects[j].occupied;
                }

            }

            if(rects[4].occupied != "_"){
                if ((rects[0].occupied == rects[4].occupied) && (rects[8].occupied == rects[4].occupied))
                {
                    winner = rects[0].occupied;
                }

                if ((rects[2].occupied == rects[4].occupied) && (rects[6].occupied == rects[4].occupied))
                {
                    winner = rects[2].occupied;
                }
            }

            if(winner != "_"){
                trace("WINNER" + winner);
                for (i = 0; i < 9; i++) 
                {
                    if (rects[i].hasEventListener(MouseEvent.CLICK))
                    {
                        rects[i].removeEventListener(MouseEvent.CLICK,moveNextTurn)
                    }
                }

                var tf:TextField = addChild(new TextField()) as TextField;
                tf.defaultTextFormat = new TextFormat("", 20, 0xff0000);
                tf.text = winner + " wins";
                tf.x = 200;
                tf.y = 200;
            }
            if (currentMove == 9 && winner == "_") {
                trace("DRAW REEPLAy");
                //TODO: replay logic
            }

        }
    }
}
import flash.display.Graphics;
import flash.display.Sprite;

class Rect extends Sprite {
    public var id:Number;
    public var occupied:String = "_";// should be 0/_/X 
    function Rect() {
        var g:Graphics = this.graphics;
        g.lineStyle(1, 0x00ff00);
        g.beginFill(0x000000);
        g.drawRect(0, 0, 50, 50);
    }
}


class Circle extends Sprite {
    function Circle() {
        var g:Graphics = this.graphics;
        g.lineStyle(5, 0xff0000);
        g.drawCircle(10, 10, 10);
    }
}


class Cross extends Sprite {
    function Cross() {
        var g:Graphics = this.graphics;
        g.lineStyle(5, 0x0000ff);
        g.moveTo(0, 0);
        g.lineTo(20, 20);
        g.moveTo(20, 0);
        g.lineTo(0, 20);
    }
}

its a working example you can compile it, no need of graphics, hope it help