Javascript,JQuery拼图游戏插件

名称:D.PhotoPuzzle拼图游戏

作者:D.夏亦知非

日期:2009-10-17

版本:V1.2@2009-10-22

JQ版本:1.3.2

 

演示地址:(若地址1不流畅可以访问地址2)

http://jquery-demo-d.appspot.com/demo/jquery.d.photopuzzle/demo1.html

http://jquery-demo-d.appspot.com/demo/jquery.d.photopuzzle/demo2.html

 

下载地址:(见附件或以下地址)

http://code.google.com/p/jquery-plugin-d/downloads/list

 

功能:

1.支持自定义图片(可以将仇人的照片剪碎然后丢在一边不拼 )

2.支持自定义分割数量,大小(可以尝试挑战100X100的超级拼图 ,恩,理论上...)

3.支持自定义划分拼图区域(找到网络图片就能直接用,不用专门处理图片 )

 

用法:

<div id="pic"></div>

 

$(document).ready(function(){
	$('#pic').d_photopuzzle({
		x:10,							//水平分割数.默认值:5
		y:10,							//垂直分割数.默认值:5
		size:40,							//分割大小.默认值:80
		top:100,							//起始上边距.默认值:0
		left:100,							//起始左边距.默认值:0
		url:'http://www.bizhiol.com/picture/big/20090514/200905140137589.jpg',//图片地址,必填
		offanimate:false,					//是否关闭动画.默认值:false
		speed:100,						//动画速度.默认值:100
		success:function(){alert('不错不错.');}	//成功后的回调方法.默认值:function(){alert('不错不错.');
	});
});

 

预览:

 

 

更新记录:

 

V1.1:修正分割数大于10后的判定BUG....(都不知道当时怎么想的)

V1.2:修正碎片区的碎片交换所产生的"消失"假象,V1.1修改不完全产生的BUG

评论

3 楼 hqm1988 2009-11-05  

真不错，很有意思！好好学习学习

2 楼 tiantianzzz 2009-10-20  

汗了,不知道当时怎么想的还多加了个xy....感谢支持..嘿嘿

1 楼 zlfoxy 2009-10-20  

真的不错。
不过研究了下 发现了个bug，当你的打碎成多于10*10时，function check会判断错误。
check里的判断是根据xy的值来的，
如果xy是110，它可以对应1，10的块 也可以对应11，0的块。
xy赋值的时候还是要给x和y之间加个间隔号吧。