js实现div的碰壁反弹效果

文章地址 https://www.cnblogs.com/sandraryan/

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

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

<style>
    .wrap {
        width: 1000px;height: 500px;
        border: 1px solid red;
        margin: 40px auto;
        position: relative;
        box-sizing: border-box;

    }
    .box {
        width: 100px;height: 100px;
        background-color: green;
        position: absolute;
        top: 100px;left: 200px;
        /* border: 1px solid red; */
　　　　/* 因为父元素有border，所以，可以给子元素也加一个边框，更好的解决方式是给父元素加box-sizing: border-box;总之就是算的时候宽高符合就行了*/
    }
    </style>

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