自己做的拼图源码

最新推荐文章于 2021-05-30 21:21:07 发布
最新推荐文章于 2021-05-30 21:21:07 发布
阅读量1.1k 收藏 2
点赞数
分类专栏： FLEX 文章标签： function button application ui layout encoding
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xbdf1234/article/details/6865119
版权

 

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" xmlns:UI="UI.*" creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.containers.Canvas;
			import mx.containers.Tile;
			import mx.controls.Spacer;
			import mx.controls.Text;
			import mx.messaging.AbstractConsumer;
			private var Can:UIComponent;  //定义容器
			private var loader:Loader=new Loader(); 
			private var bit:Bitmap; 
			private var bitdata:BitmapData;
			private var Canpanduan:Sprite;  
			private var sj:int=0;
			
			private var lineSprite:Sprite=new Sprite();//定义网格
			
			private var ROWS:int=4;			//定义行与列

			
			private var tileWidth:int;   //定义方块高宽

			private var tileHeight:int;
			
			private var arrImg:Array=[]; //定义碎片数组
			private var arrImgs:Array=[];//图片切换数组
			private var arrFlag:Array=[]; //判断数组
			
			protected function ChangeImage_clickHandler(event:MouseEvent):void   //图片切换
			{
				
					sj=(sj+1)%11;
					arrImgs=["images/1.jpg","images/2.jpg","images/3.jpg","images/4.jpg","images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg","images/9.jpg","images/10.jpg","images/11.jpg"];
					loader.load(new URLRequest(arrImgs[sj]));
					UIdatu.addChild(loader);
					
					ROWSCOUNT.text=ROWS+"X"+ROWS;
			}
			
			
			
			private function init():void   //加载背景图
			{
				loader.load(new URLRequest("images/1.jpg"));
				UIdatu.addChild(loader);
				
				
				
				
			}

			
			private function MousedownHandler(event:MouseEvent):void //鼠标按下
			{
				
				Canpanduan=Sprite(event.target);  //当前选中
				Canpanduan.alpha=0.5;
				var topPosition:uint=UI2.numChildren -1; //图片层次上调
				UI2.setChildIndex(Canpanduan,topPosition);
				Canpanduan.startDrag();
				Canpanduan.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
				Canpanduan.addEventListener(MouseEvent.MOUSE_MOVE,MousemoveHandler);


			}

			private function MouseUpHandler(event:MouseEvent):void  //最后判断 拼图过程
			{

				Canpanduan=Sprite(event.target);
				Canpanduan.stopDrag();
				Canpanduan.alpha=1;
					var tileX:int=int(Canpanduan.name)%ROWS*tileWidth;
					var tileY:int=int(int(Canpanduan.name)/ROWS)*tileHeight;
						if(((tileX-Canpanduan.x)<10&&(tileX-Canpanduan.x)>-10)&&((tileY-Canpanduan.y)<10&&(tileY-Canpanduan.y)>-10))  //方块与边线距离
						{
							Canpanduan= Sprite(event.target);
							Canpanduan.stopDrag();
							Canpanduan.x=tileX;    //定义现在方块坐标
							Canpanduan.y=tileY;
							
							UI2.removeChild(Canpanduan);
							UIFinal.addChild(Canpanduan);
							UILast.addChild(UIFinal);
							arrFlag.push("")
							Canpanduan.removeEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
							Canpanduan.removeEventListener(MouseEvent.MOUSE_MOVE,MousemoveHandler);
							Canpanduan.removeEventListener(MouseEvent.MOUSE_DOWN,MousedownHandler);
							
					}
				if(arrFlag.length==ROWS*ROWS)
				{
					succeed.visible=true;
					
				}
			}
			
			private function MousemoveHandler(event:MouseEvent):void 
			{

			}		
			private function BtnStart_clickHandler(event:MouseEvent):void 
			{		
				                //画线事件
				UI2=new UIComponent();
				UIFinal=new UIComponent();

				//鼠标单击
				
				needImage.enabled=true;
				red.enabled=false;
				add.enabled=false;
				ChangeImage.enabled=false;
				UIdatu.visible=false;
				Lab.visible=true;
				BtnStart.visible=false;
				BtnReset.visible=true;
				UIxiaotu.visible=true;
				this.bit=Bitmap(loader.content);
				this.tileWidth=this.bit.width/ROWS;
				this.tileHeight=this.bit.height/ROWS;//定义宽高
				this.bitdata=this.bit.bitmapData;
				
				//定义提示小图
				var bitdataSmall:BitmapData=this.bitdata.clone();
				var bitSmall:Bitmap=new Bitmap(bitdataSmall);
				UIxiaotu.addChild(bitSmall);
				bitSmall.scaleX=0.3;
				bitSmall.scaleY=0.3;
				bitSmall.x=850;
				bitSmall.y=40;

				for(var i:int=0;i<ROWS;i++) //行
				{
					for(var j:int=0;j<ROWS;j++) //列
					{
						//纵向分割
						lineSprite.graphics.lineStyle(1,0x000000,0.8); //线的格式
						
						lineSprite.graphics.moveTo(0,0);//坐边线
						lineSprite.graphics.lineTo(0 ,bit.height);
						
						
						lineSprite.graphics.moveTo(0,0); //右边线
						lineSprite.graphics.lineTo(bit.width,0);
						
						lineSprite.graphics.moveTo(bit.x + tileWidth*(i+1) , bit.y); //整体分割线
						lineSprite.graphics.lineTo(bit.x + tileWidth*(i+1) , bit.y + bit.height);
						//横向分割
						lineSprite.graphics.moveTo(bit.x , bit.y + tileHeight*(i+1));
						lineSprite.graphics.lineTo(bit.x + bit.width , bit.y + tileHeight*(i+1));
						rectCanvas.addChild(lineSprite);
						
						
						
						var rectBitmapdata:BitmapData=new BitmapData(tileWidth,tileHeight,true,0xff0000); // 切小块，宽高
						var bitarr:ByteArray = bitdata.getPixels(new Rectangle(j * tileWidth, i * tileHeight, tileWidth, tileHeight));   //切出小块
						bitarr.position=0; //索引为0 第一个位置
						rectBitmapdata.setPixels(new Rectangle(0,0,tileWidth,tileHeight),bitarr);
						var bitmap:Bitmap=new Bitmap(rectBitmapdata);
						Can= new UIComponent(); //新建容器
						Can.addChild(bitmap);
						arrImg.push(Can);
						Can.name=String(i*ROWS+j);//单个方块起名
						Can.x=Math.random()*200+800;
						Can.y=Math.random()*200+200;
						UI2.addChild(Can);
						UIxiaotu.addChild(UI2);
						Can.addEventListener(MouseEvent.MOUSE_DOWN,MousedownHandler);
					}			
				}
			}

			private function BtnReset_clickHandler(event:MouseEvent):void //重新开始
			{
				arrFlag=new Array();
				needImage.enabled=false;
				UILast.removeChild(UIFinal);
				UIdatu.visible=true;
				succeed.visible=false;         
				UIdatu.alpha=1;
				red.enabled=true;
				add.enabled=true;
				Lab.visible=false;
				UIxiaotu.visible=false;
				BtnStart.visible=true;
				BtnReset.visible=false;
				ChangeImage.enabled=true;
				UIxiaotu.removeChild(UI2);
				lineSprite.graphics.clear();

			}


			protected function add_clickHandler(event:MouseEvent):void        //递增行列数
			{
				if(ROWS>3)
				{
					ROWS--;
				}
				ROWSCOUNT.text=ROWS+"X"+ROWS;
			}


			protected function red_clickHandler(event:MouseEvent):void       //递减行列数
			{
				if(ROWS<8)
				{
					ROWS++;
				}
				ROWSCOUNT.text=ROWS+"X"+ROWS;
			}


			protected function needImage_clickHandler(event:MouseEvent):void       //需要背景图片按钮
			{
				UIdatu.visible=true;
				UIdatu.alpha=0.25;
				needImage.visible=false;
				NoneedImage.visible=true;
			}


			protected function NoneedImage_clickHandler(event:MouseEvent):void     //不需要背景图片按钮
			{
				UIdatu.visible=false;
				needImage.visible=true;
				NoneedImage.visible=false;
			}

		]]>
	</mx:Script>
	<mx:Panel x="52" y="48" width="1300" height="750" layout="absolute" title="拼图游戏" fontSize="15">

	<mx:Canvas x="10" y="10">
		<mx:UIComponent  x="0" y="0" id="UIdatu">
			
		</mx:UIComponent>

		<mx:UIComponent  x="0" y="0" id="UI2" >
		
		</mx:UIComponent>
		<mx:UIComponent id="UIFinal" x="0" y="0">
			
		</mx:UIComponent>
		<mx:UIComponent id="UILast" x="0" y="0">
			
		</mx:UIComponent>
		<mx:UIComponent  x="0" y="0" id="UIxiaotu"   >
		
		</mx:UIComponent>
		<mx:UIComponent  x="0" y="0" id="rectCanvas">
			
		</mx:UIComponent>

		<mx:Button x="614" y="631" label="开始游戏" width="100" height="28" id="BtnStart" click="BtnStart_clickHandler(event)" fontSize="15"/>
		<mx:Button x="615" y="631" label="在玩一遍" width="100" height="28" id="BtnReset" click="BtnReset_clickHandler(event)" fontSize="15" visible="false"/>
		<mx:Label  x="850" y="10" text="提示图" fontSize="20" color="#FF0000" id="Lab" visible="false"/>
		<mx:Label x="195" y="208" text="恭喜你 过关了!!" width="400" height="83" fontSize="50" color="#FF0000" id="succeed" visible="false"/>
		<mx:TextArea x="326" y="631" height="22" id="ROWSCOUNT" text="4X4" enabled="false"/>
		<mx:Button x="10" y="631" label="不需要背景图" fontSize="15" id="NoneedImage" click="NoneedImage_clickHandler(event)"  visible="false" />
		<mx:Button x="494" y="631" label="+" id="red" click="red_clickHandler(event)"/>
		<mx:Button x="542" y="631" label="-" id="add" click="add_clickHandler(event)"/>
		<mx:Button x="10" y="631" label="需要背景图" fontSize="15" id="needImage" click="needImage_clickHandler(event)" enabled="false" />
		<mx:Button x="144" y="631" label="切换图像" width="127" fontSize="15" id="ChangeImage" click="ChangeImage_clickHandler(event)"/>
		<mx:Label x="279" y="633" text="网格"/>

	</mx:Canvas>
	</mx:Panel>
	


