原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

继上一篇。。。

原生js实现一个DIV的碰撞反弹运动，并且添加重力效果

 　　关键在于边界检测，以及乘以的系数问题，实现代码并不难，如下：

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin:0;}
        div{height:100px;width:100px;background:red;position:absolute;}
        /*添加绝对定位*/

    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var div=document.getElementById("div");
            var speedx=300;
            var speedy=200;
            var timer=null;
            btn.onclick=function(){
                clearInterval(timer);
                timer=setInterval(function(){
                    speedy+=3;    
                    var l=div.offsetLeft+speedx;
                    var t=div.offsetTop+speedy;
                    if(t>=document.documentElement.clientHeight-div.offsetHeight){
                        speedy*=-0.8;
                        speedx*=0.8;
                        t=document.documentElement.clientHeight-div.offsetHeight;
                    }else if(t<=0){
                        speedy*=-0.8;
                        speedx*=0.8;
                        t=0;  
                    }
                    if(l>=document.documentElement.clientWidth-div.offsetWidth){
                        speedx*=-0.8;
                        l=document.documentElement.clientWidth-div.offsetWidth;
                    }else if(l<=0){
                        speedx*=-0.8;
                        l=0;
                    }
                    if(Math.abs(speedx)<1){
                        speedx=0;
                    }
                    if(Math.abs(speedy)<3){   //注意这块儿
                        speedy=0;
                    }
                    if(speedx==0&&speedy==0){
                        console.log(speedx+"   "+speedy);
                        clearInterval(timer);         
                    }
                    div.style.left=l+"px";
                    div.style.top=t+"px";
                },10);
            }
        }
    </script>
</head>
<body>
<input type="button" id="btn" value="开始运动">
<div id="div"></div>
</body>
</html>

 

posted @ 2018-06-28 20:32  我们家的小常客  阅读(1153)  评论(0)  编辑  收藏  举报