15puzzles Flex way

15puzzles Flex implementation source code

Code does not contains auto generated by plugin and framework parts .
Files: index.mxml,
15puzzles.css,
FifteenPuzzles.as,
Puzzle.as,
FreeSpace.as
index.mxml file below is not completely displayed and also not formatted well. Please download whole project.

index.mxml




	
	
	

	
	
	
	
		


FifteenPuzzles.as

package includes {

	import flash.events.*;

	import mx.containers.Canvas;
	import mx.controls.Button;
	import mx.controls.Label;

	public class FifteenPuzzles {

		public var freeSpace : FreeSpace;
		public var lastDraggedPuzzle : Puzzle;
		public var puzzles : Array;
		public var dragDirection : String;
		public var box : Canvas;

		private static var fifteenPuzzles : FifteenPuzzles;

		public static function createInstance (box : Canvas) : FifteenPuzzles {
			if (fifteenPuzzles == null) {
				fifteenPuzzles = new FifteenPuzzles(box);
			}
			return fifteenPuzzles;
		}

		public static function getInstance () : FifteenPuzzles {
			return fifteenPuzzles;
		}

		public function FifteenPuzzles (box : Canvas) {
			this.box = box;
			init();
			makeDraggable();
		}

		private function init () : void {
			puzzles = new Array();
			var i : Number;
			for (i = 1 ; i <= 16 ; i++) {
				var x : int;
				if (i < 5) {
					x = (i - 1) * 50;
				} else if (5 <= i && i < 9) {
					x = (i - 5) * 50;
				} else if (9 <= i && i < 13) {
					x = (i - 9) * 50;
				} else if (13 <= i && i <= 16) {
					x = (i - 13) * 50;
				}
				var y : int;
				if (i < 5) {
					y = 0;
				} else if (5 <= i && i < 9) {
					y = 50;
				} else if (9 <= i && i < 13) {
					y = 100;
				} else if (13 <= i && i <= 16) {
					y = 150;
				}
				var puzzle : Puzzle;
				if (i == 16) {
					//freeSpace = new FreeSpace(x , y , i);
				} else {
					puzzle = new Puzzle(i , x , y , i);
				}
				if (i == 16) {
					appendFreeSpace(x , y , i);
				} else {
					appendPuzzle(puzzle);
				}
			}
		}

		public function makeDraggable () : void {
			for (var i : int = 1 ; i < 16 ; i++) {
				if (freeSpace.x == puzzles[i].x || freeSpace.y == puzzles[i].y) {
					if (puzzles[i].position == freeSpace.position - 1) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					} else if (puzzles[i].position == freeSpace.position + 1) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					} else if (puzzles[i].position == freeSpace.position + 4) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					} else if (puzzles[i].position == freeSpace.position - 4) {
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_DOWN , (Puzzle(puzzles[i])).onMouseDown);
						(Puzzle(puzzles[i])).addEventListener(MouseEvent.MOUSE_UP , (Puzzle(puzzles[i])).onMouseUp);
					}
				}
			}
		}

		public function appendPuzzle (puzzle : Puzzle) : void {
			puzzles[puzzle.number] = puzzle;
			puzzle.id = 'puzzle' + puzzle.number;
			//puzzle.setStyle('position' , 'absolute');
			puzzle.styleName = 'puzzle';
			var label : Label = new Label();
			label.text = "" + puzzle.number;
			puzzle.addChild(label);
			box.addChild(puzzle);
		}

		public function appendFreeSpace (x : int , y : int , position : int) : void {
			freeSpace = new FreeSpace(x , y , position);
			freeSpace.id = 'freeSpace';
			freeSpace.setStyle('position' , 'absolute');
			freeSpace.styleName = 'freeSpace';
			var label : Label = new Label();
			//freeSpace.addChild(label);

			freeSpace.addChild(label);
			box.addChild(freeSpace);

			//box.setChildIndex(freeSpace, 100); 

			var z : int = box.getChildIndex(freeSpace);

		}

		public function scramble15puzzles () : void {
			while (box.numChildren > 0) {
				box.removeChildAt(0);
			}
			var xTemp : int = freeSpace.x;
			var yTemp : int = freeSpace.y;
			var positionTemp : int = freeSpace.position;

			var n : int = Math.ceil(Math.random() * 15);
			var randomPuzzle : Puzzle = puzzles[n];
			freeSpace.x = randomPuzzle.x;
			freeSpace.y = randomPuzzle.y;
			freeSpace.position = randomPuzzle.position;

			randomPuzzle.x = xTemp;
			randomPuzzle.y = yTemp;
			randomPuzzle.position = positionTemp;

			appendFreeSpace(freeSpace.x , freeSpace.y , freeSpace.position);

			for (var i : int = 0 ; i < 20 ; i++) {
				var randomPuzzle1 : Puzzle = puzzles[Math.ceil(Math.random() * 15)];
				var randomPuzzle2 : Puzzle = puzzles[Math.ceil(Math.random() * 15)];
				xTemp = randomPuzzle1.x;
				yTemp = randomPuzzle1.y;
				positionTemp = randomPuzzle1.position;

				randomPuzzle1.x = randomPuzzle2.x;
				randomPuzzle1.y = randomPuzzle2.y;
				randomPuzzle1.position = randomPuzzle2.position;

				randomPuzzle2.x = xTemp;
				randomPuzzle2.y = yTemp;
				randomPuzzle2.position = positionTemp;
			}

			for (i = 1 ; i < 16 ; i++) {
				appendPuzzle(puzzles[i]);
			}
			this.makeDraggable();
		}

		public function sort15puzzles () : void {
			while (box.numChildren > 0) {
				box.removeChildAt(0);
			}
			init();
			makeDraggable();
		}

	}
}

