js动画练习

        .box{height: 100px;width: 100px;background: #333;position: absolute;left: 0;right: 0;}
        .box1{left: 500px;top: 500px;}

    <input type="text" id="te">
    <div class="box"></div><div class="box1"></div>

    var oText = document.getElementById("te");
    var oDiv = document.querySelector(".box");
    var oDiv2 = document.querySelector(".box1");
    var speedX = 30;//设置div距离页面左边的距离
    var speedY = 30;//设置div距离页面上边的距离
    oDiv.speedX = 15;//设置div横向速度
    oDiv.speedY = 3;//设置div纵向速度
    oDiv2.speedX = 18;
    oDiv2.speedY = 2;

    function move(el){
        var currentLeft = parseInt(window.getComputedStyle(el).left);//取得元素当前距离父元素左边的距离
        var currentTop = parseInt(window.getComputedStyle(el).top);//取得元素当前距离父元素上边的距离
        check_border_conllision(el);//引用下边的构造函数判断元素是否到达了页面边缘
        var left = currentLeft + el.speedX;//设置一个速度让div距离页面左边的位置
        var top = currentTop + el.speedY;
        el.style.left = left + ‘px‘;//将取得速度后的距离父元素的左边距离赋值给元素
        el.style.top = top + ‘px‘;
    }

    function check_border_conllision(el){
        var elStyle = window.getComputedStyle(el);
        var left = parseInt(elStyle.left);
        var top = parseInt(elStyle.top);
        var w = parseInt(elStyle.width);//div的宽度
        var h = parseInt(elStyle.height);
        if(left < 0){//如果左侧位置是负值，则将它设为0，平移值转换
            left = 0;
            el.speedX *= -1;
        }
        if(left > window.innerWidth - w){//如果现在的左侧距离大于了页面宽度减去div的宽度，表示右边已经撞上了。
            left = window.innerWidth -w;
            el.speedX *= -1;
        }
        if(top < 0){
            top = 0;
            el.speedY *= -1;
        }
        if(top > window.innerHeight - h){
            top = window.innerHeight - h;
            el.speedY *= -1;
        }
        el.style.left = left + ‘px‘;
        el.style.top = top + ‘px‘;
    }

    function check_conllision(el,el2){
        var style1 = window.getComputedStyle(el);
        var style2 = window.getComputedStyle(el2);
        var left1 = parseInt(style1.left);
        var left2 = parseInt(style2.left);
        var top1 = parseInt(style1.top);
        var top2 = parseInt(style2.top);
        var w1 = parseInt(style1.width);
        var w2 = parseInt(style2.width);
        var h1 = parseInt(style1.height);
        var h2 = parseInt(style2.height);
        var style1Zx = {x:left1 + w1 / 2,y:top1 + h1 / 2};//箱子1的中心点位置
        var style2Zx = {x:left2 + w2 / 2,y:top2 + h2 / 2};//箱子2的中心点位置
        var leftc = Math.abs(style1Zx.x - style2Zx.x);//取绝对值
        var topc = Math.abs(style1Zx.y - style2Zx.y);
        if(leftc <= (w1 + w2)/2 && topc <= (h1 + h2)/2){//如果箱子的中心点小于他们的高度和宽度一半之和，我们判断为相撞
            return true;
        }
        return false;
    }