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

最新推荐文章于 2022-02-10 15:40:40 发布

多看点书

最新推荐文章于 2022-02-10 15:40:40 发布

阅读量321

点赞数 1

本文链接：https://blog.csdn.net/weixin_43789858/article/details/90143741

版权

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

html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
   
</head>
<body>
    <div id="inthis" ondragover="allowdrop(event)" ondrop="filedrop(event)">请将图片拖放此处</div>
    <button id='change' onclick="change()">重新选择</button>
    <button id='start' onclick="startgame()">准备</button>
    <div id='show'></div>
    <script src="index.js" ></script>
</body>
</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;
}

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;i<ranarr.length;i++)
        
           {
               
               if(ranarr[i]==location)
               {
                   break;
               }
           }
           index1=i;
           var element=showdiv[index1];
           element.classList+=' '+'z';
           left1=e.pageX-(element.offsetLeft+show.offsetLeft);
           top1=e.pageY-((element.offsetTop+show.offsetTop))
        }


       document.addEventListener('mousemove',fmousemove,false)
       document.addEventListener('mouseup',fmouseup,false)
       
}
function startgame(){
    var button1=document.getElementById('start');
    if(flag)
    {
        button1.innerText='开始';
        flag=false;
        randomarr();//打乱
        cellorder(ranarr);//排
        //bind
        for(j=0;j<9;j++)
        {
            show.addEventListener('mousedown',fmousedown,false)
        }
        }   
    else{
        button1.innerText='复原';
        flag=true;
    }

}
function fmousemove()
{
   var ev=event;
        showdiv[index1].style.left=ev.pageX-left1-show.offsetLeft+'px';
        showdiv[index1].style.top=ev.pageY-top1-show.offsetTop+'px';

}
function fmouseup()
            {
                var ev3=event;
                var left=ev3.pageX-show.offsetLeft;
                var top=ev3.pageY-show.offsetTop;
                var  index2=change(left,top,index1);
                if(index1==index2)
                {
                    cellreturn(index1);
                }
                else{
                    changecell(index1,index2);
                }

                
            }
function randomarr(){
    ranarr=oriarr.slice(0)//
    ranarr.sort(function(a,b) {return Math.random()-0.5;});
}
function cellorder(ranarr){
    //第i个
    var len=ranarr.length;
    for(i=0;i<len;i++)
    {
        showdiv[i].style.left=ranarr[i]%3*100+'px'
        showdiv[i].style.top=parseInt(ranarr[i]/3)*100+'px';
    }

} 
function change(x,y,index){
    if(x<0||x>300||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<ranarr.length;i++)
    
    {
        //第i号文档
        
        if(ranarr[i]==location)
        {
            break;
        }
    }
    return i
}

function cellreturn(index){
//index xiabiao 
var col=ranarr[index]%3*100+'px'
var row=parseInt(ranarr[index]/3)*100+'px';
showdiv[index].style.left=col;
showdiv[index].style.top=row;
}
function changecell(from,to){
//from  to 都是文档位置   ranarr[] 是他表现在html中占的位置
var fromj=ranarr[from]%3;//lie
var fromi=parseInt(ranarr[from]/3)//hang
var toj=ranarr[to]%3;//lie
var toi=parseInt(ranarr[to]/3)//hang
showdiv[from].classList+=' '+'z1';
console.log('i m from ',fromi,fromj)
console.log('will go',toi,toj)
showdiv[from].style.left=100*toj+'px'
showdiv[from].style.top=100*toi+'px'
showdiv[to].style.left=100*fromj+'px'
showdiv[to].style.top=100*fromi+'px'
var temp=ranarr[from]
ranarr[from]=ranarr[to];
ranarr[to]=temp;
document.removeEventListener('mouseup',fmouseup);
document.removeEventListener('mousemove',fmousemove);
check();
}
function check()
{

    if(oriarr.toString()==ranarr.toString())
    {
        setTimeout(function(){alert('yes')},800);
        var changebutton=document.getElementById('change');
        changebutton.addEventListener('click',function(){
        
            console.log('fine')
            var show=document.getElementById('show');
            show.innerHTML='';
              divall=document.getElementsByClassName('inner');
        
         oriarr=[];
          ranarr=[];
          flag=true;
           cell=null;
        })
    }
}