Puzzle.as

package includes {
	import flash.events.*;
	import flash.geom.Rectangle;

	import mx.containers.Canvas;

	public class Puzzle extends Canvas {

		public function Puzzle (number : int , x : int , y : int , position : int) {
			this.number = number;
			this.x = x;
			this.y = y;
			this.position = position;
			this.explicitWidth = 50;
			this.explicitHeight = 50;
			this.fifteenPuzzles = FifteenPuzzles.getInstance();
			//addEventListener(MouseEvent.MOUSE_DOWN , onMouseDown);
			//addEventListener(MouseEvent.MOUSE_UP , onMouseUp);
		}
		public var number : int;
		public var position : int;
		public var fifteenPuzzles : FifteenPuzzles;

		public var alreadyDragged : Boolean;
		public var lastDraggedPuzzleNormalX : int;
		public var lastDraggedPuzzleNormalY : int;

		//public var x:int;
		//public var y:int;

		public function onMouseDown (event : Event) : void {
			if (fifteenPuzzles == null) {
				fifteenPuzzles = FifteenPuzzles.getInstance();
			}
			this.parent.setChildIndex(fifteenPuzzles.freeSpace , 0);

			if (fifteenPuzzles.freeSpace.x == x || fifteenPuzzles.freeSpace.y == y) {
				if (position == fifteenPuzzles.freeSpace.position - 1) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY , 50 , 0));
					fifteenPuzzles.dragDirection = 'right';
				} else if (position == fifteenPuzzles.freeSpace.position + 1) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX - 50 , lastDraggedPuzzleNormalY , 50 , 0));
					fifteenPuzzles.dragDirection = 'left';
				} else if (position == fifteenPuzzles.freeSpace.position + 4) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY - 50 , 0 , 50));
					fifteenPuzzles.dragDirection = 'up';
				} else if (position == fifteenPuzzles.freeSpace.position - 4) {
					markLastDraggedPuzzle();
					this.startDrag(false , new Rectangle(lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY , 0 , 50));
					fifteenPuzzles.dragDirection = 'down';
				}
			}
			//this.startDrag();
		}

		private function markLastDraggedPuzzle () {
			if (!alreadyDragged) {
				lastDraggedPuzzleNormalX = this.x;
				lastDraggedPuzzleNormalY = this.y;
				alreadyDragged = true;
			}
			fifteenPuzzles.lastDraggedPuzzle = new Puzzle(this.number , lastDraggedPuzzleNormalX , lastDraggedPuzzleNormalY , this.position);
		}

		public function onMouseUp (event : MouseEvent) : void {
			this.stopDrag();
			if (fifteenPuzzles.dragDirection == 'right' && this.x > fifteenPuzzles.freeSpace.x - 20) {
				drop();
			} else if (fifteenPuzzles.dragDirection == 'left' && this.x < fifteenPuzzles.freeSpace.x + 20) {
				drop();
			} else if (fifteenPuzzles.dragDirection == 'up' && this.y < fifteenPuzzles.freeSpace.y + 20) {
				drop();
			} else if (fifteenPuzzles.dragDirection == 'down' && this.y > fifteenPuzzles.freeSpace.y - 20) {
				drop();
			}

		}

		private function drop () : void {
			alreadyDragged = false;
			this.parent.removeChild(fifteenPuzzles.freeSpace);
			var xTemp : int = fifteenPuzzles.freeSpace.x;
			var yTemp : int = fifteenPuzzles.freeSpace.y;
			var positionTemp : int = fifteenPuzzles.freeSpace.position;

			fifteenPuzzles.freeSpace.x = fifteenPuzzles.lastDraggedPuzzle.x;
			fifteenPuzzles.freeSpace.y = fifteenPuzzles.lastDraggedPuzzle.y;
			fifteenPuzzles.freeSpace.position = fifteenPuzzles.lastDraggedPuzzle.position;

			fifteenPuzzles.lastDraggedPuzzle.x = xTemp;
			fifteenPuzzles.lastDraggedPuzzle.y = yTemp;
			fifteenPuzzles.lastDraggedPuzzle.position = positionTemp;

			fifteenPuzzles.puzzles[fifteenPuzzles.lastDraggedPuzzle.number] = fifteenPuzzles.lastDraggedPuzzle;
			//destroy all draggable and dropable

			fifteenPuzzles.appendFreeSpace(fifteenPuzzles.freeSpace.x , fifteenPuzzles.freeSpace.y , fifteenPuzzles.freeSpace.position);

			this.parent.removeChild(this);

			var newPuzzle = new Puzzle(fifteenPuzzles.lastDraggedPuzzle.number , xTemp , yTemp , positionTemp);
			fifteenPuzzles.appendPuzzle(newPuzzle);
			fifteenPuzzles.makeDraggable();
		}
	}
}

