【JS功能】JS实现一个九宫格拖拽交换小游戏

旺旺大力包

已于 2024-03-27 21:41:15 修改

阅读量135

点赞数 1

分类专栏：笔记合集 CSS 前端知识库文章标签： javascript 笔记开发语言

于 2024-03-26 22:08:13 首次发布

本文链接：https://blog.csdn.net/leoxingc/article/details/137059526

版权

前端知识库同时被 3 个专栏收录

21 篇文章 8 订阅

订阅专栏

CSS

10 篇文章 3 订阅

订阅专栏

笔记合集

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>九宫格拖拽交换</title>
    <style>
        #box {
            width: 303px;
            height: 303px;
            margin: 100px auto;
        }

        #box div {
            width: 100px;
            height: 100px;
            float: left;
            margin-left: 1px;
            margin-top: 1px;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            color: #FFF;

        }

        #box div:nth-of-type(1) {
            background: #000;
        }

        #box div:nth-of-type(2) {
            background: #f00;
        }

        #box div:nth-of-type(3) {
            background: #0f0;
        }

        #box div:nth-of-type(4) {
            background: #00f;
        }

        #box div:nth-of-type(5) {
            background: #ff0;
        }

        #box div:nth-of-type(6) {
            background: #f0f;
        }

        #box div:nth-of-type(7) {
            background: #0ff;
        }

        #box div:nth-of-type(8) {
            background: pink;
        }

        #box div:nth-of-type(9) {
            background: orange;
        }

        #box .draging {
            position: absolute;

        }
    </style>
</head>

<body>
    <div id="box">
        <div>1</div>
        <div style="z-index: 1;">2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>

    <script>
        /*

        为API而生，为框架死，为debug而奋斗一辈子，
        吃了符号的亏，上了大小写的当，最后死在了需求上
        */

        /* 
            给 所有的div添加点击id事件，点击的时候 创建一个div 跟点击的div 一样
            并且让点击idiv 可以拖拽 ，  
            
            松手的 找出 div 距离 9个div 哪个最近，

            让div 的内容和颜色 给 最近的交换，  最后新 div删除
        */
        let oDivs = document.querySelectorAll('#box div')
        let box = document.querySelector("#box")
        oDivs.forEach(function (div, i) {
            div.onmousedown = function (e) {
                let offsetX = e.offsetX;
                let offsetY = e.offsetY;
                console.log(this, div);

                // var newDiv = document.createElement("div")
                var newDiv = div.cloneNode(true) //参数为true 复制子节点，false 不复制子节点



                // newDiv.innerHTML = div.innerHTML;
                newDiv.style.background = getComputedStyle(div).background;
                newDiv.classList.add('draging')

                box.appendChild(newDiv)

                newDiv.style.left = e.pageX - offsetX + 'px';
                newDiv.style.top = e.pageY - offsetY + 'px';


                document.onmousemove = function (evt) {
                    newDiv.style.left = evt.pageX - offsetX + 'px';
                    newDiv.style.top = evt.pageY - offsetY + 'px';
                }

                document.onmouseup = function () {
                    //停止拖拽 
                    document.onmousemove = null

                    // 松手的 找出 div 距离 9个div 哪个最近，
                    let arr = []
                    oDivs.forEach(function (oDiv) {
                        //oDiv 和 newDiv的距离
                        let d = distance(oDiv, newDiv);
                        arr.push(d)
                    })
                    console.log(arr);
                    let min = Math.min(...arr);
                    let minIndex = arr.indexOf(min)
                    let minDiv = oDivs[minIndex]
                    console.log(minDiv);

                    // 让div 的内容
                    // 和颜色 给 最近的交换，  最后新 div删除

                    // minDiv  oDiv
                    let tempColor = getComputedStyle(minDiv).backgroundColor
                    let tempText = minDiv.innerHTML;

                    minDiv.style.backgroundColor = getComputedStyle(div).backgroundColor
                    minDiv.innerHTML = div.innerHTML;

                    div.innerHTML = tempText;
                    div.style.backgroundColor = tempColor

                    newDiv.remove()









                }




            }
        })






        function distance(div1, div2) {
            //勾股定理 记录 两个元素的距离
            var a = div1.offsetLeft - div2.offsetLeft;
            var b = div1.offsetTop - div2.offsetTop;
            var c = Math.sqrt(a * a + b * b);
            return c;
        }
    </script>

</body>

</html>