面向对象编程-小球

最新推荐文章于 2020-11-03 12:42:52 发布

-开瑞坦-

最新推荐文章于 2020-11-03 12:42:52 发布

阅读量248

点赞数

分类专栏：前端杂记

本文链接：https://blog.youkuaiyun.com/qq_32686869/article/details/79383131

版权

前端杂记专栏收录该内容

10 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="underscore-min.js"></script>
</head>
<body>
	<canvas id="mypanle"></canvas>
</body>

<script type="text/javascript">
	const canvas=document.getElementById('mypanle');
	const ctx=canvas.getContext('2d');
	canvas.height=600;
	canvas.width=1000;
	canvas.style.background='#000';

	//小球类
	class Ball{
		constructor(x,y,color){
			this.x=x;
			this.y=y;
			this.color=color;
			this.r=40;
		}
		
		render(){
			ctx.save();
			ctx.beginPath();
			ctx.arc(this.x,this.y,this.r,0,Math.PI * 2);
			ctx.fillStyle = this.color;
			ctx.fill();
			ctx.restore();
		}
	}


	class MoveBall extends Ball{
		constructor(x,y,color){
			super(x,y,color);

			//量的变化
			this.dX = _.random(-5,5);
			this.dY = _.random(-5,5);
			this.dR = _.random(1,3);
		}

		upDate(){
			this.x +=this.dX;
			this.y +=this.dY;
			this.r -= this.dR;
			if(this.r <= 0){
				this.r = 0;
			}
		}
	}

	//实例化小球
	let ballArr=[];
	let colorArr = ['red','green','blue','yellow','purple'];

	canvas.addEventListener('mousemove',function(e){
		ballArr.push(new MoveBall(e.offsetX,e.offsetY,colorArr[_.random(0,colorArr.length-1)]));
		console.log(ballArr);
	})

	setInterval(function(){
		//清屏
		ctx.clearRect(0,0,canvas.width,canvas.height);

		//绘制
		for (let i =0 ;i<ballArr.length;i++) {
			ballArr[i].render();
			ballArr[i].upDate();
		}
	},50)
</script>
</html>