FreeSpace.as

package includes {

	import mx.containers.Canvas;
	import mx.controls.Label;

	public class FreeSpace extends Canvas {
		public var position : int;

		public function FreeSpace (x : int , y : int , position : int) {
			this.x = x;
			this.y = y;
			this.position = position;
			this.explicitWidth = 50;
			this.explicitHeight = 50;
		}

	}
}

15puzzles.css

/* CSS file */

.box{

    width: 208px;
    height: 208px;
    position: absolute;
    top: 92px;
    left: 92px;
    border-right-style: double;
    border-left-style: double;
    border-bottom-style: double;
    border-top-style: double;
    border-right-width: 8px;
    border-left-width: 8px;
    border-bottom-width: 8px;
    border-top-width: 8px;
    border-right-color: #e08b10;
    border-left-color: #e08b10;
    border-bottom-color: #e08b10;
    border-top-color: #e08b10;
    background-color: #B964D2;
    visibility: visible;
	borderStyle: solid;
	borderColor: #46284F;
	borderThickness: 4;
	cornerRadius: 10;
	backgroundAlpha: 0.74;
}

.puzzle{

    position: absolute;
    width: 42px;
    height: 42px;
    visibility: visible;
    border-top-style: outset;
    border-bottom-style: outset;
    border-right-color: #d41212;
    border-left-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    border-right-width: 4px;
    border-left-width: 4px;
    border-bottom-width: 4px;
    border-top-width: 4px;
    border-left-style: outset;
    border-right-style: outset;
    background-color: #191717;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: bold;
    font-variant: normal;
    color: #C7A7D5;
    text-align: center;
    vertical-align: bottom;
    line-height: 43px;
	borderStyle: solid;
	borderColor: #943A8A;
	borderThickness: 4;
	backgroundAlpha: 0.9;
	backgroundSize: auto;
	cornerRadius: 7;
	themeColor: #C000FF;
}

.freeSpace{

    width: 100px;
    height: 100px;
    visibility: visible;

    background-color: #B964D2;
	borderColor: #9AA5D2;
	borderStyle: none;
	borderThickness: 3;

}

.buttons{

    position: absolute;
    top: 100px;
    left: 350px;
    width: 100px;
    height: 300px;
}

.button{

    border-right-style: outset;
    border-left-style: outset;
    border-bottom-style: outset;
    border-top-style: outset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: bottom;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    text-indent: 1px;

    line-height: 30px;
	themeColor: #9656B1;
	borderColor: #5F467A;
	fillAlphas: 1.0, 1.0;
	fillColors: #C99BCE, #4D0B55, #9739BE, #5C1E62;
	textRollOverColor: #E0D0E1;
}

.button-clicked{

    border-right-style: inset;
    border-left-style: inset;
    border-bottom-style: inset;
    border-top-style: inset;
    border-right-color: #d41212;
    border-bottom-color: #d41212;
    border-top-color: #d41212;
    background-color: #ee1515;
    width: 100px;
    height: 30px;
    vertical-align: middle;
    text-align: center;
    border-right-width: 5px;
    border-left-width: 5px;
    border-bottom-width: 5px;
    border-top-width: 5px;
    font-size: 14px;
    color: #fce5c7;
    font-weight: bold;
     border-left-color: #d41212;
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    margin-top: 30px;
    position: absolute;
    line-height: 30px;
}
global
{
	backgroundGradientAlphas: 1.0, 1.0;
	backgroundGradientColors: #8253A6, #BFA2D6;
	borderColor: #AF8BD7;
	color: #C393CD;
	fontSize: 23;
	disabledColor: #D4C1DE;
	paddingLeft: 0;
	paddingTop: 0;
	paddingRight: 0;
	paddingBottom: 0;
}
Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • MySpace
  • RSS
  • Twitter
  • Yahoo! Bookmarks
  • Yahoo! Buzz
  • BlinkList
  • blogmarks
  • DZone
  • E-mail this story to a friend!
  • LinkaGoGo
  • Live
  • MisterWong
  • MisterWong.DE
  • Reddit
  • StumbleUpon
  • Technorati
  • ThisNext
  • Tumblr

Related posts:

  1. 15puzzles GWT way
  2. 15puzzles jQuery way
  3. 15puzzles ExtJs way

Leave a Reply


wp