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:
|