JavaScript的运动——模拟重力场

代码功能：模拟小球掉落的场景

考虑问题：碰撞边界后反弹的处理，碰撞后动能损耗的处理，清除定时器的条件

html代码

css代码

div {
    width: 100px;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: steelblue;
    border-radius: 50%;
    cursor: pointer;
}

js代码

var oDiv = document.getElementsByTagName('div')[0];
oDiv.onclick = function () {
    startMove(this);
}
function startMove(dom) {
    clearInterval(dom.timer);
    var speedX = 8;
    var speedY = 10;
    var g = 3;
    dom.timer = setInterval(function () {
        speedY += g;
        dom.style.top = dom.offsetTop + speedY + 'px';
        dom.style.left = dom.offsetLeft + speedX + 'px';
        if (dom.offsetTop >= document.documentElement.clientHeight - dom.offsetHeight) {
            speedY *= -1;
            speedX *= 0.8;
            speedY *= 0.8;
            dom.style.top = document.documentElement.clientHeight - dom.offsetHeight + 'px';
        }
        if (dom.offsetTop <= 0) {
            speedY *= -1;
            speedX *= 0.8;
            speedY *= 0.8;
            dom.style.top = 0 + 'px';
        }
        if (dom.offsetLeft >= document.documentElement.clientWidth - dom.offsetWidth) {
            speedX *= -1;
            speedX *= 0.8;
            speedY *= 0.8;
            dom.style.left = document.documentElement.clientWidth - dom.offsetWidth + 'px';
        }
        if (dom.offsetLeft <= 0) {
            speedX *= -1;
            speedX *= 0.8;
            speedY *= 0.8;
            dom.style.left = 0 + 'px';
        }
        if (speedX < 1 && speedY < 1 && dom.offsetTop == document.documentElement.clientHeight - dom.offsetHeight) {
            speedY = 0;
            speedX = 0;
            clearInterval(dom.timer);
        }
    },30);

}

问题及解决

问题1：碰撞边界后反弹的处理

解决：首先要判定边界，在小球向下运动的反弹条件是小球的下边线碰到窗口的下边线，由于存在小球的下边线没有刚好处在窗口下边线的情况，则反弹的判定条件是，让小球的offsetTop（小球上边线与窗口的上边线的距离）大于等于窗口可视区的高度减去小球的直径（高度），此时为了防止反弹点不在窗口底边线，则设置小球的offsetTop等于窗口可视区的高度减去小球的直径。反弹后垂直方向上的速度方向改变，可设置speed = -speed；小球在向上运动时反弹的点在上边线上，此时的处理与下边线类似；左右碰撞原理与上下碰撞原理类似，不做赘述。

问题2：碰撞后的动能损耗

解决：动能损耗直观上来讲，就是速度降低，这里拟损耗后的速度为损耗前的0.8倍

问题3：清理定时器的条件

解决：现实中小球停止时，水平和垂直方向的速度均为零，且落在地面上。而模拟的过程发现小球的速度不能为零，但是数值太小不足以引起位置变化，故当水平和垂直方向上的速度均小于1，且小球下边线在窗口下边线（小球的offsetTop等于窗口可视区的高度减去小球的直径）时，设置速度为零并清理定时器。

---

自信心不止来源于别人的鼓励，更在于努力一次次的证明自己，每完成的一件小事都提醒我自己可以。不过每次听到他的夸赞还是开心的跟个傻子一样，是我太小孩子了嘛