JavaScript實(shí)現(xiàn)的拼圖算法分析
更新時(shí)間：2019年02月13日 11:55:33 作者：測(cè)試貓
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的拼圖算法,結(jié)合實(shí)例形式分析了javascript圖形拼接與判定算法相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下
本文實(shí)例分析了JavaScript實(shí)現(xiàn)的拼圖算法。分享給大家供大家參考，具體如下：
學(xué)了html5的拖拽事件，相信做出一款小小的拼圖游戲也不難吧。就來(lái)說(shuō)一下怎么用drag事件完成拼圖游戲吧，當(dāng)然html5的新方法在IE下是不兼容的。這里我把這個(gè)拼圖游戲封裝成一個(gè)小插件，感興趣的話可以直接copy來(lái)用，使用方法很簡(jiǎn)單。
HTML，3個(gè)div里面什么都不用寫，分別是用來(lái)放拼圖，參照?qǐng)D，拼圖面吧的。
<div id="selectpanel"></div> <div id="orginalimg"></div> <div id="mathpanel"></div>
CSS，這里CSS基本不用寫，要寫的話可以把margin和padding歸0，最好還是寫一下。
*{margin: 0;padding: 0;}
重點(diǎn)javascript腳本(封裝部分)
function Puzzle(imgWidth,imgHeight,cuttingoffX,cuttingoffY,img){
var selectPanel=document.getElementById("selectpanel");//拼圖面板
var mathPanel=document.getElementById("mathpanel");//拼圖匹配面板
var orginalImg=document.getElementById("orginalimg");//參照?qǐng)D面板
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);//根據(jù)自定義每塊拼圖的寬高，計(jì)算拼圖的總數(shù)量
var jsonPosition=[];
for(var i=0;i<amount;i++){//一個(gè)數(shù)組模擬成一個(gè)二維矩陣，用json來(lái)存這個(gè)矩陣，并且每個(gè)位置給它一個(gè)匹配值M
jsonPosition[i]={X:i%(imgWidth/cuttingoffX),Y:parseInt(i/(imgHeight/cuttingoffY)),M:i};
}
for(var c=0;c<amount;c++){//隨機(jī)生成拼圖位置
var divImg=document.createElement("div");
divImg.style.width=cuttingoffX+"px";
divImg.style.height=cuttingoffY+"px";
divImg.style.backgroundImage="url(img/"+img+")";
divImg.style.backgroundRepeat="no-repeat";
divImg.style.border="1px dashed gray";
divImg.style.float="left";
divImg.style.cursor="pointer";
if(c%(imgWidth/cuttingoffX)==0&&c!=0)
divImg.style.clear="left";
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);
}
for(var c=0;c<amount;c++){//生成拼圖匹配面板
var divEmpty=document.createElement("div");
divEmpty.style.width=cuttingoffX+"px";
divEmpty.style.height=cuttingoffY+"px";
divEmpty.style.border="1px solid gray";
divEmpty.style.float="left";
if(c%(imgWidth/cuttingoffX)==0&&c!=0)
divEmpty.style.clear="left";
divEmpty.maths=c;
mathPanel.appendChild(divEmpty);
}
var orginalImgWidth=document.body.clientWidth-(selectPanel.offsetWidth+selectPanel.offsetLeft+10)*2;
orginalImg.style.cssText="width: "+orginalImgWidth+"px;height:"+orginalImgWidth+"px;position:absolute;left:50%;margin-left:"+(-orginalImgWidth/2)+"px;top:10px;";
orginalImg.style.background="url(img/"+img+") no-repeat 0 0";
orginalImg.style.backgroundSize=orginalImgWidth+"px "+orginalImgWidth+"px";
var divImgs=selectPanel.getElementsByTagName("div");
var divEmptys=mathPanel.getElementsByTagName("div");
for(var e=0;e<divImgs.length;e++){
divImgs[e].ondragstart=function(event){//鼠標(biāo)開始拖拽拼圖，并且拿到它的匹配值maths
var event=event||window.event;
event.dataTransfer.setData("math",this.maths);
}
divImgs[e].ondrag=function(){
}
divImgs[e].ondragend=function(){
}
divEmptys[e].ondragenter=function(){
this.style.backgroundColor="red";
}
divEmptys[e].ondragover=function(event){//取消在拼圖匹配面板的默認(rèn)事件，否則ondrop無(wú)效
return false;
}
divEmptys[e].ondragleave=function(){
this.style.backgroundColor="transparent";
}
divEmptys[e].ondrop=function(event){//拖拽的拼圖在匹配面板放下時(shí)執(zhí)行函數(shù)
var event=event||window.event;
this.style.backgroundColor="transparent";
if(event.dataTransfer.getData("math")==this.maths){//判斷拼圖傳過(guò)來(lái)的maths匹配值是否和匹配面板的maths一樣，如果是則匹配成功
for(var i=0;i<divImgs.length;i++){
if(divImgs[i].maths==this.maths){
this.style.backgroundImage=divImgs[i].style.backgroundImage;
this.style.backgroundRepeat=divImgs[i].style.backgroundRepeat;
this.style.backgroundPosition=divImgs[i].style.backgroundPosition;
divImgs[i].setAttribute("draggable","false");
divImgs[i].style.background="none";
}
}
}
}
}
}
//瀏覽器窗口發(fā)生變化時(shí)的圖片處理
window.onresize=function(){
var selectPanel=document.getElementById("selectpanel");
var orginalImg=document.getElementById("orginalimg");
var orginalImgWidth=document.body.clientWidth-(selectPanel.offsetWidth+selectPanel.offsetLeft+10)*2;
orginalImg.style.width=orginalImg.style.height=orginalImgWidth+"px";
orginalImg.style.marginLeft=-orginalImgWidth/2+"px";
orginalImg.style.backgroundSize=orginalImgWidth+"px "+orginalImgWidth+"px";
}
javascript腳本(調(diào)用方法)
window.onload=function(){
//圖的原始寬度(原圖寬)，圖的原始高度(原圖高)，自定每塊拼圖的寬度(能被原圖寬整除)，自定每塊拼圖的高度(能被原圖高整除)，圖片名(需放在img下)
Puzzle(500,500,125,125,"haqi.jpg");
}
這里直接調(diào)用Puzzle這個(gè)函數(shù)哦，要注意的是，前面兩個(gè)參數(shù)一定要為圖片原始的寬高，而且為了效果更好的橫屏拼圖展示，這個(gè)圖片的寬度啊最好小于屏幕橫分辨率的1/2，多出來(lái)的話用photoshop調(diào)一下圖片尺寸也是可以的。還有一個(gè)最重要的是，自定義每塊小拼圖的寬高一定是能被原始圖片寬高整除的。說(shuō)白了就是，第3個(gè)參數(shù)能被第1個(gè)參數(shù)整除，第4個(gè)參數(shù)能被第2個(gè)參數(shù)整除。最后一個(gè)參數(shù)就是圖片名了，而且這個(gè)圖片是放在img下的。
下面就來(lái)看看初始化拼圖游戲的效果，而且每次刷新頁(yè)面，拼圖面板的小圖都是隨機(jī)排列的。這個(gè)狗狗的圖大小是500x500，每個(gè)小圖切割寬高為125x125，所以拼圖排列是500/125*500/125=16,就是四行四列吧=>4x4，當(dāng)然這個(gè)參數(shù)是可以改的，每個(gè)小拼圖的寬高越小，它切出來(lái)的圖就越多。
為了凸顯這個(gè)函數(shù)的靈活性，下面再換種參數(shù)進(jìn)行調(diào)用。
window.onload=function(){
//圖的原始寬度(原圖寬)，圖的原始高度(原圖高)，自定每塊拼圖的寬度(能被原圖寬整除)，自定每塊拼圖的高度(能被原圖高整除)，圖片名(需放在img下)
Puzzle(500,500,100,100,"beauty.jpg");
}
換成了一張500x500的美女圖，切割寬高為100x100
試玩一波游戲先：(為了展示效果降低游戲難度)
PS：這里給大家推薦一款相似的在線工具供大家參考：
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用實(shí)例解析
這篇文章主要介紹了JavaScript正則表達(dá)式校驗(yàn)與遞歸函數(shù)實(shí)際應(yīng)用,需要的朋友可以參考下2017-08-08
JavaScript實(shí)現(xiàn)QQ聊天消息展示和評(píng)論提交功能
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)QQ聊天消息展示和評(píng)論提交功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目
這篇文章主要介紹了詳解如何使用webpack打包多頁(yè)jquery項(xiàng)目，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
JavaScript中forEach和map方法的使用與區(qū)別
眾所周知map和forEach是數(shù)組的操作方法,下面這篇文章主要給大家介紹了關(guān)于JavaScript中forEach和map方法的使用與區(qū)別,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
解決微信授權(quán)成功后點(diǎn)擊按返回鍵出現(xiàn)空白頁(yè)和報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決微信授權(quán)成功后點(diǎn)擊按返回鍵出現(xiàn)空白頁(yè)和報(bào)錯(cuò)的問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了JavaScript基礎(chǔ)——使用Canvas繪圖，Canvas也真的跟現(xiàn)實(shí)生活中的畫布非常相似，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2016-11-11
微信小程序?qū)崿F(xiàn)發(fā)送驗(yàn)證碼按鈕效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)送驗(yàn)證碼按鈕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
JS判斷空對(duì)象的幾個(gè)方法大盤點(diǎn)
在做數(shù)據(jù)交互的時(shí)候,我們經(jīng)常需要判斷數(shù)據(jù)或者對(duì)象是不是為空,避免當(dāng)接口異常時(shí)候前端頁(yè)面崩潰,下面這篇文章主要給大家介紹了關(guān)于JS判斷空對(duì)象的幾個(gè)方法,需要的朋友可以參考下2022-02-02
Ionic 是目前最有潛力的一款 HTML5 手機(jī)應(yīng)用開發(fā)框架。通過(guò) SASS 構(gòu)建應(yīng)用程序，它 提供了很多 UI 組件來(lái)幫助開發(fā)者開發(fā)強(qiáng)大的應(yīng)用。接下來(lái)小編給大家介紹如何安裝 Ionic 在自己的電腦上搭建一個(gè)簡(jiǎn)單的小應(yīng)用，感興趣的朋友一起看看吧2016-06-06
這篇文章主要介紹了CocosCreator MVC架構(gòu)，同學(xué)們?cè)谥谱饔螒蜻^(guò)程中，盡量使用一些架構(gòu)，會(huì)避免很多問(wèn)題2021-04-04