碰撞检测

最新推荐文章于 2025-05-18 08:46:52 发布

Tony_Liu0611

最新推荐文章于 2025-05-18 08:46:52 发布

阅读量403

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Tony_Liu0611/article/details/52146057

本文介绍了一个简单的HTML页面，其中包含一个红色的小球在一个限定区域内沿X轴和Y轴方向进行碰撞反弹的动画效果。通过使用JavaScript来控制小球的位置变化，并在碰到边界时改变其移动方向。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	#wrap{width: 500px;height: 300px;border: 1px solid hotpink;position: relative;}
	#boll{width: 50px;height: 50px;border-radius: 50%;background: red;position: absolute;left: 0;top: 0;}
	</style>
	</head>
	<body>
	<div id="wrap">
	<div id="boll"></div>
	</div>
	<button type="submit" name="searchsubmit" id="scbar_btn" sc="1" class="pn pnc" value="true"><strong class="xi2">搜索</strong></button>
	</body>
	<script type="text/javascript">
	var wrap = document.querySelector('#wrap');
	var boll = document.querySelector('#boll');


	var speedX = 5;
	var speedY = 2;
	var timer = setInterval(function(){

	if(boll.offsetLeft + boll.offsetWidth >= wrap.offsetWidth \|\| boll.offsetLeft < 0){
	speedX *= -1;
	}
	if(boll.offsetTop + boll.offsetHeight >= wrap.offsetHeight \|\| boll.offsetTop < 0){
	speedY *= -1;
	}




	boll.style.left = boll.offsetLeft + speedX + 'px';
	boll.style.top = boll.offsetTop + speedY + 'px';
	},30);




	</script>
	</html>