模拟重力场(多方向运动+碰撞检测+重力加速度+能量损失)
作者:互联网
多方向运动
点击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>
小方块会在底部向上弹几次,最后因为没有速度而停在底边,模拟了重力场的小球下坠弹起。
标签:0.8,dom,iSpeedY,iSpeedX,重力场,var,碰撞检测,newTop,加速度 来源: https://blog.csdn.net/wangfei0225_/article/details/113795127