构造函数

2017-12-27

1. 构造函数 canvas小球碰撞

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>构造函数运动球</title>
		<style type="text/css">
			canvas {
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="400">你的浏览器不支持canvas</canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		
		//定义球的构造函数
		function Ball(x,y,r,color,speedx,speedy){
			this.x = x;
			this.y = y;
			this.r = r;
			this.color = color;
			this.speedx = speedx;
			this.speedy = speedy;
		}
		//花的方法
		Ball.prototype.draw = function(){
			context.beginPath();
			context.arc(this.x,this.y,this.r,0,Math.PI*2);
			context.fillStyle = this.color;
			context.fill();
		}
		//球的移动方法
		Ball.prototype.move = function(){
			this.x += this.speedx;
			this.y += this.speedy;
			//碰壁检测
			if(this.x < this.r || this.x > canvas.width - this.r){
				this.speedx *= -1;
			}
			if(this.y < this.r || this.y > canvas.height - this.r){
				this.speedy *= -1;
			}
		}
		
		//随机数函数
		function randomNum(min,max){
			return parseInt(Math.random()*(max-min)+min);
		}
		function randomColor(){
			return "rgb("+randomNum(0,256)+","+randomNum(0,256)+","+randomNum(0,256)+")";
		}
		var arr = [];
		for(var i = 0;i < 100;i++){
			var r = randomNum(1,50);
			var x = randomNum(r,canvas.width - r);
			var y = randomNum(r,canvas.height - r);
			var speedx = randomNum(1,10);
			var speedy = randomNum(1,10);
			var color = randomColor();
			var newBall = new Ball(x,y,r,color,speedx,speedy);
			arr.push(newBall);
		}
		
		//实例化球
		function act(){
			context.clearRect(0,0,canvas.width,canvas.height);
			for(var i = 0;i < arr.length;i++){
				arr[i].draw();
				arr[i].move();
			}
			window.requestAnimationFrame(act);
		}
		act();
	</script>
</html>

2. 类 canvas小球碰撞

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>构造函数运动球</title>
		<style type="text/css">
			canvas {
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<canvas id="myCanvas" width="500" height="400">你的浏览器不支持canvas</canvas>
	</body>
	<script type="text/javascript">
		var canvas = document.getElementById("myCanvas");
		var context = canvas.getContext("2d");
		class Ball{
			constructor(x,y,r,color,speedx,speedy){
				this.x = x;
				this.y = y;
				this.r = r;
				this.color = color;
				this.speedx = speedx;
				this.speedy = speedy;
			}
			//花的方法
			draw(){
				context.beginPath();
				context.arc(this.x,this.y,this.r,0,Math.PI*2);
				context.fillStyle = this.color;
				context.fill();
			}
			//球的移动方法
			move(){
				this.x += this.speedx;
				this.y += this.speedy;
				//碰壁检测
				if(this.x < this.r || this.x > canvas.width - this.r){
					this.speedx *= -1;
				}
				if(this.y < this.r || this.y > canvas.height - this.r){
					this.speedy *= -1;
				}
			}
		}
		
		//随机数函数
		function randomNum(min,max){
			return parseInt(Math.random()*(max-min)+min);
		}
		function randomColor(){
			return "rgb("+randomNum(0,256)+","+randomNum(0,256)+","+randomNum(0,256)+")";
		}
		var arr = [];
		for(var i = 0;i < 100;i++){
			var r = randomNum(1,50);
			var x = randomNum(r,canvas.width - r);
			var y = randomNum(r,canvas.height - r);
			var speedx = randomNum(1,10);
			var speedy = randomNum(1,10);
			var color = randomColor();
			var newBall = new Ball(x,y,r,color,speedx,speedy);
			arr.push(newBall);
		}
		
		//实例化球
		function act(){
			context.clearRect(0,0,canvas.width,canvas.height);
			for(var i = 0;i < arr.length;i++){
				arr[i].draw();
				arr[i].move();
			}
			window.requestAnimationFrame(act);
		}
		act();
	</script>
</html>

有上可以看出，用类写面向对象的方法，思路更清晰。当然，在考虑兼容的情况下，还是使用构造函数