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

Posted 2020-11-20 我们家的小常客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现一个DIV的碰撞反弹运动相关的知识，希望对你有一定的参考价值。

原生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>

以上是关于原生js实现一个DIV的碰撞反弹运动的主要内容，如果未能解决你的问题，请参考以下文章

用js做一个方块在网页窗口运动遇到边角反弹

js 运动函数篇（加速度运动弹性运动重力场运动（多方向+碰撞检测+重力加速度+能量损失运动）拖拽运动）层层深入

原生JS实现圆周运动

原生JS封装运动框架

java实现小球碰撞反弹

原生JS实现飞机大战游戏超详细解析快来做一个自己玩吧