JS-animation 动画原理：匀速and碰撞检测

程序员文章站 2022-03-13 15:26:59
...
// An highlighted block
var foo = 'bar';
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0; padding: 0;
			}
			body {
				overflow: hidden;
			}
			#A {
				width: 200px; height: 200px;
				background: pink;
				background-size: 200px;
				position: absolute;
				left: 0; right: 0;
			}
			#B {
				width: 200px; height: 200px;
				background: black;
				background-size: 200px;
				position: absolute;
				left: 500px; right: 500px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
			     //获取两个div元素；
				var div1 = document.getElementById("A"); 
				var div2 = document.getElementById("B"); 
				//设置两个div的横向纵向速度；
				var speedX = 5;
				var speedY = 3; 
				div1.speedX = 5;
				div1.speedY = 3; 
				div2.speedX = 5; 
				div2.speedY = 3; 
				//按照设定速度移动；
				function move(el){
					var currentLeft = parseInt(window.getComputedStyle(el).left); 
					var currentTop = parseInt(window.getComputedStyle(el).top); 
					check_border_collision(el); 
					var t1, t2; 
					//若两盒子发生碰撞则弹开，即速度互换；
					if(check_block_collision(div1,div2)){
						t1 = div1.speedX; 
						t2 = div1.speedY; 
						div1.speedX = div2.speedX;
						div1.speedY = div2.speedY;
						div2.speedX = t1;
						div2.speedY = t2;
					}
					var Left = currentLeft + el.speedX; 
					var Top = currentTop + el.speedY; 
					el.style.left = Left + 'px'; 
					el.style.top = Top + 'px'; 
				}
				function check_border_collision(el){
					var style = window.getComputedStyle(el); 
					var Left = parseInt(style.left); 
					var Top = parseInt(style.top);
					var w = parseInt(style.width);
					var h = parseInt(style.height);
					if(Left < 0){
						Left = 0; 
						el.speedX *= -1; 
					}
					if(Left > window.innerWidth - w){
						Left = window.innerWidth - w; 
						el.speedX *= -1; 
					}
					if(Top < 0){
						Top = 0; 
						el.speedY *= -1; 
					}
					if(Top > window.innerHeight - h){
						Top = window.innerHeight - h; 
						el.speedY *= -1; 
					}
					el.style.left = Left + 'px'; 
					el.style.top = Top + 'px'; 
				}
				//两个div碰撞检测；
				function check_block_collision(block1,block2){
					var left1 = parseInt(window.getComputedStyle(block1).left); 
					var left2 = parseInt(window.getComputedStyle(block2).left); 
					var top1 = parseInt(window.getComputedStyle(block1).top); 
					var top2 = parseInt(window.getComputedStyle(block2).top);
					var width1 = parseInt(window.getComputedStyle(block1).width); 
					var width2 = parseInt(window.getComputedStyle(block2).width);
					var height1 = parseInt(window.getComputedStyle(block1).height); 
					var height2 = parseInt(window.getComputedStyle(block2).height);
					var center1 = {
						x: left1 + width1 / 2,
						y: top1 + height1 / 2
					}
					var center2 = {
						x: left2 + width2 / 2, 
						y: top2 + height2 / 2
					}
					var diffx = Math.abs(center1.x - center2.x)
					var diffy = Math.abs(center1.y - center2.y)
					if((diffx<(width1 + width2)/2) && (diffy<(height1 + height2)/2)){
						return true;
					}
					return false; 
				}
				//每隔20毫秒，调用一次function函数；
				setInterval(function () {
					move(div1)
					move(div2)
				}, 20); 
			}
		</script>
	</head>
	<body>
		<div id="A"></div>
		<div id="B"></div>
	</body>
</html>
相关标签： JavaScript 动画效果前端匀速碰撞检测
上一篇： Android游戏中最简单的碰撞检测
下一篇：平面物体碰撞检测