碰撞测试（附源码）-JZTXT

这里没有办法展示动态效果，具体动态效果请复制到浏览器并在浏览器控制台上查看具体效果：

CSS部分：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            position: absolute;
            top: 0;
            left: 0;
            border-radius: 50%
        }
        #div1 {
            width: 200px;
            height: 200px;
            background: green
        }
        #div2 {
            width: 100px;
            height: 100px;
            background: red
        }


    </style>

HTML部分：

<body>
<div id="div1"></div>
<div id="div2"></div>
</body>

js部分：

<script>
    const div1 = document.getElementById("div1");
    const div2 = document.getElementById("div2");

    function move(domElement) {
        domElement.onmousedown = function (e) {
            const mouseX = e.clientX,
                mouseY = e.clientY,
                oldLeft = domElement.offsetLeft,
                oldTop = domElement.offsetTop
            document.onmousemove = function (e) {
                const x = e.clientX,
                    y = e.clientY
                domElement.style.left = oldLeft + (x - mouseX) + 'px'
                domElement.style.top = oldTop + (y - mouseY) + 'px'
            }
            document.onmouseup = function () {
                document.onmousemove = null
            }
        }
    }

    move(div1)
    move(div2)
    setInterval(function () {
        const x = div1.offsetWidth / 2 + div1.offsetLeft  //div1的圆心left值
        const x2 = div2.offsetWidth / 2 + div2.offsetLeft  //div2的圆心left值
        const y = div1.offsetWidth / 2 + div1.offsetTop  //div1的圆心top值
        const y2 = div2.offsetWidth / 2 + div2.offsetTop  //div2的圆心top值
        const circleDistance = Math.pow(x - x2, 2) + Math.pow(y - y2, 2) //斜边的平方
        const r1AndR2 = Math.pow(div1.offsetWidth / 2 + div2.offsetWidth / 2, 2)

        if (circleDistance <= r1AndR2) {
            console.log('撞上了')
        }
    }, 30)
</script>