Mobile game app development – Tic tac toe – in Flex 4.6

Mobile game Tic tac toe on Flex 4.6 Please find the view, sub views and activity files below.

This is a simple example to experiment Flex mobile games, and to understand Flex 4.6. This example helps in building a simple Mobile game app development Tic Tac Toe. Being a famous game I do not need to get into the depth of its rules and regulations I guess. Its as simple as it looks, just create the following files and hit Run ur good to go. XML file and source code are available on request. Mobile game app development.

Main application file tictactoe.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:ViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
			xmlns:s="library://ns.adobe.com/flex/spark" 
		        firstView="views.TicTacToeHomeView">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:navigationContent>
		<s:Button label="Home" 
				  click="navigator.popToFirstView()"/>
	</s:navigationContent>
 
</s:ViewNavigatorApplication>

Our layouts for player to change Boards or views

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:states>
		<s:State name="wood" />
		<s:State name="board" />
	</s:states>
	<s:BitmapImage includeIn="wood" source="../assets/img1.jpg" width="100%" height="100%" />
	<s:BitmapImage includeIn="board" source="../assets/img2.jpg" width="100%" height="100%" />
</s:View>

The main game piece

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		width="100%" height="100%">
	<fx:Declarations>
		<!--<mx:SetProperty target="{label1}" name="text" value="O" includeIn="O"/>
		<mx:SetStyle name="backgroundColor" value="#42E303" includeIn="OWinner"/>
		<mx:SetStyle name="backgroundColor" value="#42E303" includeIn="XWinner"/>-->
	</fx:Declarations>
	<s:states>
		<s:State name="BLANK"/>
		<s:State name="X"/>
		<s:State name="O" />
		<s:State name="OWinner" basedOn="O"/>
		<s:State name="XWinner" basedOn="X"/>
 
	</s:states>
	<s:Image source="../assets/x.png" includeIn="X" verticalCenter="0" horizontalCenter="0" horizontalAlign="center" verticalAlign="middle"
				   smooth="true"/>
	<s:Image source="../assets/o.png" includeIn="O" verticalCenter="0" horizontalCenter="0" horizontalAlign="center" verticalAlign="middle"
				   smooth="true"/>
 
 
	<fx:Script>
		<![CDATA[
			public var used:Boolean = false;
 
			public function reset():void
			{
				used = false;
				currentState = "BLANK";
			}
		]]>
	</fx:Script>
</s:Group>

