好玩的js小球弹弹撞

最新推荐文章于 2023-09-08 16:38:10 发布

置顶我就是咸鱼

最新推荐文章于 2023-09-08 16:38:10 发布

阅读量136

点赞数

分类专栏： js 文章标签： javascript html5

本文链接：https://blog.csdn.net/weixin_44808327/article/details/109773995

版权

js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>小球弹弹撞</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			position: absolute;
			left: 200px;
			top:100px;
			background: red;
			border-radius: 50%;
		}
		.wp{
			width: 900px;
			height: 700px;
			border: 1px solid;
			position: relative;
			margin: auto;
		}
	</style>
</head>
<body>
	<div class="wp" id="wp">
		<div class="box" id="box"></div>
	</div>
		
</body>
<script type="text/javascript">
	var	_box = document.getElementById('box');
	var _indexL = _box.offsetLeft;
	var _top = _box.offsetTop;
	var _Lv = 2;
	var _La = 2;
	console.log(_indexL)
	console.log(_top)
	var Timer =setInterval(function(){
		_indexL +=_Lv;
		//碰到线反弹回去
		if(_indexL>=wp.offsetWidth-box.offsetWidth || _indexL <= 0){
			_Lv*=-1;
		}

		_top +=_La;
		if(_top>=wp.offsetHeight - box.offsetHeight||_top <= 0){
			_La*=-1;
		}
		_box.style.left = _indexL + 'px';
		_box.style.top = _top + 'px';
	},8)
</script>
</html>

在这里插入图片描述

我就是咸鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
好玩的js小球弹弹撞

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>小球弹弹撞</title> <style type="text/css"> .box{ width: 100px; height: 100px; position: absolute; left: 200px; top:100px; back
复制链接

扫一扫