JS实现小球运动

最新推荐文章于 2021-06-04 11:49:54 发布

KillerCodes

最新推荐文章于 2021-06-04 11:49:54 发布

阅读量471

点赞数

分类专栏： javascipt

本文链接：https://blog.csdn.net/aaassslll147/article/details/105011643

版权

javascipt 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			canvas{
				border: 1px solid gray;		
			}
		</style>
	</head>
	<body>
		<canvas id="can" width="800" height="600"></canvas>
	</body>
	<script type="text/javascript">
		var can=document.getElementById("can");
		var ctx=can.getContext("2d");
		
		var x=100;
		function Ball(x,y,r,cl,sp){
			this.x=x;
			this.y=y;
			this.r=r;
			this.cl=cl;
			this.sp=sp;
		}
		Ball.prototype.update=function(){
			this.x+=this.sp;
		}
		Ball.prototype.render=function(){
			ctx.beginPath();
			ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
				ctx.fillStyle=this.cl;
				ctx.closePath();
				ctx.fill();
		}
		var objArr=[];
		for(var i=0;i<20;i++)
		{
			var r=parseInt(Math.random()*60+1);
			var sp=parseInt(Math.random()*5+1);
			var cl="rgba("+parseInt(Math.random()*256)+","+
			parseInt(Math.random()*256)+","+
			parseInt(Math.random()*256)+",0.8)";
			var ball=new Ball(x,20+i*50,r,cl,sp);
			objArr[i]=ball;
		}
		
		setInterval(function(){
			ctx.clearRect(0,0,800,600);
			for(var i=0;i<objArr.length;i++)
			{
				objArr[i].update();
				objArr[i].render();
			}
		},1000/30);
	</script>
</html>

实现结果如下：

KillerCodes

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS实现小球运动

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> canvas{ border: 1px solid gray; } </st...
复制链接

扫一扫

专栏目录