Labkom99.com – Pada kesempatan kali ini Belajar Canvas HTML5 Membuat Bola Api Luncur Keren. Canvas adalah hal yang sangat penting dan berguna dalam HTML5. Kita dapat menggambar elemen sesuka hati di Canvas seperti halnya membuat Flash. Seperti halnya kita bermain pain ball hanya saja bola yang digunakan menggunakan bola api bisa melambung dan diarahkan sesuai keinginan dibrowser. Baik kita jabarkan source codenya
Baca Juga : Belajar HTML5 dan Canvas Membuat Animasi Lingkaran
Alat / Bahan Baku
Notepad
Perhatian
Untuk membuat animasi dengan canvas pada bagian ini sebaiknya memahami terlebih dahulu tentang Struktur dasar HTML dan cara membuat template, cara menyimpan dan cara membuka file HTML yang sudah di bahas pada pembahasan Bagaimana Cara Membuat Template HTML
Belajar Canvas HTML5 Membuat Bola Api Luncur Keren
- Membuat Kode CSS
Cukup letakkan tag kanvas di halaman dan berikan CSS sederhana
canvas{
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
cursor: crosshair;
}2. Menempatkan Kode JS
Karena ini adalah animasi dua dimensi, Maka menggunakan metode getContext kanvas untuk mengembalikan objek yang berisi API untuk operasi animasi dua dimensi.
canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');3. Membuat Partikelnya
Pada bagian ini berfungsi untuk menentukan arah kemana bola api akan di luncurkan
particles = {};
newParticle = (function(){
var nextIndex = 0;
return function(x,y,r,o,c,xv,yv,rv,ov){
particles[++nextIndex] = {
index: nextIndex,
x: x,
y: y,
r: r,
o: o,
c: c,
xv: xv,
yv: yv,
rv: rv,
ov: ov
};
};
})
();4. Mendefinisikan Bola Api
Di sini code mewakili siklus hidup bola api. Di bawah ini kita dapat melihat bahwa nilai kehidupan akan berubah dengan kekuatan tembakan bola api.
fireballs = {};
newFireball = (function(){
var nextIndex = 0;
return function(x,y,xv,yv,life){
fireballs[++nextIndex] = {
index: nextIndex,
x: x,
y: y,
xv: xv,
yv: yv,
life: life
};
};
})
();5. Membuat Sentuhan Tarikan Mouse
Berikutnya adalah menentukan mouse untuk menarik katapel siap untuk menembakkan bola api. Dapat dilihat bahwa ketika tombol mouse muncul maka bola api baru terbuat dan siap untuk meluncur
mouse = {x:0,y:0,d:0};
onmousemove = function(e){
mouse.x = e.clientX-o.x;
mouse.y = e.clientY-o.y;
var dx = mouse.x - pos1.x,
dy = mouse.y - pos1.y;
mouse.d = Math.sqrt(dx*dx+dy*dy);
};
charging = false;
pos1 = {x:0,y:0};
showInstructions = true;
onmousedown = function(e){
pos1.x = mouse.x;
pos1.y = mouse.y;
charging = true;
showInstructions = false;
};
onmouseup = function(){
if(charging){
newFireball(
mouse.x,
mouse.y,
(pos1.x-mouse.x)*0.03,
(pos1.y-mouse.y)*0.03,
);
charging = false;
}
};5. Membuat Animasi Bola Api
Berikut adalah kode untuk animasi ketika bola api bergerak, termasuk efek pantulan ketika menyentuh tepi browser
Baca Juga : Belajar HTML + CSS: Membuat Berbagai Bentuk ” Shape ” Dengan HTML dan CSS3
time = 0;
requestAnimationFrame(loop = function(){
ctx.setTransform(1,0,0,1,0,0);
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1;
ctx.fillStyle = bgColor;
ctx.fillRect(0,0,width,height);
ctx.translate(o.x,o.y);
if(charging){
var c = Math.floor(30+mouse.d/2);
ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(pos1.x,pos1.y);
ctx.lineTo(mouse.x,mouse.y);
ctx.lineCap = 'round';
ctx.stroke();
}
if(showInstructions){
pos1.x = -70;
pos1.y = -35;
if(time<10){
var x = -70,
y = -35,
r = 30-time*2,
a = time/10;
}else if(time<80){
var x = (time-10)*2-70,
y = (time-10)-35,
r = 10,
a = 1;
}else if(time<90){
var x = 70,
y = 35,
r = 10+(time-80)*2,
a = 1-(time-80)/10;
}else if(time<140){
var x = 70,
y = 35,
r = 30,
a = 0;
}
var dx = pos1.x-x,
dy = pos1.y-y,
d = Math.sqrt(dx*dx+dy*dy);
if(time<80&&time>10){
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = 1;
var c = Math.floor(30+d/2);
ctx.strokeStyle = 'rgba('+c+','+c+','+c+',1)';
ctx.lineWidth = 4;
ctx.beginPath();
ctx.moveTo(pos1.x,pos1.y);
ctx.lineTo(x,y);
ctx.lineCap = 'round';
ctx.stroke();
}
if(time<140){
ctx.globalCompositeOperation = 'source-over';
ctx.globalAlpha = a;
ctx.beginPath();
ctx.arc(x,y,r,0,Math.PI*2);
ctx.lineWidth = 2;
ctx.strokeStyle = '#aaa';
ctx.stroke();
}
if(time==80){
newFireball(
x,
y,
dx*0.03,
dy*0.03,
);
}
time = (time+1)%180;
}
ctx.globalCompositeOperation = 'lighter';
for(var i in particles){
var p = particles[i];
ctx.beginPath();
ctx.arc(p.x,p.y,p.r,0,Math.PI*2);
ctx.globalAlpha = p.o;
ctx.fillStyle = p.c;
ctx.fill();
}
for(var i in particles){
var p = particles[i];
p.x += p.xv;
p.y += p.yv;
p.r += p.rv;
p.o += p.ov;
if(p.r<0)delete particles[p.index];
if(p.o<0)delete particles[p.index];
}
for(var i in fireballs){
f = fireballs[i];
var numParticles = Math.sqrt(f.xv*f.xv+f.yv*f.yv)/5;
if(numParticles<1)numParticles=1;
var numParticlesInt = Math.ceil(numParticles),
numParticlesDif = numParticles/numParticlesInt;
for(var j=0;j<numParticlesInt;j++){
newParticle(
f.x-f.xv*j/numParticlesInt,
f.y-f.yv*j/numParticlesInt,
7,
numParticlesDif,
particleColor,
Math.random()*0.6-0.3,
Math.random()*0.6-0.3,
-0.3,
-0.05*numParticlesDif
);
}
f.x += f.xv;
f.y += f.yv;
f.yv += gravity;
var boundary;
if(f.y<(boundary = edge.top+7)){
f.y = boundary;
f.yv *= -1;
}else if(f.y>(boundary = edge.bottom-7)){
f.y = boundary;
f.yv *= -1;
}
if(f.x>(boundary = edge.right-7)){
f.x = boundary;
f.xv *= -1;
}else if(f.x<(boundary = edge.left+7)){
f.x = boundary;
f.xv *= -1;
}
if(--f.life<0)delete fireballs[f.index];
}
requestAnimationFrame(loop);
});Hasilnya seperti pada vidio berikut ini
