代碼功能：模擬小球掉落的場景

考慮問題：碰撞邊界后反彈的處理，碰撞后動能損耗的處理，清除定時器的條件

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等于窗口可視區的高度減去小球的直徑）時，設置速度為零并清理定時器。

---

自信心不止來源于別人的鼓勵，更在于努力一次次的證明自己，每完成的一件小事都提醒我自己可以。不過每次聽到他的夸贊還是開心的跟個傻子一樣，是我太小孩子了嘛

總結

以上是生活随笔為你收集整理的JavaScript的运动——模拟重力场的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。