Tic Tac Toe Game in Flex - actionscript-3

Question

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.

Answer 1

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

Answer 2

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

Answer 3

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.

Answer 4

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