多方向运动
点击div后，向右向下都有速度，斜向下一直运动。
<style>.wapper {width: 100px;height: 100px;position: absolute;background: orange;left: 0;top: 0;}</style><div class="wapper"></div><script>var oDiv = document.getElementsByClassName("wapper")[0];oDiv.onclick = function() {startMove(this);}function startMove(dom) {var timer = null;clearInterval(dom.timer);var iSpeedX = 6;var iSpeedY = 7;dom.timer = setInterval(function() {var newTop = dom.offsetTop + iSpeedY;var newLeft = dom.offsetLeft + iSpeedX;dom.style.left = newLeft + 'px';dom.style.top = newTop + 'px';}, 30);}
碰撞检测+重力加速度+能量损失
<div class="wapper"></div><script>var oDiv = document.getElementsByClassName("wapper")[0];oDiv.onclick = function() {startMove(this);}function startMove(dom) {var timer = null;clearInterval(dom.timer);var iSpeedX = 6;var iSpeedY = 7;var g = 3;dom.timer = setInterval(function() {iSpeedY += g;var newTop = dom.offsetTop + iSpeedY;var newLeft = dom.offsetLeft + iSpeedX;if (newTop >= document.documentElement.clientHeight - dom.clientHeight) {iSpeedY *= -1;iSpeedY *= 0.8;iSpeedX *= 0.8;newTop = document.documentElement.clientHeight - dom.clientHeight;}if (newTop <= 0) {iSpeedY *= -1;iSpeedY *= 0.8;iSpeedX *= 0.8;newTop = 0;}if (newLeft >= document.documentElement.clientWidth - dom.clientWidth) {iSpeedX *= -1;iSpeedX *= 0.8;iSpeedY *= 0.8;//防止出现滚动条newLeft = document.documentElement.clientWidth = dom.clientWidth;}if (newLeft <= 0) {iSpeedX *= -1;iSpeedX *= 0.8;iSpeedY *= 0.8;newLeft = 0;}if (Math.abs(iSpeedX) < 1) {iSpeedX = 0;}if (Math.abs(iSpeedY) < 1) {iSpeedY = 0;}dom.style.left = newLeft + 'px';dom.style.top = newTop + 'px';}, 30);}</script>
小方块会在底部向上弹几次，最后因为没有速度而停在底边，模拟了重力场的小球下坠弹起。
