Flash拼图游戏
项目分析
界面设计
功能需求分析
实现拖动
startDrag(lockCenter:Boolean=false, bounds:Rectangle=null):Void //开始拖动
stopDrag():void //停止拖动使用对象的startDrag函数实现对象的拖动：
lockCenter为是否锁定中心，即拖动时鼠标是否锁定在对象注册点;
bounds指定拖动范围限制。
图片去色
//colorMatrix：色彩滤镜
var colorMatrix:ColorMatrix=new ColorMatrix();
//设置饱和度值，-255 to 255，0为灰度图
colorMatrix.SetSaturationMatrix(0);
var colorMatrixFilter:ColorMatrixFilter=new ColorMatrixFilter();
colorMatrixFilter.matrix=colorMatrix.GetFlatArray();
//设置图片滤镜
img.filters=[colorMatrixFilter];图片裁剪
//将图像转换为位图类
var bitmap:Bitmap= Bitmap(img);
//Bitmap类型转BitmapData类型
var bitmapdata:BitmapData=new BitmapData(bitmap.width,bitmap.height,false,0x000000);
bitmapdata.draw(bitmap,new Matrix); //bitmap绘制到bitmapdata
//新建一个BitmapData类型，作为裁剪后的容器（w,h为裁剪后的大小）
var bitmapdataClip:BitmapData=new BitmapData(w,h,false,0x000000);
//将bitmapData复制到bitmapdataClip上，rec为裁剪的区域
bitmapdataClip.copyPixels(bitmapdata,rec,new Point(0,0));
//将裁剪后的图转换为位图类型
var im:Bitmap=new Bitmap(bitmapdataClip);代码分析
主类代码
public function Main() {
//外部图片地址
var url:String="img/img1.jpg";
//ImgCutArgs为自定义类，作用是保存外部图片尺寸和裁剪信息
//ImgCutArgs(width:Number,heiget:Number,纵向裁剪数:int,横向裁剪数:int)
ica=new ImgCutArgs(760,420,5,3);
//添加背景灰度图
//handleBottomImg为自定义方法，作用是获取去色后的灰度图
var bottomImg:Loader=ImgUtil.handleBottomImg(url);
//img1为一个设置好大小和位置的元件,作为容器使用
img1.addChild(bottomImg);
//获取裁剪后的拼图
//AutoTailor为自定义类，作用是获取(3*5)块裁剪后的拼图块数组，为tailor(自定义类)类型
var autoTailor:AutoTailor=new AutoTailor(url,ica.getW(),ica.getH(),ica.getxC(),ica.getyC());
var tailors:Array=autoTailor.getImgs();
//添加拼图
//ica.getxC()*ica.getyC()为(5*3)
for(var i:int=0;i<ica.getxC()*ica.getyC();i++){
//因为设计tailor类时拼图块不是实时生成的，所以常规获取尺寸无效，写了getWidth()和getHeight()方法来获取
var w:Number=tailors[i].getWidth();
var h:Number=tailors[i].getHeight();
//随机放置拼图图块
tailors[i].x=Math.random()*((780-w)-20)+20;
tailors[i].y=Math.random()*((440-h)-20)+20;
//添加按下和松开鼠标事件
tailors[i].addEventListener(MouseEvent.MOUSE_DOWN,EventUp(pintuStartDrag,i));
tailors[i].addEventListener(MouseEvent.MOUSE_UP,EventUp(pintuStopDrag,i));
//添加对象
addChild(tailors[i]);
}
}事件处理
//拖动图块_鼠标按下事件处理
function pintuStartDrag(e:MouseEvent,i:int):void{
var w:Number=tailors[i].getWidth();
var h:Number=tailors[i].getHeight();
//开始拖动，并限制拖动区域
tailors[i].startDrag(false,new Rectangle(20,20,760-w,420-h));
//设置到顶层，因为场景内一共有19个元件，所以这里为(19-1)
this.setChildIndex(tailors[i],18);
}//拖动图块_鼠标松开事件处理
function pintuStopDrag(e:MouseEvent,i:int):void{
//图块停止拖动
tailors[i].stopDrag();
//magnetismCheck为自定义类，作用是检测图块是否需要吸附，若需要则返回一个吸附到的位置，否则返回null
//因为需要能吸附的位置，所以需要传入主类中的ica变量进行计算
var rec:Rectangle=ImgUtil.magnetismCheck(new Rectangle(tailors[i].x,tailors[i].y,tailors[i].getWidth,tailors[i].getHeight),ica);
if(rec!=null){ //检测位置以判断是否自动吸附
tailors[i].x=rec.x;
tailors[i].y=rec.y;
}
}这里的两个事件处理函数都带了参数，事件函数带参实现方法点击这里。
自定义类
handleBottomImg方法
public static function handleBottomImg(url:String):Loader{
var bottomImgLoader:Loader=new Loader();
bottomImgLoader.load(new URLRequest(url));
var colorMatrix:ColorMatrix=new ColorMatrix();
colorMatrix.SetBrightnessMatrix(-15); //亮度
colorMatrix.SetSaturationMatrix(0); //饱和度
var colorMatrixFilter:ColorMatrixFilter=new ColorMatrixFilter();
colorMatrixFilter.matrix=colorMatrix.GetFlatArray();
bottomImgLoader.filters=[colorMatrixFilter];
return bottomImgLoader;
}
Tailor类
//传入外部图urlh和裁剪尺寸信息,添加一个裁剪过的对象
public function Tailor(url:String,rec:Rectangle):void{
//设置目标对象大小
w=rec.width-rec.x;
h=rec.height-rec.y;
//url -> loader
var loader:Loader=new Loader();
lader.load(new URLRequest(url));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onCom);
function onCom(e:Event):void{
//loader -> bitmapdata
var bitmap:Bitmap= Bitmap(loader.content);
var bitmapdata:BitmapData=new BitmapData(bitmap.width,bitmap.height,false,0x000000);
bitmapdata.draw(bitmap,new Matrix);
//bitmapdata Clip
var bitmapdataClip:BitmapData=new BitmapData(w,h,false,0x000000);
bitmapdataClip.copyPixels(bitmapdata,rec,new Point(0,0));
//bitmapdata -> Bitmap
var im:Bitmap=new Bitmap(bitmapdataClip);
addChild(im);
}
}AutoTailor类getImgs方法
public function getImgs():Array{
var arr=new Array();
var n:int=0;
for(var i:int=0;i<=3;i++){
for(var j:int=0;j<=4;j++){
arr[n]=new Tailor(url,new Rectangle(wImg/wSum*j,hImg/hSum*i,wImg/wSum*(j+1),hImg/hSum*(i+1)));
n++;
}
}
return arr;
}imgUtil类magnetismCheck方法
public static function magnetismCheck(rec:Rectangle,ica:ImgCutArgs):Rectangle{
//距离精准位置多少像素吸附
var accuracy:int=20;
//保存精准位置
var xArr:Array=[];
var yArr:Array=[];
//根据切割数和图像尺寸计算精准位置
for(var i:int=0;i<=ica.getxC();i++){
xArr[i]=ica.getW()-ica.getW()/ica.getxC()*(ica.getxC()-i)+20;
}
for(var j:int=0;j<=ica.getyC();j++){
yArr[j]=ica.getH()-ica.getH()/ica.getyC()*(ica.getyC()-j)+20;
}
//检测是否符合吸附标准
for(var k:int=0;k<i-1;k++){
if(rec.x<xArr[k]+accuracy && rec.x>xArr[k]-accuracy){
for(var p:int=0;p<j-1;p++){
if(rec.y<yArr[p]+accuracy && rec.y>yArr[p]-accuracy){
return new Rectangle(xArr[k],yArr[p],ica.getW(),ica.getH());
}
}
}
}
return null;
}源码分享
点击这里下载
提取码：e423