The tic tac toe logic and home view

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		xmlns:mx="library://ns.adobe.com/flex/mx"
		title="Tic Tac Toe" xmlns:views="views.*" creationComplete="reset();" currentState="blankSlate">
 
	<fx:Script>
		<![CDATA[
			protected function button1_clickHandler(event:MouseEvent):void
			{
				if(background.currentState =="wood"){
					background.currentState = "board";
				}else{
					background.currentState = "wood";
				}
 
 
			}
		]]>
	</fx:Script>
 
	<s:states>
		<s:State name="blankSlate"/>
		<s:State name="alertMsgState"/>
	</s:states>
	<s:navigationContent/>
	<s:actionContent>
		<s:Button label="New Game" click="reset();"/>
		<s:Button icon="../assets/paint.png" click="button1_clickHandler(event)"/>
	</s:actionContent> 
	<fx:Script>
		<![CDATA[
			import mx.events.CloseEvent;
			import mx.events.FlexEvent;
			//import mx.controls.Alert;
 
			public var lastPiece:String = "O";
			public var winnerFound:Boolean = false;
 
			public function pieceChosen(piece:GamePiece):void
			{
				var message:String = new String();
				if (!piece.used && !winnerFound)
				{
					if (lastPiece == "O")
					{
						piece.currentState = "X";
						lastPiece = "X";
					} else 
					{
						piece.currentState = "O";
						lastPiece = "O";
					}
					piece.used = true;
				}
				if (checkForWinner())
				{
					message = "Player " + lastPiece + " won. ";
				} else
				{
					if (checkForTie())
					{
						message = "No player won. ";
					} else
					{
						return;
					}
				}
				currentState = 'alertMsgState';
				alertMsg.text = message + "Play again!!!";
			}
 
			public function checkForTie():Boolean
			{
				if (TopLeft.used == true && MiddleLeft.used == true && BottomLeft.used == true && TopMiddle.used == true && MiddleMiddle.used == true && BottomMiddle.used == true && TopRight.used == true && MiddleRight.used == true && BottomRight.used == true)
				{
					return true;
				}
				else
				{
					return false;
				}
			}
 
			public function playAgainHandler(event:CloseEvent):void
			{
				reset();
				/* if (event.detail==Alert.NO)
				{
					currentState = "blankSlate";
				} */
			}
 
			public function reset():void
			{
				resetPieces();
				lastPiece = "O";
				winnerFound = false;
				currentState = "";
			}
 
			public function resetPieces():void
			{
				TopLeft.reset();
				MiddleLeft.reset();
				BottomLeft.reset();
				TopMiddle.reset();
				MiddleMiddle.reset();
				BottomMiddle.reset();
				TopRight.reset();
				MiddleRight.reset();
				BottomRight.reset();
			}
 
			public function checkForWinner():Boolean
			{
				if (TopLeft.currentState == lastPiece && MiddleLeft.currentState == lastPiece && BottomLeft.currentState == lastPiece) 
				{
					TopLeft.currentState = MiddleLeft.currentState = BottomLeft.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				if (TopMiddle.currentState == lastPiece && MiddleMiddle.currentState == lastPiece && BottomMiddle.currentState == lastPiece) 
				{
					TopMiddle.currentState = MiddleMiddle.currentState = BottomMiddle.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				if (TopRight.currentState == lastPiece && MiddleRight.currentState == lastPiece && BottomRight.currentState == lastPiece) 
				{
					TopRight.currentState = MiddleRight.currentState = BottomRight.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				if (TopLeft.currentState == lastPiece && TopMiddle.currentState == lastPiece && TopRight.currentState == lastPiece) 
				{
					TopLeft.currentState = TopMiddle.currentState = TopRight.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				if (MiddleLeft.currentState == lastPiece && MiddleMiddle.currentState == lastPiece && MiddleRight.currentState == lastPiece) 
				{
					MiddleLeft.currentState = MiddleMiddle.currentState = MiddleRight.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				if (BottomLeft.currentState == lastPiece && BottomMiddle.currentState == lastPiece && BottomRight.currentState == lastPiece) 
				{
					BottomLeft.currentState = BottomMiddle.currentState = BottomRight.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				if (TopLeft.currentState == lastPiece && MiddleMiddle.currentState == lastPiece && BottomRight.currentState == lastPiece) 
				{
					TopLeft.currentState = MiddleMiddle.currentState = BottomRight.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				if (TopRight.currentState == lastPiece && MiddleMiddle.currentState == lastPiece && BottomLeft.currentState == lastPiece) 
				{
					TopRight.currentState = MiddleMiddle.currentState = BottomLeft.currentState = lastPiece  + "Winner";
					winnerFound = true;
					return true;
				}
				return false;
			}
 
 
		]]>
	</fx:Script>
 
	<views:bg id="background" />
	<s:Group width="100%" height="100%" excludeFrom="alertMsgState">
		<s:HGroup gap="0" width="100%" height="100%">
			<s:Group width="33.333333333333%">
 
			</s:Group>
			<s:Line height="100%">
				<s:stroke>
					<s:SolidColorStroke weight=".5" color="#000000" />
				</s:stroke>
			</s:Line>
			<s:Group width="33.333333333333%">
 
			</s:Group>
			<s:Line height="100%">
				<s:stroke>
					<s:SolidColorStroke weight=".5" color="#000000" />
				</s:stroke>
			</s:Line>
		</s:HGroup>
		<s:VGroup gap="0" width="100%" height="100%">
			<s:Group height="33.333333333333%">
 
			</s:Group>
			<s:Line width="100%">
				<s:stroke>
					<s:SolidColorStroke weight=".5" color="#000000" />
				</s:stroke>
			</s:Line>
			<s:Group height="33.333333333333%">
 
			</s:Group>
			<s:Line width="100%">
				<s:stroke>
					<s:SolidColorStroke weight=".5" color="#000000" />
				</s:stroke>
			</s:Line>
		</s:VGroup>
	</s:Group>
	<s:Group width="100%" height="100%" excludeFrom="alertMsgState">
		<s:VGroup width="100%" height="100%">
			<s:HGroup  width="100%" height="33.333333333333%">
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece id="TopLeft" click="pieceChosen(TopLeft)">
					</views:GamePiece>
				</s:Group>
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece id="MiddleLeft" click="pieceChosen(MiddleLeft)">
					</views:GamePiece>
				</s:Group>
				<s:Group height="100%" width="33.333333333333%">
 
					<views:GamePiece  id="BottomLeft" click="pieceChosen(BottomLeft)">
					</views:GamePiece>
 
				</s:Group>
			</s:HGroup>
			<s:HGroup  width="100%" height="33.333333333333%">
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece  id="TopMiddle" click="pieceChosen(TopMiddle)">
					</views:GamePiece>
 
				</s:Group>
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece  id="MiddleMiddle" click="pieceChosen(MiddleMiddle)">
					</views:GamePiece>
 
				</s:Group>
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece  id="BottomMiddle" click="pieceChosen(BottomMiddle)">
					</views:GamePiece>
 
				</s:Group>
			</s:HGroup>
			<s:HGroup  width="100%" height="33.333333333333%">
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece  id="TopRight" click="pieceChosen(TopRight)">
					</views:GamePiece>
 
				</s:Group>
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece  id="MiddleRight" click="pieceChosen(MiddleRight)">
					</views:GamePiece>
 
				</s:Group>
				<s:Group height="100%" width="33.333333333333%">
					<views:GamePiece  id="BottomRight" click="pieceChosen(BottomRight)">
					</views:GamePiece>
				</s:Group>
			</s:HGroup>
		</s:VGroup>
	</s:Group>
 
	<s:Label id="alertMsg"  horizontalCenter="0" verticalCenter="0" includeIn="alertMsgState"/>
</s:View>

This Mobile game app development in Flex 4.6 helps to understand the new features added in Flex 4.6 along with its power to be exported to Android devices, Blackberry and Iphone/Ipad.

One Response to “Mobile game app development – Tic tac toe – in Flex 4.6”

  1. Kiran says:

    I love the idea of what you think about rounded correns it’s an enhancement. Older browsers (like IE6, it’s so 1990s), visitors will not suffer from incorrect/inaccurate display or rendering of elements but simply revert to the blocky styles. The rounded correns are something like a bonus to those who use up-to-date browsers, heh.The properties for rounded correns are aplenty, but I’m not sure which is CSS3 valid or not. Are all of them CSS3 valid or is just strictly just border-radius? So far -moz-border-radius and etc are not recognised to be valid but that doesn’t bother me a lot since I’m not exactly a CSS puriest. I just aim to make my layouts XHTML valid I guess that’s the most important part for designs.Thanks for sharing again! I find your entries really insightful and more importantly, relevant to what web designers and coders alike need and want to know.

Top
Follow

Get every new post delivered to your Inbox

Join other followers