本文实例分析了JavaScript实现的拼图算法。分享给大家供大家参考,具体如下:
学了html5的拖拽事件,相信做出一款小小的拼图游戏也不难吧。就来说一下怎么用拖事件完成拼图游戏吧,当然html5的新方法在IE下是不兼容的。这里我把这个拼图游戏封装成一个小插件,感兴趣的话可以直接复制来用,使用方法很简单。
HTML, 3个div里面什么都不用写,分别是用来放拼图,参照图,拼图面吧的。
& lt; div id=" selectpanel "祝辞& lt;/div>
& lt; div id=" orginalimg "祝辞& lt;/div>
& lt; div id=" mathpanel "祝辞& lt;/div>
之前
CSS,这里CSS基本不用写,要写的话可以把保证金和填充归0,最好还是写一下。
*{保证金:0;填充:0;}
之前
重点javascript脚本(封装部分)
函数拼图(imgWidth imgHeight、cuttingoffX cuttingoffY, img) {
var selectPanel=. getelementbyid (selectPanel ");//拼图面板
var mathPanel=. getelementbyid (mathPanel ");//拼图匹配面板
var orginalImg=. getelementbyid (orginalImg ");//参照图面板
selectPanel.style。cssText='宽度:汽车;高度:汽车;边界:2 px固体黑色;溢出:隐藏;浮动:左;保证金:10 px;”;
mathPanel.style。cssText='宽度:汽车;高度:汽车;边界:2 px固体黑色;溢出:隐藏;浮动:正确的,保证金:10 px;”;
var金额=(imgWidth/cuttingoffX) * (imgHeight/cuttingoffY);//根据自定义每块拼图的宽高,计算拼图的总数量
var jsonPosition=[];
(var i=0; i<数量;我+ +){//一个数组模拟成一个二维矩阵,用json来存这个矩阵,并且每个位置给它一个匹配值M
jsonPosition[我]={X:我% (imgWidth/cuttingoffX), Y:方法(i/(imgHeight/cuttingoffY)), M:我};
}
(var c=0; c<数量;c++){//随机生成拼图位置
var divImg=document.createElement (" div ");
divImg.style.width=cuttingoffX +“px”;
divImg.style.height=cuttingoffY +“px”;
divImg.style.backgroundImage=" url (img/+ img +)”;
divImg.style.backgroundRepeat="没有重演”;
divImg.style。边境=" 1 px冲灰”;
divImg.style.float=白蟆?
divImg.style.cursor=爸刚搿?
如果(c % (imgWidth/cuttingoffX)==0,和c !=0)
divImg.style.clear=白蟆?
var rendomPositon=jsonPosition.splice (Math.floor (math . random () * jsonPosition.length), 1) [0];
divImg.style.backgroundPosition=rendomPositon [' X '] * (-cuttingoffX) +“px”+“+ rendomPositon [Y] * (-cuttingoffY) +“px”;
divImg.draggable=" true ";
divImg.maths=rendomPositon (“M”);
selectPanel.appendChild (divImg);
}
(var c=0; c<数量;c++){//生成拼图匹配面板
var divEmpty=document.createElement (" div ");
divEmpty.style.width=cuttingoffX +“px”;
divEmpty.style.height=cuttingoffY +“px”;
divEmpty.style。边境=" 1 px固体灰色”;
divEmpty.style.float=白蟆?
如果(c % (imgWidth/cuttingoffX)==0,和c !=0)
divEmpty.style.clear=白蟆?
divEmpty.maths=c;
mathPanel.appendChild (divEmpty);
}
var orginalImgWidth=document.body.clientWidth - (selectPanel.offsetWidth + selectPanel.offsetLeft + 10) * 2;
orginalImg.style。cssText="宽度:" + orginalImgWidth +“px;高度:“+ orginalImgWidth +“px;位置:绝对;左:50%;margin-left:”+ (-orginalImgWidth/2) +“px;最高:10 px;”;
orginalImg.style.background=" url (img/+ img +)没有重演0 0”;
orginalImg.style。backgroundSize=orginalImgWidth + + orginalImgWidth“px”+“px”;
var divImgs=selectPanel.getElementsByTagName (" div ");
var divEmptys=mathPanel.getElementsByTagName (" div ");
(var e=0; eJavaScript实现的拼图算法分析
