Program Animasi JavaScript Bola Bertebaran

Postingan kali ini tentang JavaScript "Bola Bertebaran".
Dimana lisitng program ini disimpan dalam bentuk formati html.
Berikut Listingnya.!!

	<canvas height="400" id="semburan" width="650"></canvas>
	<script type="text/javascript">
	//Membuat variable dan mulai menentukan jari-jari bola
	var line = {
	x: 400,
	y: 0,
	length: 100,
	angle: 0
	};
	//Memfungsikan dengan this yang nantinya akan di panggil di translate.
	function Ball(x, y, r) {
	this.x = 300;
	this.y = 400;
	this.r = 25;
	this.vx = 300;
	this.vy = 300;
	Ball.all.push(this);
	}
	//Menggambar seluruh bola dan menetapkan panjang.
	Ball.all = [];
	Ball.draw_all = function() {
	var i = Ball.all.length;
	while (i--) {
	Ball.all[i].draw();
	}
	};
	//mulai memanggil this yang sudah di berikan, Seperti terlihat di ctx.translate.
	Ball.prototype = {
	draw: function() {
	ctx.save();
	ctx.translate(this.x, this.y, this.vx, this.vy, this.vx);
	ctx.fillStyle = "red";
	ctx.beginPath();
	//Menggambar lingkaran dengan metode arcs.
	ctx.arc(0, 0, this.r, 0, Math.PI * 2, true);
	ctx.closePath();
	ctx.fill();
	ctx.restore();
	},
	//memindahkan function lalu mengindex seluruh bola.
	remove: function() {
	Ball.all.splice(Ball.all.indexOf(this), 1);
	}
	};
	//menentukan id yang akan di panggil dalam bidang canvas HTML5
	var canvas = document.getElementById("semburan");
	var ctx = canvas.getContext('2d');
	setInterval(function() {
	ctx.save();
	ctx.fillStyle = "#f5f5f5";
	ctx.fillRect(0, 0,800,400);
	ctx.restore();
	//Mulai menganimasi berapa banyak bola dan penentuan coordinate
	line.angle += (Math.PI * 2) / 20;
	var x = line.x + line.length * Math.cos(line.angle);
	var y = line.y + line.length * Math.cos(line.angle);
	if (Ball.all.length < 100) {
	for (var i = 0; i < 5; i++) {
	var ball = new Ball(x, y, 2);
	var random_offset = Math.random() * 1 - .5;
	var speed = Math.random() * 15 + 3;
	ball.vx = speed * Math.cos(line.angle + random_offset);
	ball.vy = speed * Math.sin(line.angle + random_offset);
	}
	}
	var i = Ball.all.length;
	while(i--) {
	var ball = Ball.all[i];
	ball.x += ball.vx;
	ball.y += ball.vy;
	ball.vy += .2;
	ball.vx *= 1;
	ball.vy *= .99;
	if (ball.x % 800 !== ball.x) {
	ball.remove();
	}
	else if (ball.y >= 130) {
	ball.vy = -Math.abs(ball.vy);
	ball.vy *= 1;
	if (Math.abs(ball.vy) < 1 && Math.abs(ball.vx) < 1) {
	ball.remove();
	}
	}
	}
	//Melakukan metode save dan restore, perlu di perhatikan di sini yaitu moveto
	//lineto yang memberikan nilai line.x. line.y sobat bisa memodifikasinya sendiri
	ctx.save();
	ctx.beginPath();
	ctx.moveTo(line.x, line.y);
	ctx.lineTo(x, y);
	ctx.fill();
	ctx.restore();
	Ball.draw_all();
	}, 1000 / 77);
	</script> Hasilnya Nanti i gambar diatas, Tapi Dia dalam bentuk animasi.