js运动-碰撞运动

最新推荐文章于 2021-06-21 16:58:08 发布

della_uii

最新推荐文章于 2021-06-21 16:58:08 发布

阅读量763

点赞数

分类专栏： JavaScript 文章标签：碰撞运动碰壁抛物线自由落体

本文链接：https://blog.csdn.net/Della_UI/article/details/53198721

版权

JavaScript 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

碰撞可以分为碰壁和互碰两种形式，碰壁是一种常见的碰撞形式，匀速碰壁是最简单的碰撞运动。
碰撞实现 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度（速度取反）。

匀速碰壁：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #div1{
                width: 100px;
                height: 100px;
                background: #C0C0C0;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            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;
                        }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>

自由落体运动：
自由落体运动与碰壁运动相比，自由落体运动只是Y轴方向的运动，X轴方向无速度，且自由落体运动在碰壁的瞬间有速度损耗。
自由落体运动在物体最终停在‘地面’的时候要清除定时器。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 100px;
                height: 100px;
                background: olive;
                position: absolute;
                top: 0;
                left: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("div1");

                var iTimer=null;
                var iSpeed=0;
                var i=0;

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

                function startMove(){
                    clearInterval(iTimer);
                    iTimer=setInterval(function(){
                        iSpeed+=10;
                        var T=oDiv.offsetTop+iSpeed;
                        if (T>document.documentElement.clientHeight-oDiv.offsetHeight) {
                            T=document.documentElement.clientHeight-oDiv.offsetHeight;
                            iSpeed*=-1;
                            iSpeed*=0.75;
                        }
                        oDiv.style.top=T+'px';

                        //当oDiv碰壁10次的时候清除定时器
                        if (T==document.documentElement.clientHeight-oDiv.offsetHeight) {
                            i++;
                            if (i==10) {
                                clearInterval(iTimer);
                            }
                        }

                    },30)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>

抛物线运动：
抛物线运动与自由落体运动相比，不仅有Y轴的运动，而且有X方向的运动，且X轴方向运动开始时有速度，在每次与地面碰撞的过程中速度有所损失。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #div1{
                width: 100px;
                height: 100px;
                background: olive;
                position: absolute;
                top: 500px;
                left: 100px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var oDiv=document.getElementById("div1");

                var iTimer=null;
                var iSpeedY=-60;
                var iSpeedX=20;
                var i=0;

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

                function startMove(){
                    clearInterval(iTimer);
                    iTimer=setInterval(function(){
                        iSpeedY+=10;
                        var T=oDiv.offsetTop+iSpeedY;
                        if (T>document.documentElement.clientHeight-oDiv.offsetHeight) {
                            T=document.documentElement.clientHeight-oDiv.offsetHeight;
                            iSpeedY*=-1;
                            iSpeedY*=0.8;
                            iSpeedX*=0.8;
                        }
                        oDiv.style.top=T+'px';
                        oDiv.style.left=oDiv.offsetLeft+iSpeedX+'px';

                        //当oDiv碰壁10次的时候清除定时器
                        if (T==document.documentElement.clientHeight-oDiv.offsetHeight) {
                            i++;
                            if (i==20) {
                                clearInterval(iTimer);
                            }
                        }

                    },30)
                }
            }
        </script>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>