说碰撞运动之前 ，先来看一个很久之前经常在网站中出现的一种形式:
浮动广告
<!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>
点击咨询 