canvas弹跳小球

最新推荐文章于 2023-04-01 23:44:04 发布

渊雨云川

最新推荐文章于 2023-04-01 23:44:04 发布

阅读量193

点赞数

文章标签： javascript html5 css

本文链接：https://blog.csdn.net/weixin_47597177/article/details/123163457

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="s"></canvas>
		<script>
		var aa = document.getElementById("s");
		var canvas = aa.getContext("2d");
		aa.width = window.innerWidth;
		aa.height = window.innerHeight;
		aa.style.background = "#000000";
		var x=10
		var y=10
		var aa=0
		var nu=10//小球的速度
		
		function me(){
			canvas.clearRect(0,0,window.innerWidth,window.innerHeight)
			canvas.beginPath()
			canvas.strokeStyle="antiquewhite"
			canvas.fillStyle="aqua"
			canvas.arc(x,y,10,0,Math.PI*2,false)
			
			canvas.fill()	
			canvas.stroke()
			var n1=Math.floor(Math.random()*10)
			var n2=Math.floor(Math.random()*10)
			var n3=Math.floor(Math.random()*10)
			var n4=Math.floor(Math.random()*10)
			var n5=Math.floor(Math.random()*10)
			var n6=Math.floor(Math.random()*10)
			var n7=Math.floor(Math.random()*10)
			var n8=Math.floor(Math.random()*10)
			
			if(aa==0){
				x=x+nu
				y=y+nu					
			}
			if(aa==1){
				x=x+nu
				y=y-nu
								
			}
			if(aa==2){
				x=x-nu
				y=y+nu
			}
			if(aa==3){
				x=x-nu	
				y=y-nu							
			}
			let stop=requestAnimationFrame(me)//回调函数，解决卡顿
			//设置小球在“碰壁之后的运动方向”
			if(y+10>window.innerHeight){
				if(aa==0){
					aa=1
				}
				if(aa==2){
					aa=3
				}				
			}
			
			if(y<=10){
				if(aa==1){
					aa=0
				}
				if(aa==3){
					aa=2
				}
			}
			if(x<10){
				if(aa==3){
					aa=1
				}
				if(aa==2){
					aa=0
				}
				
			}
			if(x+10>window.innerWidth){
				if(aa==1){
					aa=3
				}
				if(aa==0){
					aa=2
				}
			}
			
		// setTimeout(function(){
		// 	cancelAnimationFrame(stop)
		// },4000)
		// cancelAnimationFrame(stop)
		
		}
		me()
		</script>
	</body> 
	
</html>