【前端进阶】js高级运动之碰撞运动

时间:2021-2-20 作者:admin

说碰撞运动之前 ,先来看一个很久之前经常在网站中出现的一种形式:

浮动广告

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>浮动广告</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: steelblue;
            position: absolute;
        }
    </style>
    <script>
        //碰撞运动 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度(速度取反)
        window.onload = function () {
            var oDiv = document.getElementById('div1');

            var iSpeedX = 10;
            var iSpeedY = 10;

            startMove();
            function startMove() {
                setInterval(function () {

                    var L = oDiv.offsetLeft + iSpeedX;
                    var T = oDiv.offsetTop + iSpeedY;
                    // 运动的距离>可视区的高-自身的高 说明运动到了底部
                    if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
                        // 让物体运动的距离等于底部的距离
                        T = document.documentElement.clientHeight - oDiv.offsetHeight;
                        // 改变速度方向
                        iSpeedY *= -1;
                    }
                    //运动的距离小于0 说明运动到了顶部
                    else if (T < 0) {
                        T = 0;
                        iSpeedY *= -1;
                    }

                    if (L > document.documentElement.clientWidth - oDiv.offsetWidth) {
                        L = document.documentElement.clientWidth - oDiv.offsetWidth;
                        iSpeedX *= -1;
                    }
                    else if (L < 0) {
                        L = 0;
                        iSpeedX *= -1;
                    }

                    oDiv.style.left = L + 'px';
                    oDiv.style.top = T + 'px';
                }, 30);
            }

        };
    </script>
</head>

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

</html>

总结规律

1.找到碰撞的临界点

2.确定运动的方向

3.改对应的速度(速度取反speed*=-1)

上面所说的只是平面与平面的碰撞。如果复杂一点的有圆的碰撞,三角形的碰撞,这些复杂的碰撞就需要运用到速度的分解,分解完成之后再合成,什么三角函数啊,微积分啊,都可能会用到。

自由落体运动

分析一下吧
自由落体受到重力的作用
1.寻找碰撞临界点 判断一个物体运动是否运动到了底部 运动的距离>可视区的高-自身的高

2.速度值自增(iSpeed += 3)

3.改变运动方向(speed *= -1)

4.停止条件

会慢慢停止
速度乘以一个摩擦系数(speed*0.75)

停止运动的条件 速度为0并且物体下落的高度与底部重合

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>自由落体</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: sienna;
            position: absolute;
        }
    </style>
    <script>
        window.onload = function () {
            var oInput = document.getElementById('input1');
            var oDiv = document.getElementById('div1');

            var timer = null;
            var iSpeed = 0;

            oInput.onclick = function () {
                startMove();
            };

            function startMove() {
                clearInterval(timer);
                timer = setInterval(function () {
                    iSpeed += 3;

                    var T = oDiv.offsetTop + iSpeed;

                    if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
                        T = document.documentElement.clientHeight - oDiv.offsetHeight;
                        iSpeed *= -1;
                        iSpeed *= 0.75;

                    }
                    console.log(1)
                    // 停止运动的条件 速度为0并且物体下落的高度与底部重合
                    if (Math.abs(iSpeed) <= 1 && T == document.documentElement.clientHeight - oDiv.offsetHeight) {
                        clearInterval(timer)
                    }
                    oDiv.style.top = T + 'px';

                }, 30);
            }

        };
    </script>
</head>

<body>
    <input type="button" value="开始运动" id="input1">
    <div id="div1"></div>
</body>

</html>

抛物线运动

只需要在自由落体运动的前提上让X轴方向的left速度损耗即可(也就是做减速运动,乘以一个摩擦系数)

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>抛物线</title>
    <style>
        #img1 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 500px;
        }

        #input1 {
            background: red;
        }
    </style>
    <script>
        window.onload = function () {
            var oInput = document.getElementById('input1');
            var oDiv = document.getElementById('img1');

            var timer = null;
            var iSpeed = -40;
            var iSpeedX = 10;

            oInput.onclick = function () {
                startMove();
            };

            function startMove() {
                clearInterval(timer);
                timer = setInterval(function () {

                    iSpeed += 3;

                    var T = oDiv.offsetTop + iSpeed;
                    //底部临界点
                    if (T > document.documentElement.clientHeight - oDiv.offsetHeight) {
                        T = document.documentElement.clientHeight - oDiv.offsetHeight;
                        iSpeed *= -1;
                        iSpeed *= 0.75;
                        //x轴速度损耗
                        iSpeedX *= 0.75;

                    }
                    // 停止
                    if (Math.abs(iSpeed) <= 1 && T == document.documentElement.clientHeight - oDiv.offsetHeight) {
                        clearInterval(timer)
                    }
                    oDiv.style.top = T + 'px';

                    oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';

                }, 30);
            }

        };
    </script>
</head>

<body>
    <input type="button" value="发射" id="input1">
    <img id="img1" src="https://www.geekschool.org/wp-content/uploads/2021/02/1613900824.9848826.jpg" alt="">
</body>

</html>

模拟点餐抛物线

X轴方向的left速度损耗(也就是做减速运动,乘以一个摩擦系数)

Y轴方向做加速运动

<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>抛物线</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #img1 {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            position: absolute;
            top: 500px;
        }

        #input1 {
            background: red;
        }
    </style>
    <script>
        window.onload = function () {
            var oInput = document.getElementById('input1');
            var oDiv = document.getElementById('img1');

            var timer = null;
            var iSpeed = -30;
            var iSpeedX = 30;

            oInput.onclick = function () {
                startMove();
            };

            function startMove() {
                clearInterval(timer);
                timer = setInterval(function () {

                    iSpeed += 3;
                    var T = oDiv.offsetTop + iSpeed;
                    iSpeedX *= 0.97;
                    if (T >= document.documentElement.clientHeight - oDiv.offsetHeight) {
                        clearInterval(timer)
                        T = document.documentElement.clientHeight - oDiv.offsetHeight;
                    }
                    oDiv.style.top = T + 'px';
                    oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px';
                }, 20);
            }

        };
    </script>
</head>

<body>
    <input type="button" value="发射" id="input1">
    <img id="img1" src="https://www.geekschool.org/wp-content/uploads/2021/02/1613900824.9848826.jpg" alt="">
</body>

</html>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。