Posts

Creating Chess Board at Runtime using ActionScript

I experienced many time while developing games, some time we may required to create the graphics at runtime. Here I am going to share with you a same kind of Chess Board example, which is created at runtime using ActionScript.

Here you can move black piece on white boxes and white piece on black boxes.

Download Source

Creating Box Class

Create a new Flash file with main.as Document class file.
Now let’s start with creating Box class and name it “box.as”.
[as3]
/*box.as*/
package{
import flash.display.Sprite;
import flash.display.Graphics;
import flash.display.Shape;

// Defining class as dynamic class so it allows to assign/create new properties from other class
public dynamic class box extends Sprite{
protected var boxColor:Number;
protected var boxWidth:Number;
protected var boxHeight:Number;

public function box(_boxColor:uint, _boxWidth:Number, _boxHeight:Number){
super();

boxColor = _boxColor;
boxWidth = _boxWidth;
boxHeight = _boxHeight;

init();
}

protected function init():void{
// creating box
var s:Shape = new Shape();
s.graphics.beginFill(boxColor);
s.graphics.drawRect(0,0,boxWidth,boxHeight);
s.graphics.endFill();
this.addChild(s);
}
}
}
[/as3]

Creating Chess Board

In the main.as first we will define some Variables and Constants types.
[as3]
protected const ROWS:int = 8;
protected const COLS:int = 8;
protected const BOX_WIDTH:int = 40;
protected const BOX_HEIGHT:int = 40;
protected const BOX_COLOR_WHITE:uint = 0xFFFFFF;
protected const BOX_COLOR_BLACK:uint = 0x000000;
protected const SNAP_DISTANCE:int = 15;

protected var boxes_list:Array = new Array(); // for all boxes
protected var boxes_white_list:Array = new Array(); // for white boxes only
protected var boxes_black_list:Array = new Array(); // for black boxes only
[/as3]

Now place all the boxes to stage.
[as3]
protected function placeBoxes():void{
// placing 64 boxes
var b:box;
var yCord:int = 40;
//var remender:int = 0;
var row:int = 1;

for(var i:int=0; iPlacing Pieces

Now here we have to place some pieces to play.
[as3]
protected function placeKings():void{
// placing white king to intial position
king_white = new king_w();
king_white.x = boxes_black_list[30].x;
king_white.y = boxes_black_list[30].y;
king_white.mcColor = ‘white’;
addChild(king_white);

// placing black king to intial position
king_black = new king_b();
king_black.x = boxes_white_list[2].x;
king_black.y = boxes_white_list[2].y;
king_black.mcColor = ‘black’;
addChild(king_black);
}
[/as3]

Making Pieces Interactive

And finally assign interaction to pieces
[as3]
protected function assingInteractivity():void{
king_black.addEventListener(MouseEvent.MOUSE_DOWN, fnStartDrag);
king_black.addEventListener(MouseEvent.MOUSE_UP, fnStopDrag);

king_white.addEventListener(MouseEvent.MOUSE_DOWN, fnStartDrag);
king_white.addEventListener(MouseEvent.MOUSE_UP, fnStopDrag);
}

protected function fnStartDrag(e:MouseEvent):void{
e.currentTarget.lastX = e.currentTarget.x;
e.currentTarget.lastY = e.currentTarget.y;
e.currentTarget.startDrag(false,rect);
e.currentTarget.addEventListener(MouseEvent.MOUSE_OUT, fnStop);
}

protected function fnStopDrag(e:MouseEvent):void{
e.currentTarget.stopDrag();
e.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, fnStop);
// checking overlaping with boxes

var isSnap:Boolean = false;

for(var i:int=0; i= distance(e.currentTarget,boxes_list[i])){

e.currentTarget.x = boxes_list[i].x;
e.currentTarget.y = boxes_list[i].y;

isSnap = true;

break;
}
}

if(isSnap != true){
e.currentTarget.x = e.currentTarget.lastX;
e.currentTarget.y = e.currentTarget.lastY;
}
}

protected function fnStop(e:MouseEvent):void{
e.currentTarget.stopDrag();
e.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, fnStop);
e.currentTarget.x = e.currentTarget.lastX;
e.currentTarget.y = e.currentTarget.lastY;
}

protected function distance(mc1:Object,mc2:Object):Number{
var dist = Math.sqrt((mc1.y-mc2.y)*(mc1.y-mc2.y) + (mc1.x-mc2.x)*(mc1.x-mc2.x));
return dist;
}
[/as3]

Complete main.as

[as3]
/*main.as*/
package{
import flash.display.Sprite;
import flash.events.MouseEvent;
import flash.geom.Rectangle;

public class main extends Sprite{
protected const ROWS:int = 8;
protected const COLS:int = 8;
protected const BOX_WIDTH:int = 40;
protected const BOX_HEIGHT:int = 40;
protected const BOX_COLOR_WHITE:uint = 0xFFFFFF;
protected const BOX_COLOR_BLACK:uint = 0x000000;
protected const SNAP_DISTANCE:int = 15;

protected var boxes_list:Array = new Array(); // for all boxes
protected var boxes_white_list:Array = new Array(); // for white boxes only
protected var boxes_black_list:Array = new Array(); // for black boxes only

protected var king_white:king_w;
protected var king_black:king_b;

protected var rect:Rectangle = new Rectangle(115,40,280,280);

// Constructor
public function main():void{
super();
init();
}

protected function init():void{
placeBoxes(); // placing chess boxes
placeKings(); // placing kings to respective positions
assingInteractivity();
}

protected function placeBoxes():void{
// placing 64 boxes
var b:box;
var yCord:int = 40;
//var remender:int = 0;
var row:int = 1;

for(var i:int=0; i= distance(e.currentTarget,boxes_list[i])){

e.currentTarget.x = boxes_list[i].x;
e.currentTarget.y = boxes_list[i].y;

isSnap = true;

break;
}
}

if(isSnap != true){
e.currentTarget.x = e.currentTarget.lastX;
e.currentTarget.y = e.currentTarget.lastY;
}
}

protected function fnStop(e:MouseEvent):void{
e.currentTarget.stopDrag();
e.currentTarget.removeEventListener(MouseEvent.MOUSE_OUT, fnStop);
e.currentTarget.x = e.currentTarget.lastX;
e.currentTarget.y = e.currentTarget.lastY;
}

protected function distance(mc1:Object,mc2:Object):Number{
var dist = Math.sqrt((mc1.y-mc2.y)*(mc1.y-mc2.y) + (mc1.x-mc2.x)*(mc1.x-mc2.x));
return dist;
}
}
}
[/as3]

