原生js写出滑动拼图小游戏

需要按住想要移动的块把它拖拽到想要移动的地方即可

html文件

    
    
    
    
    
   


    
请将图片拖放此处
    重新选择
    准备
    

    

css

/* html{
    background: #58a;
    background-image:
    linear-gradient(white 1px, transparent 0),
    linear-gradient(90deg, white 1px, transparent 0);
    background-size: 40px 40px;
} */
.z{
    z-index: 10;
}
#inthis{
    top: 2px;
    width: 200px;
    height: 50px;
    margin: 40px auto;
    border: 2px dashed #1afd9c;
    text-align: center;
    background-clip: padding-box;
    line-height: 50px;
    position: relative;
    background-color:white;
}
#start{
    cursor: pointer;
    position:absolute;
    right: 70%;
    top: 61px;
    background-color:#fff;
    color: black;
    font-size: 1em;
    padding: 6px;
    border-radius: 5px;
    border: none;
}
.z{
    z-index: 10;
}
.z1{
    z-index: 0;
}
#change{
    cursor: pointer;
    position:absolute;
    right: 25%;
    top: 61px;
    background-color:#fff;
    color: black;
    font-size: 1em;
    padding: 6px;
    border-radius: 5px;
    border: none;
}
#show{
    margin: 0px auto;
    text-align: center;
    width: 300px;
    background-color: #fff;
    border: 2px white;
    position: relative;
}
.inner{
    position: absolute;
    cursor: pointer;
    float: left;
    width: 98px;
    border-radius: 5px;
    height: 100px;
    border: 1px solid  hsla(0,0%,100%,.5);
    background-origin: border-box;

}
.inner0{
    /* left  height */
    background-size: 300px 300px;
    background-position: 0px 0px ;
}
.inner1{
    background-size: 300px 300px;
    background-position: 200px 0px;
}
.inner2{
    background-size: 300px 300px;
    background-position: 400px 0px;
}
.inner3{
    background-size: 300px 300px;
    background-position: 0px 200px;
}
.inner4{
    background-size: 300px 300px;
    background-position: 200px 200px;
}
.inner5{
    background-size: 300px 300px;
    background-position: 400px 200px;
}
.inner6{
    background-size: 300px 300px;
    background-position: 0px 400px;
}
.inner7{
    background-size: 300px 300px;
    background-position: 200px 400px;
}
.inner8{
    background-size: 300px 300px;
    background-position: 400px 400px;
}
.photo{
    width:300px;
    height: 300px;
    background-size: cover;
    background-clip: padding-box;
}

js

var oriarr=[];
var ranarr=[];
var flag=true;
var cell;
var show=document.getElementById('show');
var showdiv=document.getElementsByClassName('inner');
function allowdrop(ev)
    {
        ev.preventDefault();
    }
function filedrop(e){
    e.preventDefault();
    var show=document.getElementById('show');
    show.innerHTML='';
    var files=event.dataTransfer.files;
    if(files.length!=1)
    {
        alert('only 1 photo')
    }
    else{
        var   f=files[0];
         imgurl=window.webkitURL.createObjectURL(f);
        // var img=document.createElement('img');
        // img.setAttribute('src',imgurl);
        // img.setAttribute('class','photo');
        // show.appendChild(img);
        init();
        //传入图片后再进行初始化碎片

    }

    }
function init(){
    imgslpt();
}
function imgslpt(){
   
    for(i=0;i<9;i++)
    {
        oriarr.push(i);
        var row;
        if(i<3) row=0;
        else if(i<6) row=1;
        else if(i<9) row=2;
        var div=document.createElement('div');
        div.setAttribute('class','inner');
        div.style.backgroundImage=`url(${imgurl})`;
        div.style.left=i%3*100+'px';
        div.style.top=row*100+'px';
        div.className+=' '+`inner${i}`
        show.appendChild(div);
    }

}
function fmousedown(){
    var e=event;

        var x=e.pageX-show.offsetLeft;
        var y=e.pageY-show.offsetTop;
        if(!(x<0||x>300||y<0||y>300))
        {
           var row=parseInt((y)/100);
           var col=parseInt((x)/100);
           var  location=row*3+col;
           for(i=0;i300||y<0||y>300)
    {
        console.log('running',index)
        return index;
    }
    var row=parseInt((y)/100);
    var col=parseInt((x)/100);
    console.log('my index is',row,col)
    var  location=row*3+col;//下标 x weizhi 
    for(i=0;i