效果如下图，如果其上下左右有空白处的话，可以实现交换，最后可以排列成有序的12345678

实现代码如下：

包含两个as文件：

第一个是构造小方块数字的as文件：RectShape.as

package {

import flash.display.Sprite;

import flash.text.TextFormat;

import flash.text.TextField;

import flash.text.TextFieldAutoSize;

public class RectShape extends Sprite {

private var xzuobiao:uint;

private var yzuobiao:uint;

public function RectShape(num:uint) {

init(num);

}

private function init(num:uint) {

this.graphics.beginFill(0x00ff00);

this.graphics.lineStyle(1);//设置线条粗细

this.graphics.drawRect(0,0,40,40);

this.graphics.endFill();

//设置数字

var txt_format:TextFormat=new TextFormat();

txt_format.size=30;

var txt_num:TextField=new TextField();

txt_num.selectable=false;//设置文本字段不可选

txt_num.text=""+num;

txt_num.width=40;

txt_num.height=40;

txt_num.x=0;

txt_num.y=0;

txt_num.setTextFormat(txt_format);

txt_num.autoSize=TextFieldAutoSize.CENTER;

this.addChild(txt_num);

}

//对属性设置get set方法

public function get X():uint {

return xzuobiao;

}

public function set X(xzuo:uint):void {

this.xzuobiao=xzuo;

}

public function get Y():uint {

return yzuobiao;

}

public function set Y(yzuo:uint):void {

this.yzuobiao=yzuo;

}

}

}

第二个是入口as：Main.as

package{

import flash.display.Sprite;

import flash.events.MouseEvent;

public class Main extends Sprite{

private var indexShape:Array=new Array(1,2,3,4,5,6,7,8);//表示需要显示的八个方块的文本

private var jilu:Array=[[1,1,1],[1,1,1],[1,1,1]];//默认值为1，记录该位置是否放了小方块，没有放方块时其值为1，放了方块后改为0

private var pielie:Array=[[0,0],[40,0],[80,0],[0,40],[40,40],[80,40],[0,80],[40,80],[80,80]];//定义小方块排列的xy坐标

public function Main(){

init();

}

private function init():void{

var kuang:Sprite=new Sprite();

kuang.graphics.lineStyle(3,0xff00ff);

kuang.graphics.drawRect(0,0,120,120);

kuang.graphics.endFill();

kuang.x=215;

kuang.y=140;

addChild(kuang);

//随机的填充数字1-8

for(var i:uint=1;i<=8;i++){

var index:uint=Math.floor(Math.random()*indexShape.length);

var num:uint=indexShape[index];

indexShape.splice(index,1);//在数组中移除该数字

var shape:RectShape=new RectShape(num);//生成小方块

shape.mouseChildren=false;//解决方块被TextField文本框覆盖的问题

//随机生成一个位置来存放小方块

var position:uint=Math.floor(Math.random()*pielie.length);

var positionValue:Array=pielie[position];

pielie.splice(position,1);//删除记录的该位置

shape.x=positionValue[0];

shape.y=positionValue[1];

shape.X=positionValue[0]/40;

shape.Y=positionValue[1]/40;

//修改记录的位置的值改为0

jilu[positionValue[0]/40][positionValue[1]/40]=0;

kuang.addChild(shape);

//添加鼠标点击事件

shape.addEventListener(MouseEvent.CLICK,moveNum);

}

}

private function moveNum(evt:MouseEvent):void{

var left:int=evt.target.X-1;

var right:int=evt.target.X+1;

var top:int=evt.target.Y+1;

var bottom:int=evt.target.Y-1;

//处理向左移动

if(left!=-1&&jilu[left][evt.target.Y]==1){

//trace("come left");

jilu[evt.target.X][evt.target.Y]=1;

jilu[left][evt.target.Y]=0;

evt.target.X=left;

evt.target.x-=40;//向左移动40

}else if(right!=3&&jilu[right][evt.target.Y]==1){

//trace("come right");

jilu[evt.target.X][evt.target.Y]=1;

jilu[right][evt.target.Y]=0;//修改记录

evt.target.X=right;

evt.target.x+=40;//向右移动40

}else if(top!=-1&&jilu[evt.target.X][top]==1){

jilu[evt.target.X][evt.target.Y]=1;

jilu[evt.target.X][top]=0;//修改记录

evt.target.Y=top;

evt.target.y+=40;//向上移动40

}else if(bottom!=3 &&jilu[evt.target.X][bottom]==1){

jilu[evt.target.X][evt.target.Y]=1;

jilu[evt.target.X][bottom]=0;//修改记录

evt.target.Y=bottom;

evt.target.y-=40;//向上移动40

}

}

}

}

赶紧试试吧！！！