用<div>做运动的小球游戏

最新推荐文章于 2020-02-14 16:19:03 发布

不忘初心-倩

最新推荐文章于 2020-02-14 16:19:03 发布

阅读量394

点赞数

分类专栏： JavaScript HTML

本文链接：https://blog.csdn.net/qq_41988977/article/details/80232537

版权

HTML 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

JavaScript

3 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div  id="div1"  style="position: absolute; background: red; width: 500px;  height: 500px;"></div>
		<div   id="div2"   style="position: absolute;  background: blueviolet; width: 50px; height: 50px; border-radius: 50%;"> </div>
		<script>
			var di1=document.getElementById("div1");
			
			var count=0;
			var hei=0;
			var vgfb =50;
			var bool=true;
			var  setInterVal =setInterval(function(){
				var di2=document.getElementById("div2");
				if(hei<=0||count<=0){
					bool=true;
				}
				if(hei>=450||count>=450 ){
					bool=false;
					
				}
				if(bool){
					count=count+vgfb;
					hei=hei+vgfb;
					div2.style.left=count+"px";
				    div2.style.top=hei+"px";
				}
				else{
					count=count-vgfb;
					hei=hei-vgfb;
					div2.style.left=count+"px";
				    div2.style.top=hei+"px";
				}
			},1000)
		</script>
	</body>
</html>