javascript拼图算法

学了html5的拖拽事件，相信做出一款小小的拼图游戏也不难吧。就来说一下怎么用drag事件完成拼图游戏吧，当然html5的新方法在IE下是不兼容的。这里我把这个拼图游戏封装成一个小插件，感兴趣的话可以直接copy来用，使用方法很简单。

HTML，3个div里面什么都不用写，分别是用来放拼图，参照图，拼图面吧的。

CSS，这里CSS基本不用写，要写的话可以把margin和padding归0，最好还是写一下。

		*{margin: 0;padding: 0;}

重点javascript脚本(封装部分)

function Puzzle(imgWidth,imgHeight,cuttingoffX,cuttingoffY,img){
	var selectPanel=document.getElementById("selectpanel");//拼图面板
	var mathPanel=document.getElementById("mathpanel");//拼图匹配面板
	var orginalImg=document.getElementById("orginalimg");//参照图面板
	selectPanel.style.cssText='width: auto;height: auto;border: 2px solid black;overflow: hidden;float: left;margin: 10px;';
	mathPanel.style.cssText='width: auto;height: auto;border: 2px solid black;overflow: hidden;float: right;margin: 10px;';
	var amount=(imgWidth/cuttingoffX)*(imgHeight/cuttingoffY);//根据自定义每块拼图的宽高，计算拼图的总数量
	var jsonPosition=[];
	for(var i=0;i

javascript脚本(调用方法)

window.οnlοad=function(){
	//图的原始宽度(原图宽)，图的原始高度(原图高)，自定每块拼图的宽度(能被原图宽整除)，自定每块拼图的高度(能被原图高整除)，图片名(需放在img下)
	Puzzle(500,500,125,125,"haqi.jpg");
}

这里直接调用Puzzle这个函数哦，要注意的是，前面两个参数一定要为图片原始的宽高，而且为了效果更好的横屏拼图展示，这个图片的宽度啊最好小于屏幕横分辨率的1/2，多出来的话用photoshop调一下图片尺寸也是可以的。还有一个最重要的是，自定义每块小拼图的宽高一定是能被原始图片宽高整除的。说白了就是，第3个参数能被第1个参数整除，第4个参数能被第2个参数整除。最后一个参数就是图片名了，而且这个图片是放在img下的。

下面就来看看初始化拼图游戏的效果，而且每次刷新页面，拼图面板的小图都是随机排列的。这个狗狗的图大小是500x500，每个小图切割宽高为125x125，所以拼图排列是500/125*500/125=16,就是四行四列吧=>4x4，当然这个参数是可以改的，每个小拼图的宽高越小，它切出来的图就越多。

为了凸显这个函数的灵活性，下面再换种参数进行调用。

window.οnlοad=function(){
	//图的原始宽度(原图宽)，图的原始高度(原图高)，自定每块拼图的宽度(能被原图宽整除)，自定每块拼图的高度(能被原图高整除)，图片名(需放在img下)
	Puzzle(500,500,100,100,"beauty.jpg");
}

换成了一张500x500的美女图，切割宽高为100x100

试玩一波游戏先：(为了展示效果降低游戏难度)