代码功能:模拟小球掉落的场景
考虑问题:碰撞边界后反弹的处理,碰撞后动能损耗的处理,清除定时器的条件
html代码
<div></div>
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等于窗口可视区的高度减去小球的直径)时,设置速度为零并清理定时器。
自信心不止来源于别人的鼓励,更在于努力一次次的证明自己,每完成的一件小事都提醒我自己可以。不过每次听到他的夸赞还是开心的跟个傻子一样,是我太小孩子了嘛