Flash拼图游戏

Posted 2022-05-24 yangjiale

 

Flash拼图游戏

• 项目分析
• 界面设计
• 功能需求分析
• 实现拖动
• 图片去色
• 图片裁剪
• 代码分析
• 主类代码
• 事件处理
• 自定义类
• handleBottomImg方法
• Tailor类
• AutoTailor类getImgs方法
• imgUtil类magnetismCheck方法
• 源码分享

 

项目分析

界面设计

 

功能需求分析

实现拖动

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