js实现div的碰壁反弹效果

淩亂°似流年 2023-06-05 08:10 8阅读 0赞

需求： 写一个div，让div在父级进行匀速运动，碰到父级上下左右的边框，就向反方向运动。

碰壁反弹在游戏制作中很常用~~~~

<body>
        <div class="wrap">
            <div class="box"></div>
        </div>
    
    <script>
        // 获取元素
        var wrap = document.getElementsByTagName("div")[0];
        var box = document.getElementsByTagName("div")[1]; 
    
        //让元素动起来
        // 添加两个变量，用于更换运动方向
        var a = 1;
        var b = 1;
        // 获取元素的可运动空间，用父元素的宽高减去子元素的宽高
        var w = wrap.offsetWidth - box.offsetWidth;
        var h = wrap.offsetHeight - box.offsetHeight;
    
        // console.log(w,h);
        
        setInterval(function(){
            // 获取元素当前left
            var  l  = box.offsetLeft;
            if(l == w || l == 0){
                // 如果到达可运动空间最大值和最小值的时候，a 变成负值
                a *= -1;
            }
            // 把元素距离左边的值每10ms加1px
            // a变成负值可以改变运动方向
            box.style.left = l + a + "px";
    
            // 垂直方向同水平方向
            var t = box.offsetTop;
            if(t == h || t == 0){
                b *= -1;
            }
            box.style.top = t + b + "px";
        },10); 
    
    </script>
    </body>

转载于:https://www.cnblogs.com/sandraryan/p/11377552.html