弹力球

最新推荐文章于 2024-12-07 21:34:01 发布

原创最新推荐文章于 2024-12-07 21:34:01 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

网站前端专栏收录该内容

75 篇文章

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
body {
	margin: 0;
	padding: 0;
}
#ball {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	height: 50px;
	background-color: #f60;
	border-radius: 50%;
}
</style>
</head>

<body>
<div id="ball"></div>

<script>
var winWidth = document.documentElement.clientWidth;  //窗口宽度
var winHeight = document.documentElement.clientHeight;  //窗口的高度

var ball = document.getElementById('ball');  //获取球元素
var ballW = ball.offsetWidth;  //球的宽度
var ballH = ball.offsetHeight; //球的高度

var ballX = 0; //默认x坐标值
var ballY = 0; //默认y坐标值

var ballXSpeed = 2; //横向速度
var ballYSpeed = 2; //纵向速度

setInterval(function(){ //定时器
	//////////水平移动
	ballX+=ballXSpeed;
	
	if(ballX >= winWidth-ballW) { //到达右边界
		ballXSpeed = - ballXSpeed; //反方向移动
	}else if(ballX <= 0){ //到达左边界
		ballXSpeed= -ballXSpeed;  //反方向移动
	}
	ball.style.left = ballX + 'px'; //水平移动
	
	
	//////////垂直移动
	ballY+=ballYSpeed;
	
	if(ballY >= winHeight-ballH) { //到达下边界
		ballYSpeed = - ballYSpeed; //反方向移动
	}else if(ballY <= 0){ //到达上边界
		ballYSpeed= -ballYSpeed; //反方向移动
	}
	ball.style.top = ballY + 'px'; //垂直移动	
	
},10);
</script>
</body>
</html>