原生js实现一个DIV的碰撞反弹运动

时间：2023-01-27 22:35:25

 原生js实现一个DIV的碰撞反弹运动：

　　关键在于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=6;

            var speedy=8;

            var t=null;

            btn.onclick=function(){

                clearInterval(t);

                t=setInterval(function(){

                    var l=div.offsetLeft+speedx;

                    var t=div.offsetTop+speedy;

                    if(l>=document.documentElement.clientWidth-div.offsetWidth){

                        speedx*=-1;

                        l=document.documentElement.clientWidth-div.offsetWidth;

                    }else if(l<=0){

                        speedx*=-1;

                        l=0;

                    }

                    if(t>=document.documentElement.clientHeight-div.offsetHeight){

                        speedy*=-1;

                        t=document.documentElement.clientHeight-div.offsetHeight;

                    }else if(t<=0){

                        speedy*=-1;

                        t=0;

                    }

                    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>

相关文章