Creating Chess Board at Runtime using ActionScript

Creating Number Slide Puzzle Game in Five Simple Steps using ActionScript and AIR

This is very simple number sliding puzzle game I created in Adobe Flash Builder. I would like to share with you, how simply we can create it.

Download Source
Before start project, let’s plan steps how we can create it.



Step 1: Creating ActionScript Project

Open Flash Builder. Go to File>New>ActionScript Project.
Enter project name “SlidingPuzzle” and select Desktop option under Appliction Type. Then click on Finish.
Now open the SlidingPuzzle.as and set its width = 300, height = 325, frameRate=24 and backgroundColor=#FFFFFF.
[as3]
[SWF(width=”300″, height=”325″, frameRate=”24″, backgroundColor=”#FFFFFF”)]
[/as3]

Step 2: Creating number slide class

Right click on src>new>ActionScript class and name it “Slide.as” set superclass “flash.display.Sprite”. Then click Finish.
Now here we will make rounded rectangular slide graphics and placeholder for number.
Slide.as
[as3]
package
{
import flash.display.Shape;
import flash.display.Sprite;
import flash.text.TextField;
import flash.text.TextFormat;

public dynamic class Slide extends Sprite
{
public var txt:TextField = new TextField();
public var format:TextFormat = new TextFormat();

public function Slide()
{
format.size = 36;

var sp:Shape = new Shape();
sp.graphics.beginFill(0x11cc11);
sp.graphics.drawRoundRect(5,5,90,90,10,10);
//sp.graphics.lineStyle(2,0×000000);
sp.graphics.endFill();
this.addChild(sp);

txt.x = 20;
txt.y = 20;
txt.setTextFormat(format);
txt.selectable = false;
txt.mouseEnabled = false;
txt.textColor = 0xffffff;
this.addChild(txt);
}
}
}
[/as3]

Step 3: Setting default position of slides

Now we will define the default positions of slides. The positions we will store in array.
While user will play this game, in that time we will check slide default position with this array on each individual slide movement.
[as3]
public var positionArray:Array = new Array(
{Num:1,xCo:0,yCo:0},
{Num:2,xCo:100,yCo:0},
{Num:3,xCo:200,yCo:0},
{Num:4,xCo:0,yCo:100},
{Num:5,xCo:100,yCo:100},
{Num:6,xCo:200,yCo:100},
{Num:7,xCo:0,yCo:200},
{Num:8,xCo:100,yCo:200}
);
[/as3]

Step 4: Implementing logic to shuffle the slides

First Initialize Random Array with default positions/x y co-ordinates. Then shuffle the co-ordinates and place all the slides according to shuffled co-ordinates.

[as3]
protected function setRandomArray():void{
// Initialize random array with default co-ordinate
randomPosArray = new Array( {xCo:0,yCo:0},
{xCo:100,yCo:0},
{xCo:200,yCo:0},
{xCo:0,yCo:100},
{xCo:100,yCo:100},
{xCo:200,yCo:100},
{xCo:0,yCo:200},
{xCo:100,yCo:200},
{xCo:200,yCo:200});
// Shuffle co-ordinates
randomPosArray = shuffle(randomPosArray);
// Place all the slides with shuffled co-ordinates
replaceSlides(randomPosArray);
}

protected function replaceSlides(arr:Array):void{
for(var i:int=0; i 0) {
arr2.push(arr.splice(Math.round(Math.random() * (arr.length – 1)), 1)[0]);
}

return arr2;
}
[/as3]

Step 5: Setting up user interaction and Game over check

[as3]
protected function handleSlideClick(e:MouseEvent):void{
// Find the distance between empty position and user clicked slide
var dx:Number=e.target.x-lastPos.x;
var dy:Number=e.target.y-lastPos.y;
var dist:Number = Math.sqrt(dx*dx+dy*dy);

// If it is 100 the place the slide to empty postion and set co-ordinates as last position
if(dist == 100){
var tempPos:Point = new Point(e.target.x,e.target.y);
e.target.x = lastPos.x;
e.target.y = lastPos.y;
lastPos = tempPos;
}else{
return;
}

// If slide is on it’s defualt position the set it as True
if(e.target.x == e.target.xCo && e.target.y == e.target.yCo){
e.target.pos = true;
}else{
e.target.pos = false;
}

// Check all the slides are place on position
// If all the slides are on place set Game finished.
var bool:Boolean = false;

for(var i:int=0; i 0) {
arr2.push(arr.splice(Math.round(Math.random() * (arr.length – 1)), 1)[0]);
}

return arr2;
}

}
}
[/as3]