您的位置：首页 > Web前端

简单前端——圆与圆碰撞检测

2017-09-25 21:21 134 查看

只是没什么做搞个来玩玩，顺便练练手

鼠标按着红球，就可以移动红球，如果以黄球发生碰撞，红球就变为绿球，否则颜色不变。

[html] view
plain copy

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        #a , #b {

            width: 100px;

            height: 100px;

            position: absolute;

            border-radius: 50%;

        }

        #a{

            left: 0;

            top: 0;

            background-color: red;

            z-index: 1;

        }

        #b {

            left: 0;

            top: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            background-color: yellow;

        }

    </style>

</head>

<body>

    <div id="a"></div>

    <div id="b"></div>

<script>

    var a = document.getElementById('a');

    var b = document.getElementById('b');

    a.onmousedown = function (ev) {

        aX = ev.clientX - a.offsetLeft;

        aY = ev.clientY - a.offsetTop;

        document.onmousemove = function (ev) {

            var t1 = a.offsetTop;

            var l1 = a.offsetLeft;



            var t2 = b.offsetTop;

            var l2 = b.offsetLeft;

            if (Math.sqrt(Math.pow(t1 - t2, 2) + Math.pow(l1 - l2, 2)) <= 100) {

                // 如果两圆的圆心距小于或等于两圆半径和则认为发生碰撞

                a.style.background = 'green';

            }else{

                a.style.background = 'red';

            }



            a.style.left = ev.clientX - aX +'px';

            a.style.top = ev.clientY - aY +'px';

        }

        document.onmouseup = function () {

            document.onmousemove = null;

            document.onmouseup = null;



        }

        return false;

    }

</script>

</body>

</html>

转载来自：http://blog.csdn.net/zhuxiongyin/article/details/71499843

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航