说碰撞运动之前 ,先来看一个很久之前经常在网站中出现的一种形式:
浮动广告
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>浮动广告</title> <style> #div1 { width: 100px; height: 100px; background: steelblue; position: absolute; } </style> <script> //碰撞运动 : 首先找到碰撞的临界点 , 再确定运动的方向 , 然后去改对应的速度(速度取反) window.onload = function () { var oDiv = document.getElementById('div1'); var iSpeedX = 10; var iSpeedY = 10; startMove(); function startMove() { setInterval(function () { var L = oDiv.offsetLeft + iSpeedX; var T = oDiv.offsetTop + iSpeedY; // 运动的距离>可视区的高-自身的高 说明运动到了底部 if (T > document.documentElement.clientHeight - oDiv.offsetHeight) { // 让物体运动的距离等于底部的距离 T = document.documentElement.clientHeight - oDiv.offsetHeight; // 改变速度方向 iSpeedY *= -1; } //运动的距离小于0 说明运动到了顶部 else if (T < 0) { T = 0; iSpeedY *= -1; } if (L > document.documentElement.clientWidth - oDiv.offsetWidth) { L = document.documentElement.clientWidth - oDiv.offsetWidth; iSpeedX *= -1; } else if (L < 0) { L = 0; iSpeedX *= -1; } oDiv.style.left = L + 'px'; oDiv.style.top = T + 'px'; }, 30); } }; </script> </head> <body> <div id="div1"></div> </body> </html>
总结规律
1.找到碰撞的临界点
2.确定运动的方向
3.改对应的速度(速度取反speed*=-1)
上面所说的只是平面与平面的碰撞。如果复杂一点的有圆的碰撞,三角形的碰撞,这些复杂的碰撞就需要运用到速度的分解,分解完成之后再合成,什么三角函数啊,微积分啊,都可能会用到。
自由落体运动
分析一下吧
自由落体受到重力的作用
1.寻找碰撞临界点 判断一个物体运动是否运动到了底部 运动的距离>可视区的高-自身的高
2.速度值自增(iSpeed += 3)
3.改变运动方向(speed *= -1)
4.停止条件
会慢慢停止
速度乘以一个摩擦系数(speed*0.75)
停止运动的条件 速度为0并且物体下落的高度与底部重合
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自由落体</title> <style> #div1 { width: 100px; height: 100px; background: sienna; position: absolute; } </style> <script> window.onload = function () { var oInput = document.getElementById('input1'); var oDiv = document.getElementById('div1'); var timer = null; var iSpeed = 0; oInput.onclick = function () { startMove(); }; function startMove() { clearInterval(timer); timer = setInterval(function () { iSpeed += 3; var T = oDiv.offsetTop + iSpeed; if (T > document.documentElement.clientHeight - oDiv.offsetHeight) { T = document.documentElement.clientHeight - oDiv.offsetHeight; iSpeed *= -1; iSpeed *= 0.75; } console.log(1) // 停止运动的条件 速度为0并且物体下落的高度与底部重合 if (Math.abs(iSpeed) <= 1 && T == document.documentElement.clientHeight - oDiv.offsetHeight) { clearInterval(timer) } oDiv.style.top = T + 'px'; }, 30); } }; </script> </head> <body> <input type="button" value="开始运动" id="input1"> <div id="div1"></div> </body> </html>
抛物线运动
只需要在自由落体运动的前提上让X轴方向的left速度损耗即可(也就是做减速运动,乘以一个摩擦系数)
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>抛物线</title> <style> #img1 { width: 100px; height: 100px; border-radius: 50%; position: absolute; top: 500px; } #input1 { background: red; } </style> <script> window.onload = function () { var oInput = document.getElementById('input1'); var oDiv = document.getElementById('img1'); var timer = null; var iSpeed = -40; var iSpeedX = 10; oInput.onclick = function () { startMove(); }; function startMove() { clearInterval(timer); timer = setInterval(function () { iSpeed += 3; var T = oDiv.offsetTop + iSpeed; //底部临界点 if (T > document.documentElement.clientHeight - oDiv.offsetHeight) { T = document.documentElement.clientHeight - oDiv.offsetHeight; iSpeed *= -1; iSpeed *= 0.75; //x轴速度损耗 iSpeedX *= 0.75; } // 停止 if (Math.abs(iSpeed) <= 1 && T == document.documentElement.clientHeight - oDiv.offsetHeight) { clearInterval(timer) } oDiv.style.top = T + 'px'; oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px'; }, 30); } }; </script> </head> <body> <input type="button" value="发射" id="input1"> <img id="img1" src="https://www.geekschool.org/wp-content/uploads/2021/02/1613900824.9848826.jpg" alt=""> </body> </html>
模拟点餐抛物线
X轴方向的left速度损耗(也就是做减速运动,乘以一个摩擦系数)
Y轴方向做加速运动
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>抛物线</title> <style> * { padding: 0; margin: 0; } #img1 { width: 100px; height: 100px; border-radius: 50%; position: absolute; top: 500px; } #input1 { background: red; } </style> <script> window.onload = function () { var oInput = document.getElementById('input1'); var oDiv = document.getElementById('img1'); var timer = null; var iSpeed = -30; var iSpeedX = 30; oInput.onclick = function () { startMove(); }; function startMove() { clearInterval(timer); timer = setInterval(function () { iSpeed += 3; var T = oDiv.offsetTop + iSpeed; iSpeedX *= 0.97; if (T >= document.documentElement.clientHeight - oDiv.offsetHeight) { clearInterval(timer) T = document.documentElement.clientHeight - oDiv.offsetHeight; } oDiv.style.top = T + 'px'; oDiv.style.left = oDiv.offsetLeft + iSpeedX + 'px'; }, 20); } }; </script> </head> <body> <input type="button" value="发射" id="input1"> <img id="img1" src="https://www.geekschool.org/wp-content/uploads/2021/02/1613900824.9848826.jpg" alt=""> </body> </html>