JS实现疯狂小球，获取鼠标的速度、方向

最新推荐文章于 2020-12-06 20:18:00 发布

yl107

最新推荐文章于 2020-12-06 20:18:00 发布

阅读量998

点赞数 1

分类专栏： js js动态效果练习

本文链接：https://blog.csdn.net/yl107/article/details/71467231

版权

js 同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

js动态效果练习

9 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>疯狂小球</title>
    <style>
        *{
            margin:0;
            padding: 0;
        }
        #ball{
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
            left:100px;
            top:100px;

        }
    </style>
</head>
<body>
    <div id="ball"></div>
    <script>
        var ball = document.getElementById('ball');
        var speedY = 0;//定义Y方向的速度
        var speedX = 0;
        var time = null;
        var maxY = document.documentElement.clientHeight - ball.offsetHeight;
        var maxX = document.documentElement.clientWidth - ball.offsetWidth;
        // 绑定点击事件
        ball.onmousedown = function(e){
            var e = e || window.event;
            //获取鼠标相对于小球的位置
            var clickX = e.clientX - ball.offsetLeft;
            var clickY = e.clientY - ball.offsetTop;

            document.onmousemove = function(e){
                var e = e || window.event;
                // 根据鼠标的移动速度和方向设置小球x和y方向上的速度
                speedX = e.movementX;
                speedY = e.movementY;
                //计算出小球的left和top
                var x = e.clientX - clickX;
                var y = e.clientY - clickY;
                // 判断临界值
                if(x >= maxX){
                    x = maxX;
                }
                if(x <= 0){
                    x = 0;
                }
                if(y >= maxY){
                    y = maxY;
                }
                if(y <= 0){
                    y = 0;
                }
                ball.style.left = x + 'px';
                ball.style.top = y + 'px';
            }
        }
        // 当鼠标松开小球，清除onmousemove事件，并执行计时器
        document.onmouseup = function(){
            document.onmousemove = null;
            move();
        }

        // 创建计时器
        function move(){
            clearInterval(time);
            time = setInterval(function(){
                speedY += 5;
                // 每隔20毫秒获取一次小球的Top值，加上当前的speedY使其移动
                var t = ball.offsetTop + speedY;
                var l = ball.offsetLeft + speedX;
                if(t >= maxY){
                    t = maxY;
                    // clearInterval(time);
                    speedY *= -0.8;
                    // console.log(speedY);

                    // 接触到地面后有摩擦力，不改变运动方向只是减小运动速度
                    speedX *= 0.8;
                }
                if(t <= 0){
                    t = 0;
                    speedY *= -0.8;
                }
                if(l >= maxX){
                    l = maxX;
                    speedX *= -0.8;
                }
                if(l <= 0){
                    l = 0;
                    speedX *= -0.8;
                }
                // console.log(speedX);
                if(Math.abs(speedY) < 3){
                    speedY = 0;
                }
                if(Math.abs(speedX) < 1){
                    speedX = 0;
                }
                // 判断小球什么时候停止运动，清除计时器
                if(speedY == 0 && speedX == 0 && t == maxY){
                    clearInterval(time);
                }
                ball.style.top = t + 'px';
                ball.style.left = l + 'px';
            },20);
        }
    </script>
</body>
</html>