欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript实现的拼图算法分析

程序员文章站 2023-12-10 20:10:04
本文实例分析了javascript实现的拼图算法。分享给大家供大家参考,具体如下: 学了html5的拖拽事件,相信做出一款小小的拼图游戏也不难吧。就来说一下怎么用drag...

本文实例分析了javascript实现的拼图算法。分享给大家供大家参考,具体如下:

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

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

<div id="selectpanel"></div>
<div id="orginalimg"></div>
<div id="mathpanel"></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<amount;i++){//一个数组模拟成一个二维矩阵,用json来存这个矩阵,并且每个位置给它一个匹配值m
    jsonposition[i]={x:i%(imgwidth/cuttingoffx),y:parseint(i/(imgheight/cuttingoffy)),m:i};
  }
  for(var c=0;c<amount;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="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){//鼠标开始拖拽拼图,并且拿到它的匹配值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){//取消在拼图匹配面板的默认事件,否则ondrop无效
      return false;
    }
    divemptys[e].ondragleave=function(){
      this.style.backgroundcolor="transparent";
    }
    divemptys[e].ondrop=function(event){//拖拽的拼图在匹配面板放下时执行函数
      var event=event||window.event;
      this.style.backgroundcolor="transparent";
      if(event.datatransfer.getdata("math")==this.maths){//判断拼图传过来的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";
          }
        }
      }
    }
  }
}
//浏览器窗口发生变化时的图片处理
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脚本(调用方法)

window.onload=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,当然这个参数是可以改的,每个小拼图的宽高越小,它切出来的图就越多。

JavaScript实现的拼图算法分析

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

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

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

JavaScript实现的拼图算法分析

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

JavaScript实现的拼图算法分析

ps:这里给大家推荐一款相似的在线工具供大家参考:

在线美女拼图游戏:

更多关于javascript相关内容感兴趣的读者可查看本站专题:《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript数组操作技巧总结》、《javascript排序算法总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结

希望本文所述对大家javascript程序设计有所帮助。