原生JS“小试牛刀“拼图游戏

css和HTML

<style>
        *{
            padding: 0;
            margin: 0;
        }
    #box{
        width: 260px;
        height: 400px;
        background-image: url(./img/4.jpg);
      
    }
    #smallBox{
        width:360px;
        height:400px;
        border:"1px solid gray";
        position: absolute;
        right: 500px;
        top: 0px;
        background-color: burlywood;

    }
    </style>
    
    <div id="box"></div>
    <div id="smallBox"></div>

JS

 var box, smallBox,span,arr=[];
        init()
        function init() {
            box = document.getElementById("box");
            smallBox = document.getElementById("smallBox");
      
            
            for (var x = 0; x < 5; x++) {
                for(var y=0;y<5;y++){
                    var img=new Image();
                    img.src="./img/img"+x+"-"+y+".gif";
                    img.style.position="absolute";
                    img.style.left=Math.floor(Math.random()*300)+"px";
                    img.style.top=Math.floor(Math.random()*320)+"px";
                    smallBox.appendChild(img);
                    img.addEventListener("mousedown",mouseHandler);
                    // console.log(x,y);
                    span=document.createElement("span");
                    span.style.width="52px";
                    span.style.height="80px";
                    span.style.border="1px solid gray";
                    span.style.boxSizing=" border-box";
                    span.style.display="block";
                    span.style.float="left";
                    span.style.background="rgba(255,255,255,.4)";
                    box.appendChild(span);
                    arr.push(span);
                }
                
            }
            
        }
        var imgSrc;
        function mouseHandler(e) {
            switch (e.type) {
                case "mousedown":
                    e.preventDefault();
                    document.elem=this;
                    document.x=e.offsetX;
                    document.y=e.offsetY;
                    imgSrc = document.elem.src.match(/img\/img(.*)\.gif/)[1].split("-");
                    // console.log(imgSrc,Number(imgSrc[0]),Number(imgSrc[1]));
                    console.log(document.elem);
                    // document.elem.style.left=(Number(imgSrc[1])*52)+"px";
                    // document.elem.style.top=(Number(imgSrc[0])*80)+"px";
                    document.addEventListener("mousemove",mouseHandler);
                    document.addEventListener("mouseup",mouseHandler);
                    break;
                case "mousemove":
                    var rect=this.elem.parentElement.getBoundingClientRect();//获取父元素的位置，比如宽高
                    this.elem.style.left=e.clientX-rect.x-this.x+"px";
                    // console.log(rect,this.elem.offsetWidth);
                    this.elem.style.top=e.clientY-rect.y-this.y+"px";
                    // console.log(imgSrc,Number(imgSrc[0]),Number(imgSrc[1]));
                    console.log(document.elem.offsetLeft+507,Number(imgSrc[1]*52-26));
                    // console.log(Number(imgSrc[1]*52-26))
                    // console.log(Number(imgSrc[1]*52),Number(imgSrc[0]*80));
                    if(document.elem.offsetLeft+507 > Number(imgSrc[1]*52-26) && //大于小图左边的距离
                      document.elem.offsetLeft+507<Number(imgSrc[1]*52+26) && 
                      document.elem.offsetTop>Number(imgSrc[0]*80-40) && 
                      document.elem.offsetTop<Number(imgSrc[0]*80+40)){ 
                          console.log("ss")
                        document.elem.style.left=(Number(imgSrc[1])*52)-507+"px";
                        document.elem.style.top=(Number(imgSrc[0])*80)+"px";
                        document.elem.removeEventListener("mousemove",mouseHandler);
                    }
                    break;
                case "mouseup":
                   this.removeEventListener("mousemove",mouseHandler);
                   this.removeEventListener("mouseup",mouseHandler);
                   break;
            }
        }