</mx:Application>

 

GavinFly
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端技术搭建拼图小游戏（内含源码）
官方推荐
06-08 3万+
基于前端HTML、CSS、JS实现建议版拼图小游戏，无论你是否具备前端技术，都可以直接从文中复制源码运行到你的电脑上！
Unity拼图游戏源码
08-15
1、Unity拼图游戏 图片互换： if (Vector2.Distance(btn_Rect.anchoredPosition,null_Img.anchoredPosition)==bg_Layout.cellSize.x+bg_Layout.spacing.x) { print("与空图片相近，点击图片的按钮的图片和空图片的...
数字拼图源代码。。。。
07-03
适合新手学习的数字拼图的源代码文件，欢迎大家来借鉴积分上涨请私信我，我改成免费得。积分上涨请私信我，我改成免费得。
疯狂拼图完整源代码
norains的专栏
01-30 6276
        CrazyPuzzle的完整源代码,整个架构已经基本打好,但因为某些原因,部分功能尚未实现,在此一并贴出来.如果各位朋友有兴趣,可自行完善相应功能.//------------------------------//MyGameCanvas.java//------------------------------package src;import javax.microe
手机拼图游戏附源代码
05-01
简单，可以作为j2me 初学者，参考
Android版拼图游戏源码分享
06-17
己花了2个星期功夫利用晚上时间写了个拼图游戏(看过仗剑小猪的拼图游戏代码)，目前游戏不是很完善，但是基本框架功能都有，流程是仿照 “保卫萝卜”的目前游戏有几个问题： 1.游戏UI有问题，按钮和功能不是对应的，比如“About” 按钮，其实是退出功能，我不会ps，就cocos源代码弄了个按钮过来 2.目前的主题只有“动物”，不过可以仿照init.plist init1.plist 可以添加更多的主题，程序是支持的。 3.游戏缩放可能有问题，我在720p手机上测试的，显示正常 4.游戏可能还存在内存问题，有时候第一次进不去，要多进几次才行 5.背景音乐没有关闭功能，游戏主界面滑动没有音效功能 6.游戏主界面滑动感觉不灵敏，需要。
js-canvas-拼图
12-26
基于js和canvas开发的拼图，可以拖拽上传图片，自动切图、随机打乱、判断结束等
android多边形拼图源码,【BMPinTu】一款拼图App的demo。多边形凹凸拼图
weixin_29251131的博客
05-29 341
项目介绍：GitHub地址：https://github.com/birdmichael/BMPinTu项目特点一款市面少见的拼图demo，很常见的是类似华容道一样的拼图，而不是类似贴图的拼图。类似”魔法拼图“一样的拼图demo。支持提示原图支持自定义模块数量注释即文档代码说明代码主逻辑步骤：初始化数据。创建切片类型，坐标，旋转属性创建贝塞尔曲线创建裁剪后的图片创建其他视图(顶部标题，求救按钮)-...
易语言拼图源码-易语言
06-13
标题提到的“易语言拼图源码”是指使用易语言编写的拼图游戏的源代码。这种源码可以作为一个学习资源，帮助初学者理解游戏开发的基本流程和易语言的应用。 在易语言中，开发者可以通过简单的语句实现复杂的逻辑操作...
自动拼图软件(源码)
06-17
将数字１－８顺序打乱，然后自动完成排序功能
安卓源代码-实现拼图游戏
07-22
安卓源代码-实现拼图游戏
canvas拼图功能实现代码示例
12-14
最近做项目的时候遇到照片拼图的功能，便在这里分享自己的封装的canvas拼图功能，可能代码写的不好，如果有疑问或者是有更好的方法的，可以私聊我，或者是评论指出，感谢各位 实现的思路其实挺简单的，主要是通过服务端获取图片链接，图片宽度，图片高度，然后利用简单的递归实现就行了（注意移动端需要采用2倍数的比例，否则会出现图片模糊的问题） /** * canvas绘图数据 * @param {Object[]} option.photoData * @param {string} option.photoData[].photo - 照片的链接地址 * @pa
图片拼图：HTML游戏
04-09
一个HTML 2D游戏，用HTML / CSS和JavaScript描述一些基本的游戏开发技巧。
canvas-puzzle:在画布上绘制的拼图
07-02
画布拼图 用 html5-canvas 绘制的益智游戏。 网址： : ＃＃介绍 拼图是一种著名的游戏、问题或玩具，可以测试一个人的聪明才智。 在拼图中，人们需要以合乎逻辑的方式将碎片拼凑在一起，以便得出拼图的正确解决方案。 ＃＃让我们玩 很容易开始。 进入索引页面，点击开始按钮，即可享受游戏。 在游戏的设置部分，您可以按照之前的设置更改背景，或者从您的电脑中选择您自己的图片。 维度也可以修改。 “等级”越高，游戏难度越大。 按“作弊”按钮，您可以浏览原始图片。 祝你好运！ ＆＆ 玩得开心！ ＃＃发展 布局： . |--index.html |--resource |--images |--puzzle.js |--puzzle.css |--README.md ＃＃执照 麻省理工学院执照 :copyright:2014-2015 Caesor
代码 拼图游戏源码 代码 拼图游戏源码
05-14
代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏源码代码 拼图游戏...
拼图源码
11-06
【标题】"拼图源码"所指的可能是一个包含拼图游戏开发的源代码集合。拼图游戏，也称为拼板游戏，是一种常见的休闲娱乐活动，将其转化为数字形式，通常涉及图像切割、用户交互、逻辑判断等多个编程方面。在这个项目中...
c语言拼图游戏源码.zip
06-14
c语言拼图游戏源码.zip c语言拼图游戏源码.zip c语言拼图游戏源码.zip c语言拼图游戏源码.zip c语言拼图游戏源码.zip c语言拼图游戏源码.zip c语言拼图游戏源码.zip c语言拼图游戏源码.zip c语言拼图游戏源码.zip ...
html整体图片拆分拼图代码源代码,canvas拼图功能实现代码示例
weixin_39517357的博客
05-30 519
最近做项目的时候遇到照片拼图的功能，便在这里分享自己的封装的canvas拼图功能，可能代码写的不好，如果有疑问或者是有更好的方法的，可以私聊我，或者是评论指出，感谢各位实现的思路其实挺简单的，主要是通过服务端获取图片链接，图片宽度，图片高度，然后利用简单的递归实现就行了(注意移动端需要采用2倍数的比例，否则会出现图片模糊的问题)/*** canvas绘图数据* @param {Object[]} ...
拼图scratch 源码
最新发布
01-19
拼图scratch是一款非常受欢迎的编程学习工具，它帮助用户通过拖拽积木式代码...总之，拼图scratch的源码是一个非常有价值的学习资源，通过学习它，不仅可以提高自己的编程能力，还可以为这个优秀的项目贡献自己的力量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值