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]

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *