【前端进阶】js高级运动之碰撞运动

逆流成河ws
703 阅读1分钟

说碰撞运动之前 ，先来看一个很久之前经常在网站中出现的一种形式:

浮动广告

<!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://qlogo2.store.qq.com/qzone/154752365/154752365/100?1570782333" 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://qlogo2.store.qq.com/qzone/154752365/154752365/100?1570782333" alt="">
</body>

</html>
avatar
文章
阅读
粉丝