js实现触壁反弹

话不多说直接上代码

css

 <style>
   *{margin: 0;padding: 0;}
   .warp{
        width: 700px;
        height: 600px;
        border: 1px solid #000;
        position: relative;
        margin: 50px auto;
    }
    .con{
        width: 50px;
        height: 50px;
        background: saddlebrown;
        position: absolute;
        left:0;
        top:0;
    }
 </style>

html

 <style>
  	<div class="warp">
       <div class="con"></div>
	</div>
 </style>

js

<script>
    var warp=document.querySelector('.warp');
    var con=document.querySelector('.con');
    var timer=null,timer2=null;
    var L=true;
    var T=true;
    var i=0;
    var j=0;
    var x=warp.clientWidth-con.clientWidth;
    var y=warp.clientHeight-con.clientHeight;
    timer=setInterval(function () {
        if (L==true){
            i+=3;
            if (i>=x){
                L=false
            }
        }else {
            i-=3;
            if(i<=0){
                L=true;
            }
        }
        con.style.left=i+'px';
    },1);
    timer2=setInterval(function () {
        if (T==true){
            j+=3;
            if (j>=y){
                T=false
            }
        }else {
            j-=3;
            if (j<=0){
                T=true;
            }
        }
    con.style.top=j+'px';
    },1)
</script>