Postingan kali ini tentang JavaScript "Bola Bertebaran".
Dimana lisitng program ini disimpan dalam bentuk formati html.
Berikut Listingnya.!!
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.
Artikel Lain:
|
